跳转到内容

Front Matter CMS 与 Astro

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

在本节中,我们将介绍如何将 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 指南