Loving Tina? us on GitHub0.0k

文档

学习

v.Latest
Documentation
渲染我们的Markdown

让我们修复我们的Markdown内容。

1. 更新 app/awesome-content.tsx,添加以下内容:

import { TinaMarkdown } from "tinacms/dist/rich-text";
...
<h1>{amazingTitle}</h1>
<TinaMarkdown content={incredibleBody} />

测试一下。它有效!现在尝试再次编辑您的内容。看,一个富文本编辑器!

2. 继续为您的正文添加一些 样式

为什么我们需要这样做? 当我们向TinaCMS请求Markdown内容时,它会给我们一个解析后的抽象语法树 (AST)。这看起来像一个包含我们的文本/格式/结构的JavaScript对象,每个都有自己的节点。

Tina可以像上面那样使用TinaMarkdown为我们处理这个问题,或者我们可以自己逐步处理以获得更多的控制。🔧

TinaMarkdown 需要在客户端组件中调用,因为它需要访问React钩子。

上次编辑: March 28, 2025