你是否也觉得静态网站（如 Hugo , Hexo）的文章难以管理？ 是否也希望有一个漂亮的所见即所得编辑器来辅助写作？

那么，你一定要试试 「Front Matter」 来优雅地管理你的静态网站。

本文将记录我配置 vscode-front-matter 的全过程，并分享配置完成后的“丝滑”发文流程，展示它如何简化操作，提升效率。

Front Matter 的特色功能

「Front Matter」是由 Elio Struyf 开发的一款专为静态网站设计的 CMS (内容管理系统)，它以 Visual Studio Code 扩展的形式提供。

Front Matter 的设计非常灵活，支持多种主流的静态网站生成器：Hugo、Jekyll、Hexo、NextJS、Gatsby、Astro 等。

本文将以 Hugo 为例。我们知道，静态网站的源文件都是由目录和文件组成的。用户常常需要通过命令行，或者直接编辑 Markdown 文件来写作。这对于Geek来说可能不算什么，但对于习惯了 CMS 界面（例如 WordPress）的用户来说，难免会觉得繁琐。

如果能有一款 GUI 工具，或是一个前端界面来编辑 Hugo 网站就好了。

此时，只要装上 Front Matter，你的静态网站写作体验将会轻松许多。Front Matter 让你的 VS Code 仿佛“安装”了一个类似 WordPress 的后台管理界面。结合 VS Code 超强的文字编辑功能，你只需点击几个按钮，就能完成新增文章、预览网站、甚至部署网站等操作。

Front Matter 的核心特色就是图形化。它会自动读取你现有网站的文章、图片、标签、分类，并清晰地罗列在专属面板上。用户可以使用所见即所得的 Markdown 编辑器写作，并通过漂亮的界面来批量管理分类和标签。

Front Matter 甚至还会尝试给出一些 SEO 建议，或者让你调用 AI 来辅助写作。

小小的吐槽： “Front Matter”，作者真是取了个“好”名字。如果搜索时不特别注明，搜到的几乎全是关于 Markdown 语法中 “front matter”（头部元数据）的资料。(黑暗執行緒 也认为这个命名不利于 SEO)。

为了清楚地指代，我更喜欢称这个工具为 vscode-front-matter。

当我提到 Front Matter (首字母大写) 时，指的是 vscode-front-matter 这款扩展。

当我提到 front matter (全小写) 时，指的是 Markdown 文件头部的元数据。

为什么你应该使用 Front Matter CMS？

虽然 Hugo 是静态网站框架，但它也可以通过加装外部 CMS，使其拥有后台管理界面。

我这篇文章主要讲的是本地开发的使用情景：即在自己的电脑上安装 VS Code，搭配 Front Matter CMS 来编辑 Hugo 网站的文章。

那么，如果想远程开发呢？如果我们能将网页版的 VS Code (code-server) 部署到 VPS，再在里面安装 Front Matter CMS，理论上就能拥有一个类似 WordPress 后台的在线编辑器。你可以随时随地通过浏览器访问来撰写文章，再也不用盯着一堆 Markdown 文件发愁。

我个人使用 Front Matter 的理由：

我自己想要使用 CMS 的原因是 Hugo 没有像 WordPress 、Typecho 这样的 CMS一样的管理后台。可以很方便地管理分类、标签、图片、文件。

现在，随着文章的增加，难以管理。所以我需要一个更轻松的图形化界面。起码，它可以减少我手动新建文件和目录的步骤，让我能更专注于写作本身。

安装 vscode-front-matter

安装 VS Code，安装 Hugo 和 Git，并确保你的 Hugo 网站项目已建立。

打开 VS Code，点击“文件” → “打开文件夹”，选择你 Hugo 网站的根目录。

在 VS Code 的扩展市场中，搜索并安装 vscode-front-matter。

安装完成后，点击 VS Code 左侧活动栏的 FM 图标，打开 Front Matter 面板，点击 INITIALIZE PROJECT (初始化项目)。

在 FRAMEWORK PRESETS (框架预设) 中选取 hugo。

在 REGISTER CONTENT FOLDERS (注册内容文件夹) 中，选择你存放文章的目录，例如我的是 content 。

点击 IMPORT ALL TAGS AND CATEGORIES (导入所有标签和分类)。

建立 Front Matter 配置文件

请参考 官方文档 进行配置。

注意： 每个 Hugo 主题的设计都不同，你必须根据你的个人情况进行调整。在撰写本文时，我使用的是自己瞎改的主题。

初始化项目后，Front Matter 会在你的网站根目录建立 .vscode 目录和 .frontmatter 目录，以及一个 frontmatter.json 配置文件。

我们只修改 frontmatter.json，不要去动 VS Code 的全局 setting.json。这样，Front Matter 的配置就只在打开这个 Hugo 网站目录时生效。

打开 frontmatter.json，填入以下内容（根据你的情况修改）：

1. 基础预览设置 设置网站本地预览地址和 Hugo server 的启动命令。

