Front Matter CMS 和 Astro

Front Matter CMS 将 CMS 带到你的编辑器，它在 Visual Studio Code、Gitpod 等中运行。

¥Front Matter CMS brings the CMS to your editor, it runs within Visual Studio Code, Gitpod, and many more.

与 Astro 集成

¥Integration with Astro

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

¥In this section, we’ll walk through how to add Front Matter CMS to your Astro project.

先决条件

¥Prerequisites

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

安装 Front Matter CMS 扩展

¥Install the Front Matter CMS extension

你可以从 Visual Studio 代码市场 - 前端内容获取扩展名或单击以下链接：在 VS Code 中打开 Front Matter CMS 扩展

¥You can get the extension from the Visual Studio Code Marketplace - Front Matter or by clicking on the following link: open Front Matter CMS extension in VS Code

项目初始化

¥Project initialization

安装 Front Matter CMS 后，你将在活动栏中看到一个新图标。当你单击它时，它将在主侧边栏中打开 Front Matter CMS 面板。请按照以下步骤初始化你的项目：

¥Once Front Matter CMS is installed, you will get a new icon in the Activity Bar. It will open the Front Matter CMS panel in the primary sidebar when you click on it. Follow the next steps to initialize your project:

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

Folder registration is required to let Front Matter CMS know where it can find and create your content. You can have multiple types of folders like pages, blog, docs, and many more.
系统将要求你输入文件夹的名称。默认情况下，它采用文件夹名称。

The name gets used during the creation process of new content. For example, having multiple folder registrations allows you to choose the type of content you want to create.
单击“显示仪表板”以打开内容仪表板
Tip
Once Front Matter CMS is initialized, you can open the dashboard as follows:
- Using the keyboard binding: alt + d (Windows & Linux) or options + d (macOS)
- Open the command palette and search for Front Matter: Open dashboard
- Click on the Front Matter icon on the panel’s title bar or files.

项目配置

¥Project configuration

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

¥Once the project is initialized, you will get a frontmatter.json configuration file and a .frontmatter folder in the root of your project.

Directory.frontmatter/
- Directorydatabase/
  - mediaDb.json
Directorysrc/
- …
astro.config.mjs
frontmatter.json
package.json

内容类型配置

¥Content-type configuration

内容类型是 Front Matter CMS 管理内容的方式。每个内容类型都包含一组字段，可以根据你想要用于网站的内容类型来定义这些字段。

¥Content-types are the way Front Matter CMS manages your content. Each content-type contains a set of fields, which can be defined per type of content you want to use for your website.

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

¥The fields correspond to the front matter of your page content.

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

¥You can configure the content-types in the frontmatter.json file.

打开 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
      }
    ]
  }
]

在编辑器中预览你的文章

¥Preview your articles in the editor

在 Front Matter CMS 面板中，单击“启动服务器”按钮。此操作将启动 Astro 本地开发服务器。一旦运行，你可以打开内容仪表板，选择其中一篇文章，然后单击“打开预览”按钮以在编辑器中打开该文章。

¥From the Front Matter CMS panel, click on the Start server button. This action starts the Astro local dev server. Once running, you can open the content dashboard, select one of the articles and click on the Open preview button to open the article in the editor.

创建新文章

¥Create new articles

打开 Front Matter CMS 仪表板；你可以按如下方式执行此操作：

¥Open the Front Matter CMS Dashboard; you can do this as follows:

打开 Front Matter CMS 的内容仪表板
单击“创建内容”按钮
Front Matter 会询问你文章的标题。填写并按回车键
你的新文章将在编辑器中创建并打开。你可以开始写你的文章了。

将 Markdoc 与 Front Matter CMS 结合使用

¥Using Markdoc with Front Matter CMS

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

¥To use Markdoc with Front Matter CMS, you must configure this in the frontMatter.content.supportedFileTypes. This setting lets the CMS know which types of files it can progress.

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

¥You can configure the setting as follows:

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

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

¥To allow your content to be created as Markdoc, specify the fileType property on the content-type.

"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
      }
    ]
  }
]

官方资源

¥Official Resources