· 操作说明
使用 Front Matter CMS 管理和编写文章
什么是 Front Matter CMS？
Front Matter CMS 是一个专为静态网站内容管理设计的 VS Code 扩展。它提供了图形化界面来管理文章的 Front Matter 配置，让内容创作变得更加直观和高效。
💡 优势：相比手动编写 Front Matter，Front Matter CMS 提供可视化表单，减少语法错误，提高工作效率。
安装和配置
第一步：安装扩展
- 点击 VS Code 左侧边栏的 “扩展” 图标
- 搜索 “Front Matter CMS”
- 点击 “安装” 按钮
第二步：启动 CMS 界面
-
打开 FM 面板
- 安装完成后，左侧边栏会出现 “FM” 图标
- 点击 FM 图标切换到内容管理面板
-
打开仪表盘
- 点击面板右上角的 FM 按钮
- 或点击窗口右下角的 “FM 10.X.X” 按钮
- 面板将显示现有文章列表和管理选项
📝 功能概览：在此面板中，您可以新建、删除、编辑和管理所有文章
创建和编辑文章
第一步：创建新文章
- 启动创建流程
- 在 FM 面板顶部，点击 “创建内容” 按钮
- 在弹出的输入框中输入文章标题
- 按回车确认创建
第二步：配置文章信息
-
使用可视化配置界面
- 文章创建后会自动打开编辑器
- 左侧 FM 面板显示各种配置选项的输入框
- 在输入框中填写内容，右侧文档的 Front Matter 会自动同步更新
-
配置项说明
- 发布日期：文章发布时间
- 封面：选择一张图片作为封面
- 标题：文章的标题
- 摘要：文章简短描述
- 类别：选择或输入文章分类（输入后按回车确认）
- 标签：添加相关标签（输入后按回车创建）
⚠️ 操作提示：类别和标签字段需要在输入后按回车键才能成功创建选项
第三步：编写文章内容
-
编辑正文
- 在右侧编辑器的 Front Matter 下方编写文章内容
-
保存文章
- 使用快捷键
Ctrl+S保存文件 - 确保所有配置和内容都已正确保存
- 使用快捷键
本地预览功能
为什么需要本地预览？
VS Code 内置的 Markdown 预览与网站实际显示效果存在差异。本地预览功能可以让您：
- 查看文章在真实网站环境中的显示效果
- 实时预览样式和布局
- 在发布前确保内容完美呈现
Front Matter CMS 简化了本地预览的操作流程，让预览变得更加便捷。
环境准备
在使用本地预览前，需要按照项目 README 文档配置开发环境
启动本地服务器
第一步：启动开发服务器
-
使用 FM 快捷启动
- 在 FM 面板的 “操作” 栏中找到 “启动服务器” 选项
- 点击启动，等待服务器初始化完成
- ⏰ 注意：首次启动可能需要较长时间，请耐心等待
-
确认启动状态
- 终端会显示绿色的成功提示信息
- 出现本地服务器地址（通常是
http://localhost:4321）
第二步：打开预览页面
-
浏览器预览
- 按住
Ctrl键并点击终端中的绿色网址 - 系统默认浏览器将打开预览页面
- 按住
-
内置预览
- 点击 FM 侧边栏中的 “打开预览” 按钮
- 在 VS Code 内部窗口中预览网站
-
管理终端面板
- 启动完成后，点击终端面板右上角的 ”×” 隐藏面板
- ⚠️ 重要：不要点击 “🗑️” 图标，这会终止服务器进程
第三步：实时预览编辑
热重载功能
- 修改文章内容后，使用
Ctrl+S保存文件 - 预览窗口会自动刷新并显示最新内容
- 无需手动刷新浏览器
第四步：停止本地服务器
-
手动停止
- 在 FM 面板的 “操作” 栏点击 “停止服务器”
- 服务器将安全关闭
-
自动停止
- 关闭 VS Code 时，后台终端进程会自动结束
- 无需手动操作
一键发布文章
简化的发布流程
Front Matter CMS 提供了简化的发布流程，多次 Git 操作简化为单次点击。
发布操作步骤
发布流程
- 在 FM 侧边栏顶部找到 ”🔄 同步” 按钮
- 补充提交信息（可选）
- 可以自定义描述本次更改内容
- 也可以留空，系统会使用默认提交信息
- 点击同步后发布
这个同步按钮会合并完成以下操作：
- 📝 暂存更改：将所有修改的文件添加到暂存区
- 💾 创建提交：生成包含更改的提交记录
- ☁️ 推送到远程：将提交上传到远程仓库
发布前检查
如果您进行了大量更改，可以在发布前切换到源代码管理侧边栏进行确认
验证发布结果
- 同步完成后，检查 流水线页面
- 构建完成后访问网站确认更新效果
总结
Front Matter CMS 为内容创作者提供了完整的工作流程：
- 🛠️ 可视化编辑：直观的表单界面管理文章元数据
- 👀 实时预览：本地服务器提供真实的预览效果
- 🚀 一键发布：简化的发布流程
