首先是要安装软件

安装你所用电脑平台版本的软件

可以点击下面的链接前往下载 VSCode下载网址

根据你的电脑是Win或者MAC，下载对应安装包

下载VSCode软件

根据安装包正常下载即可。

给软件装上中文和md插件

VSCode安装插件

搜索中文，安装，然后重启即可

其次是写推文的注意事项

由于要做网页，直接写肯定是有点困难，这里有一种这种的方式，用近乎普通文本的方式进行简单的标题，插图引用，然后根据此转化成网页。

这里是md的简易教程网址

首先建一个文件夹并把文件夹拖入VSCode

或者直接使用我发给你的压缩包即可，复制里面已有的md文件进行修改（改名字、改内容）

VSCode安装插件

VSCode安装插件

md编写注意事项

VSCode安装插件

开头的+++包裹起来的相当于是后面要转化成网页的一些信息，比如时间、标题、作者、标签（tags），以及封面图。

时间

时间是ISO 8601标准格式的日期时间信息，各部分含义解析如下：

  • 2026-01-15：日期部分，依次代表“年-月-日”，即2026年1月15日；
  • T：日期与时间的分隔符（ISO 8601标准规定，无实际语义，仅用于区分日期和时间段）；
  • 16:03:58：时间部分，依次代表“时:分:秒”，即当天16时03分58秒（24小时制）；
  • +08:00：时区偏移量，“+”表示该时区比世界协调时间（UTC）快，“08:00”即快8小时，对应东八区（如中国北京时间、新加坡时间等均使用该时区）。

整体可理解为：东八区时间2026年1月15日16时03分58秒。

标题

title = '封面推荐' 可从以下维度简要说明：

  1. 字段属性定位
    对应网页中每篇文章的 title 字段（网页明确提到该字段为文章标题）。

    是某篇特定文章的标题名称，用于直接标识文章核心主题，让用户快速识别和方便搜索文章内容方向。

  2. 功能作用

    • 前端展示：作为文章在列表、搜索结果中的核心标识，帮助用户直观判断是否为目标内容；
    • 搜索匹配：是 Fuse.js 等搜索工具的关键匹配维度之一（网页提到标题是搜索依赖字段），用户搜索“封面推荐”时可快速定位到该文章。

作者和标签

作者和标签都可以是多个，中间用英文逗号隔开。最方便稳妥的方式是复制已有的，只改引号中的内容。

author = ['hh','院外李四']

tags = ['测试', '布克哈特', '历史']

封面图

VSCode安装插件

基本就如同图里显示的意思，是这篇文章的封面图，可以展示在文章封面和插图，建议要用的话使用默认的形式即可。

如果不需要或没有封面图，可以删除 [cover] 及以下的所有内容。

这里默认是在网页主页显示封面图，推文里不显示。

[cover]
image = "/pic/网页推文教程图(5).jpg"
alt = "封面推荐示例图"
caption = "封面说明文字"
hiddenInList = false
hiddenInSingle = true

下面是详细说明：

这段代码是典型的静态站点生成器中用于配置图片属性的参数，常用于文章封面、插图等场景，每个参数的功能和作用如下，解析如下：

参数名 核心作用 关键说明
image 定义图片的加载路径 支持两种路径：- 本地路径：如示例中images/cover-recommend.jpg，指站点本地images文件夹下的图片；- 远程路径：可替换为HTTP/HTTPS链接（如https://xxx.com/cover.jpg），直接加载外部图片。
alt 图片的替代文本（无障碍访问核心参数） 1. 当图片加载失败时，页面会显示该文本，告知用户图片内容；2. 供屏幕阅读器识别，保障视障用户获取图片信息（符合无障碍设计规范）；3. 对SEO友好，帮助搜索引擎理解图片主题。
caption 图片的说明文字 通常会显示在图片下方，用于补充图片背景、来源、含义等信息（类似文章插图的“图注”），提升内容完整性。
hidden 控制图片“是否全局隐藏” 布尔值（true/false）：- false（默认，示例值）：图片在所有场景下正常显示；- true：图片在任何页面（列表页、详情页等）中都不显示。
hiddenInList 控制图片“是否在列表页隐藏”（场景化隐藏） 仅作用于“文章列表页”（如站点首页的文章卡片列表）：- false（示例值）：列表页的文章卡片中显示该图片；- true：列表页隐藏图片，仅在文章详情页显示。
hiddenInSingle 控制图片“是否在详情页隐藏”（场景化隐藏） 仅作用于“文章详情页”（点击文章后进入的单独页面）：- false（示例值）：详情页正常显示图片；- true：详情页隐藏图片，仅在列表页显示（较少用，多为特殊设计需求）。

简单来说，这组参数的核心价值是灵活控制图片的“加载来源”“显示场景”和“辅助信息”，既兼顾用户体验（无障碍、加载容错），也满足站点设计的精细化需求（如列表页简化显示、详情页完整展示）。