让我们修复我们的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钩子。