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 文件夹。

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

在创建新内容的过程中会使用到这个名称。例如，注册多个文件夹可以让你选择想要创建的内容类型。
点击 Show the dashboard（显示仪表盘）以打开内容仪表盘
提示
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 管理内容的方式。每种内容类型都包含一组字段，可以根据你网站上要使用的内容类型来定义。

这些字段对应于页面内容的 front matter。

你可以在 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
      }
    ]
  }
]

在编辑器中预览你的文章

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

创建新文章

打开 Front Matter CMS 仪表盘；你可以通过以下方式操作：

打开 Front Matter CMS 的内容仪表盘
点击 Create content（创建内容）按钮
Front Matter 会要求你输入文章的标题。填写后按 Enter 键
你的新文章将被创建并在编辑器中打开。你可以开始撰写你的文章了。

将 Markdoc 与 Front Matter CMS 配合使用

要将 Markdoc 与 Front Matter CMS 配合使用，你必须在 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
      }
    ]
  }
]