Front Matter CMS 与 Astro

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

与Astro集成

标题部分 与Astro集成

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

前提条件

标题部分 前提条件
  • Visual Studio Code
  • 使用 Astro 博客模板 来提供基本配置和示例内容，以便开始使用 Front Matter CMS。

安装 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文件夹。
  • 你将被要求输入文件夹的名称。默认情况下，它会使用文件夹名称。
  • 点击 Show the dashboard 以打开内容仪表板

项目配置

标题部分 项目配置

项目初始化后，你将在项目的根目录中获得一个 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.json
"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 Dashboard，你可以按照以下方式操作：

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

使用 Markdoc 与 Front Matter CMS

标题部分 使用 Markdoc 与 Front Matter CMS

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

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

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

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

frontmatter.json
"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
      }
    ]
  }
]

官方资源

标题部分 官方资源

更多 CMS 指南