Front Matter CMS 与 Astro

Front Matter CMS 将 CMS 集成到你的编辑器中，它可以在 Visual Studio Code、GitPod 和许多其他编辑器中运行。

与Astro集成

在本节中，我们将介绍如何将 Front Matter CMS 添加到你的 Astro 项目中。

前提条件

Visual Studio Code
使用 Astro 博客模板来提供基本配置和示例内容，以便开始使用 Front Matter CMS。

安装 Front Matter CMS 扩展

你可以从Visual Studio Code Marketplace - Front Matter获取扩展，或者点击以下链接：在 VS Code 中打开 Front Matter CMS 扩展

项目初始化

安装 Front Matter CMS 后，你将在活动栏中获得一个新的图标。单击该图标将在主侧边栏中打开 Front Matter CMS 面板。按照下面的步骤来初始化你的项目：

在 Front Matter 面板上点击 Initialize project 按钮
欢迎屏幕将会打开，然后你可以在上面开始初始化项目
点击第一步 Initialize project
由于 Astro 是受支持的框架之一，你可以从列表中选择它
注册你的内容文件夹，在本例中是src/content/blog文件夹。

:::note文件夹注册是必需的，以便让 Front Matter CMS 知道在哪里找到和创建你的内容。你可以有多种类型的文件夹，比如页面、博客、文档等等。:::
你将被要求输入文件夹的名称。默认情况下，它会使用文件夹名称。

:::note名称将在新内容的创建过程中使用。例如，有多个文件夹注册可以让你选择要创建的内容类型。:::
点击 Show the dashboard 以打开内容仪表板

:::tip一旦 Front Matter CMS 初始化完成，你可以按照以下方式打开仪表板：
- 使用键盘绑定：alt + d（Windows 和 Linux）或 options + d（macOS）
- 打开命令面板，搜索Front Matter: Open dashboard
- 单击面板标题栏或文件上的 Front Matter 图标。:::

项目配置

项目初始化后，你将在项目的根目录中获得一个 frontmatter.json配置文件和一个 .frontmatter 文件夹。

文件夹.frontmatter/
- 文件夹database/
  - mediaDb.json
文件夹src/
- …
astro.config.mjs
frontmatter.json
package.json

内容类型配置

内容类型是 Front Matter CMS 管理你的内容的方式。每个内容类型包含一组字段，可以根据你希望在网站上使用的每种类型的内容来定义。

这些字段对应于页面内容的前置信息。

你可以在 frontmatter.json 文件中配置内容类型。

打开 frontmatter.json 文件
用以下内容类型配置替换 frontMatter.taxonomy.contentTypes 数组：

"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]

:::note此配置确保 Front Matter 内容类型与 Astro 博客模板的内容集合模式匹配。:::

:::tip你可以在 Front Matter CMS 的内容创建文档部分中找到有关内容类型和支持的字段的更多信息。:::

在编辑器中预览文章

从 Front Matter CMS 面板，点击 Start server 按钮。此操作将启动 Astro 本地开发服务器。一旦运行，你就可以打开内容仪表板，选择一篇文章，然后点击 Open preview 按钮将文章在编辑器中打开。

创建新文章

打开 Front Matter CMS Dashboard，你可以按照以下方式操作：

打开 Front Matter CMS 的内容仪表板
点击 Create content 按钮
Front Matter 将要求你输入文章的标题，输入标题并按 Enter 键
你的新文章将被创建并在编辑器中打开，接着你可以开始编写文章了

使用 Markdoc 与 Front Matter CMS

要在 Front Matter CMS 中使用 Markdoc，你必须在 frontMatter.content.supportedFileTypes 中进行配置。此设置使 CMS 知道它可以处理哪种类型的文件。

你可以按以下方式配置此设置：

"frontMatter.content.supportedFileTypes": [ "md", "markdown", "mdx", "mdoc" ]

要允许将内容创建为 Markdoc，请在内容类型上指定 fileType 属性。

"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fileType": "mdoc",
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]