怎样在 VS Code 创建文章

环境准备

💡 提示：初次设置相对复杂，建议寻求技术同事协助完成。一旦配置完成，后续操作将变得简单便捷。

必要软件安装

1. 下载并安装 VS Code

   • 访问 VS Code 官网 下载对应系统版本
   • 按照安装向导完成安装

2. 配置 Git 环境

   • 安装 Git 客户端
   • 参考 云效 Git 配置文档 完成用户信息设置
   • 需要执行两条命令设置用户名和邮箱（仅需配置一次）

克隆代码仓库

1. 复制仓库地址

   • 在仓库页面找到并复制仓库 URL

   

2. 在 VS Code 中克隆仓库

   • 打开 VS Code，选择 “克隆 Git 仓库…”
   • 粘贴复制的仓库地址, 回车确认

3. 选择本地存储位置

   • 选择合适的本地文件夹存储项目
   • 克隆完成后，按提示打开工作区

创建新文章

第一步：浏览现有文章

1. 打开文章目录

   • 在左侧文件资源管理器中，展开 src\data\post 文件夹
   • 这里存放着所有已发布的文章文件

2. 查看文章格式

   • 单击或双击任意 .md 文件打开
   • 查看 Front Matter 配置和正文结构

3. 启用预览功能

   • 点击编辑器右上角的 “打开侧边预览” 图标
   • 预览窗口可以帮助您查看 Markdown 渲染效果
   • ⚠️ 注意：VS Code 的预览效果与网站实际显示会有差异

   

第二步：创建文章文件

1. 新建文件

   • 在 post 文件夹上右键，选择 “新建文件”
   • 或使用快捷键创建新文件

2. 命名文件

   • 输入文件名，必须以 .md 结尾
   • 例如：测试文章2.md

第三步：编写文章内容

1. 添加 Front Matter

   • 复制现有文章的配置部分作为模板
   • 至少包含 title 字段（必填）
   • 根据需要添加其他配置项

2. 编写正文

   • 使用 Markdown 语法编写内容
   • 可参考其他文章的格式和结构

3. 保存文件

   • 使用快捷键 Ctrl+S 保存文件
   • 确保所有更改都已保存

发布文章

Git 工作流程说明

Git 的版本控制流程包含三个关键步骤：

• 🔄 暂存（Stage）：将修改的文件添加到暂存区，准备提交
• 📦 提交（Commit）：将暂存区的更改保存到本地 Git 历史记录
• ☁️ 推送（Push）：将本地提交上传到远程仓库

💡 理解要点：

• 暂存区允许您选择性地提交文件，虽然通常会提交所有更改
• 提交仅保存在本地，需要推送才能同步到远程仓库
• VS Code 的”同步更改”功能会先拉取远程更新，再推送本地提交

详细操作步骤

第一步：暂存更改

1. 打开源代码管理面板

   • 点击左侧边栏的 Git 图标（分支形状）
   • 在 “更改” 区域查看修改的文件

2. 暂存文件

   • 方法一：点击单个文件旁的 ”+” 图标
   • 方法二：点击 “更改” 标题旁的 ”+” 图标（暂存所有更改）
   • 暂存后，文件会移动到 “暂存的更改” 区域

第二步：提交更改

1. 编写提交信息

   • 在消息输入框中填写简洁明确的提交说明
   • 例如：“添加新文章：产品介绍”、“更新操作指南”

2. 执行提交

   • 点击 “提交” 按钮
   • ⚠️ 注意：VS Code 本身的源代码管理功能要求必须填写提交信息, 不会填充默认信息

1. 确认提交结果
   • 提交后，底部状态栏会显示本地仓库领先远程仓库的提交数

第三步：同步到远程仓库

1. 推送更改

   • 点击 “同步更改” 按钮
   • 确认推送操作并等待上传完成

2. 验证同步结果

   • 同步完成后，状态栏显示本地和远程仓库一致

第四步：确认发布

1. 查看构建状态

   • 访问 流水线页面
   • 确认新的构建任务已触发

2. 验证文章发布

   • 构建完成后，访问 测试官网博客
   • 确认新文章已成功发布

进阶技巧

VS Code 提供了一些简化操作的便捷功能：

• 智能提交：如果未暂存文件就提交，VS Code 会询问是否提交所有更改
• 一键同步：可以直接使用”同步更改”完成提交和推送