用 VSCode Front Matter 插件高效写 Astro 博客

by 落墨in 技术

写 Astro 博客时，最反人性的环节往往不是写作，而是每篇文章开头那段 frontmatter：标题、日期、标签、草稿标记……手写不仅慢，还容易拼错字段名。Front Matter 这款 VSCode 插件，正是为解决这个痛点而生。

本文基于本博客的实际配置（frontmatter.json）讲解，照着做就能直接上手。

它是什么

Front Matter 由 Elio Struyf 开发，是一款面向静态站点生成器（Astro、Hugo、Jekyll 等）的内容管理插件。它不只是一个 frontmatter 编辑器，而是一个内嵌在 VSCode 里的 CMS 仪表盘：新建文章、填字段、插入媒体、本地预览、SEO 检查，全部在编辑器内完成。

安装

在 VSCode 扩展市场搜索 Front Matter，作者为 Elio Struyf，安装后侧边栏会出现一个文件夹图标，点击即可打开 Dashboard。

初始化项目配置

插件通过根目录下的 frontmatter.json（新版也支持 .frontmatter.json / fm.json）认识你的项目。配置文件长这样：

{
  "$schema": "https://frontmatter.codes/frontmatter.schema.json",
  "frontMatter.framework.id": "astro",
  "frontMatter.preview.host": "http://localhost:4321",
  "frontMatter.content.publicFolder": "public",
  "frontMatter.content.pageFolders": [
    {
      "title": "blog",
      "path": "[[workspace]]/src/content/blog",
      "contentTypes": ["default"]
    }
  ]
}

几个关键点：

  • framework.id: "astro" —— 让插件按 Astro 的方式处理内容。
  • preview.host —— 本地预览地址，配合 astro dev（默认 http://localhost:4321）实时刷新。
  • pageFolders —— 告诉插件文章放哪。本博客全部 Markdown 都在 src/content/blog，与 astro.config 里的 glob 加载器路径一致。

字段定义：和 Astro schema 一一对应

frontmatter.json 里的 contentTypes[].fields 决定了新建文章时仪表盘会让你填哪些字段。本项目的字段经过定制，正好对应 src/content.config.ts 的 zod schema：

字段 类型 说明
title string 文章标题
description string 摘要 / SEO 描述
pubDate datetime 发布日期，默认 {{now}} 即当前时间
tags tags 标签，可多选
draft draft 草稿标记，为 true 时不发布
heroImage image 封面图

小提示：只要在 schema 里把 pubDate 标了 isPublishDate: true，插件就会把它当作发布日期，仪表盘里能按时间排序。

日常写作流程

  1. 新建文章：打开 Dashboard → Create new content（或快捷键）→ 选 default 类型 → 输入标题。插件会按规则自动生成文件名（如 posts-6-vscode-frontmatter.md），并把必填 frontmatter 一次性写好。
  2. 填写字段：在 Dashboard 的 Metadata 面板里填标题、描述、选标签、勾草稿，无需手敲 YAML。
  3. 插入媒体：把图片丢进 public 或 src/assets，点在字段里选图，插件自动写入正确路径。
  4. 本地预览：点 Preview 打开 http://localhost:4321，改一字、刷一眼。
  5. 发布：写完把 draft 取消勾选，提交即可。

还能做什么

  • SEO 检查：内置面板会提示描述是否过短、标题是否缺失，写作时顺手优化。
  • Snippets（片段）：把常用结构（如代码块、引用、提示框）存成片段，写文时一键插入。
  • Custom Scripts / Actions：可挂自定义脚本，比如发布前自动压缩图片、生成站点地图。
  • Taxonomy（分类法）：统一管理 tags，避免同一个标签拼出两种写法。

小结

对 Astro 博客作者来说，Front Matter 插件把“写文章”和“管配置”两件事合二为一：你只管写，frontmatter 交给仪表盘。配合本仓库已有的 frontmatter.json，开箱即用，新文章五秒起步。

vscodefrontmatterastro效率工具