使用 TinaCMS 与 Docusaurus

Docusaurus 是一个强大的基于 React 的静态网站生成器，能够轻松创建漂亮的文档网站。由于它主要为文档维护者设计，用户体验围绕文件系统工作并直接编辑文件。它是一个非常灵活的系统，利用多种文件类型、元文件配置、包含硬编码内容的 JavaScript 文件和自动生成。使用 TinaCMS，你可以通过一个简单但灵活的编辑界面利用 Docusaurus 的强大功能。

本指南基于将 Docusaurus Classic 示例 适配为与 TinaCMS 的基本编辑功能一起使用。你可以在这里找到完整的 TinaCMS + Docusaurus 启动器。

设置

首先，我们需要使数据更加一致，以便与我们将要编写的架构对齐。文档和博客内容是 .md 和 .mdx 文件的混合，旁边还有一些 .json 元文件用于描述文件夹如何在“文档”侧边栏中显示。我们将删除元文件，因为我们将为侧边栏编写一个由编辑器手动控制的架构，并将所有 .md 文件迁移到 .mdx。对于博客，我们将提取嵌入在文件名中的日期到 MDX 前置数据中，并将作者内联，因为 TinaCMS 的引用系统基于单个文件引用，而不是像 authors.yml 这样的单一数据文件。

为了使用 TinaCMS 管理图像，你需要一个用于存放所有图像的中央文件夹，可以根据需要包含 docs 或 blog 特定图像的子文件夹。将所有共置图像移动到 static 文件夹，并在 .mdx 文件中根据需要更新它们。

Docusaurus 支持全局注册的 .mdx 组件，因此你不必在本地导入它们。我们将注册所有希望与 TinaCMS 一起设置编辑的组件，以便可以从富文本编辑器中添加它们。

接下来，我们需要修改 sidebar.js、docusaurus.config.js 和 pages/index.js 以从 .json 文件中提取数据，以便内容可以在 TinaCMS 中编辑。默认情况下，Docusaurus 的侧边栏是自动生成的，因此这也意味着复制现有的侧边栏数据，并设置侧边栏以从我们的数据手动生成。Docusaurus 很灵活，但仍然需要数据具有一定的形状，因此你需要编写一个解析函数以根据需要塑造它。

现在我们的数据已准备好，是时候编写一个 TinaCMS 架构 了。在这里，你可以创建你想要的编辑体验。在 TinaCMS 中，内容包含在集合中，以下是文档集合架构的示例：

你可以看到你可以控制数据的外观、哪些字段是必需的、使用什么 UI、内容的位置、格式等等。由于你的架构是 JavaScript，你可以渲染任何你想要的东西，包括一个自定义警告组件：

编辑

一旦我们编写了架构并将所有内容连接起来，我们就可以从 TinaCMS 的 UI 中进行编辑。

使用 TinaCMS 编辑基于块的主页：

Figure: 在 TinaCMS 中编辑 Docusaurus 示例主页

使用 TinaCMS 编辑 MDX 页面：

Figure: 在 TinaCMS 中编辑 MDX Docusaurus 页面

注意

这只是你可以使用 Docusaurus 和 TinaCMS 做的事情的冰山一角；要了解更多关于 Docusaurus 的信息，请查看他们的文档。