{
  "frontMatter.preview.host": "http://localhost:1313",
  "frontMatter.site.baseURL": "https://suus.me/",
  "frontMatter.framework.startCommand": "hugo server"
}

2. 内容类型(Content Types)和字段 我的文章都是以 Page Bundle 形式发布的。我在 frontMatter.taxonomy.contentTypes 中设置新文章默认包含的 front matter 字段。

{
  "frontMatter.taxonomy.contentTypes": [
    {
      "name": "default",
      "previewPath": null,
      // 启用 Page Bundle
      "pageBundle": true,
      // 默认新文章目录名，留空，目录就会直接使用文章标题
      "filePrefix": "",
      "fields": [
        {
          "title": "标题",
          "name": "title",
          "type": "string"
        },
        {
          "title": "发布日期",
          "name": "date",
          "type": "datetime",
          "default": "{{now}}",
          "isPublishDate": true
        },
        {
          "title": "是否为草稿",
          "name": "draft",
          "type": "draft"
        },
        {
          "title": "分类",
          "name": "categories",
          "type": "categories"
        },
        {
          "title": "标签",
          "name": "tags",
          "type": "tags"
        },
        {
          "title": "预览图",
          "name": "preview",
          "type": "image"
        }
      ]
    }
  ]
}

3. Front Matter 和日期格式 指定文章 front matter 采用 YAML 格式，并设定时间格式。

{
  "frontMatter.taxonomy.frontMatterType": "YAML",
  "frontMatter.taxonomy.dateFormat": "yyyy-MM-dd'T'HH:mm:ssxxx"
}

4. 注册特定的内容文件夹 (Page Folders) 我的 content 目录下还有不同的 section（如 posts 和 artworks），我使用 frontMatter.content.pageFolders 分别指定它们。

{
  "frontMatter.content.pageFolders": [
    {
      "title": "posts",
      "path": "[[workspace]]/content/posts"
    },
    {
      "title": "artworks",
      "path": "[[workspace]]/content/artworks"
    }
  ]
}

5. 将 Shortcode 转换成 Snippet (代码片段)

我在文章中粘贴 Youtube 视频时，为了避免排版错乱，都用了自定义的 Shortcode 来处理 CSS，但这个代码有点长。

Front Matter 允许你把 Shortcode 短代码变成图形化菜单，以后就可以通过点击按钮来插入。

例如，我有一个 Shortcode 位于 Hugo网站根目录/layouts/shortcodes/embedded-youtube.html。

在文章中插入的语法是： \{\{< embedded-youtube "视频网址"> \}\}

于是，我在 frontmatter.json 中添加以下片段：

{
  // Shortcode 代码片段
  "frontMatter.content.snippets": {
    // "embedded-youtube" 按钮
    "embedded-youtube": {
      "description": "插入 Youtube 视频",
      "body": [
         "{< embedded-youtube [[videourl]] >}"
      ],
      "fields": [
        {
          "name": "videourl",
          "title": "视频网址",
          "type": "string",
          "default": ""
        }
      ]
    }
  },
  // 关闭 Snippet 的默认注释
  "frontMatter.snippets.wrapper.enabled": false
}

配置完成后，Front Matter 的 Dashboard (仪表盘) 上的 Snippets 页面就会出现一个 embedded-youtube 按钮。点击它，填入视频网址，Shortcode 就会自动插入到文章光标处。

6. 一切就绪后的发文流程

配置完成后，我现在的发文流程被极大简化了：

打开 VS Code，打开 站点 根目录文件夹。切换到 Front Matter (FM) 页面，点击 Create Content (创建内容)。

选择要发布的 section (例如 posts)，输入文章标题。Front Matter 会自动创建好 Page Bundle 目录和 index.md 文件。

插入图片： 点击编辑器右上角的“插入图片”按钮，Front Matter 会自动定位到当前 Page Bundle 所在的目录，我只需选择图片素材即可插入。

优化写作体验： 如果觉得默认编辑器界面不够优雅，可以点击左下角的 Enable writing settings (启用写作设置)，这会临时调整行距和字体，让写作更舒适。

设置缩略图： Front Matter 列表的缩略图需要手动指定才会显示。我依据自己主题的习惯，将 Page Bundle 目录下、与 index.md 同级的 feature.webp 文件设置为文章缩略图 (在 front matter 中指定 preview 字段)。

预览： 在 Dashboard (仪表盘) 点击 Start Server 启动 Hugo 服务器，然后打开浏览器实时预览。

部署： 关于部署，因为我自己准备了一个用于 Git 推送的脚本，所以我没有启用 Front Matter 自带的 Git 集成功能。

关于远程使用 Front Matter

Front Matter 的一个局限在于，它主要还是为本地运行而设计的，对远程开发的支持度不佳，更不用说部署到云平台进行在线编辑了。

如何通过浏览器使用 Front Matter？

如果使用 code-server (网页版 VS Code)，Front Matter 扩展目前无法在浏览器环境中正常运作。

目前可行的方案，也许是连接到电脑的远程桌面，在远程桌面上执行 VS Code 桌面版主程序，这样才能正常使用 Front Matter 的全部功能。