Extension Front-Matter 在VS Code里管理静态网站内容的扩展

用 Hugo、Jekyll、Astro、Next 等静态站点写内容时，最烦的是反复手敲 front matter（标题、日期、分类、标签、封面），还要记 slug、管草稿、对媒体文件。纯手写 YAML 头容易出错，又缺少可视化的内容总览。
Front Matter 的动机，是把 VS Code 直接变成静态站的“轻量 CMS”：可视化编辑、媒体管理、预览一站式。

项目基本信息

一、项目介绍

estruyf/vscode-front-matter 是一个 MIT 协议的 VS Code 扩展，把编辑器变成静态网站的内容管理面板。它支持 Hugo、Jekyll、Astro、Next.js、Eleventy、Docusaurus 等基于 front matter 的站点，提供内容列表/预览、可视化编辑 front matter、分类标签管理、媒体库、草稿与发布状态、SEO 与社交分享预览，以及本地预览服务器。它不绑定某套框架，而是读你已有的 Markdown + front matter，让你在 VS Code 内像用 CMS 一样管理内容。

二、核心优势

1. 可视化编辑：在编辑器内填表式改 front matter，不再手敲 YAML。
2. 多框架：Hugo/Jekyll/Astro/Next/Eleventy/Docusaurus 等都支持。
3. 媒体管理：内置媒体库，上传与引用图片更顺手。
4. 内容总览：列表、草稿/发布状态、预览一站式。
5. SEO 预览：社交分享卡与元信息可视化检查。

三、适用场景

• 写静态博客/文档，想告别手敲 front matter。
• 团队用 VS Code 维护 Hugo/Astro 等内容站。
• 需要媒体库与草稿/发布状态管理。
• 想在看板式界面里统筹多篇内容。

四、安装教程

从 VS Code Marketplace 搜索 Front Matter（作者 Elio Struyf）安装，或：

code --install-extension eliostruyf.vscode-front-matter

安装后在侧边栏打开 Front Matter 面板，按引导初始化你的内容文件夹（指定 content 路径与类型）。
常见报错：未初始化内容目录会导致面板空；框架类型选错会影响字段映射，初始化时选对框架。

五、使用示例

初始化后，在 Front Matter 面板里新建/编辑文章，可视化填标题、日期、分类、标签、封面，媒体库拖图即用；点预览可在本地起服务看渲染效果。真实流程：你像用 CMS 一样在 VS Code 里统筹多篇内容，front matter 由扩展自动维护，避免手写出错。

六、常见问题

Q：它和直接用 Markdown 写有什么区别？
A：同样写 .md，但 front matter 由面板可视化维护，并多了内容总览、媒体库与预览，减少手敲与出错。
Q：支持哪些框架？
A：Hugo、Jekyll、Astro、Next.js、Eleventy、Docusaurus 等基于 front matter 的站点，且可自定义映射。
Q：协议能商用吗？
A：采用 MIT License，可自由用于个人与商业站点，需保留版权与许可声明。

七、总结

Front Matter 把 VS Code 变成静态站点的可视化内容管理器，让 front matter、媒体库、草稿与预览一站式完成，告别手敲 YAML。对用 Hugo/Astro/Next 等写内容的团队，它是 MIT 协议、框架无关的务实扩展。