Article Template

把这里改成你的文章标题

这里写一段简短摘要，说明这篇文章解决什么问题、适合谁、读完能得到什么。

分类：待填写 更新时间：2026-07-07 路径：`pages/your-article/index.html`

摘要

适用场景

部署教程、环境搭建、踩坑记录、工具对比、命令速查、问题排障都适合这个结构。

正文建议先给出目标和结论，再展开步骤。这样读者就算只看前半部分，也能快速判断这篇文章对自己是否有帮助。

推荐目录

pages/
└── your-article/
    ├── index.html
    ├── images/
    │   └── cover.png
    ├── audio/
    │   └── demo.mp3
    └── video/
        └── walk-through.mp4

这样做的好处是文章迁移、备份、分享都更方便，不会出现资源文件四处散落的情况。

操作步骤

  1. 复制 `pages/article-template/` 整个目录，改成新的文章目录名。
  2. 修改 `index.html` 里的标题、摘要和正文。
  3. 把图片、音视频直接放进当前文章目录下的子文件夹。
  4. 回到首页 `index.html`，补一条文章入口。
注意

如果你复制目录后修改了文件夹名，记得同步检查里面的图片和媒体相对路径。

代码示例

这里可以直接粘贴命令、配置文件、脚本或示例代码。页面会自动给代码块加复制按钮。

cp -R pages/article-template pages/docker-deploy

# 然后编辑 pages/docker-deploy/index.html
# 再去首页补一个入口链接
<figure>
  <img src="./images/example.png" alt="示意图描述" />
  <figcaption>一句简短图注，说明这张图在看什么。</figcaption>
</figure>

图片与媒体

内容布局示意图
示意图：这一页引用的是当前文章目录下的图片资源，而不是公共资源目录。

音频模版

把音频放进当前文章的 `audio/` 目录后替换路径。

视频模版

把视频放进当前文章的 `video/` 目录后替换路径。

参考链接

  • MDN Web Docs
  • RFC Editor
  • 如果链接很多，建议按“官方文档 / 相关文章 / 工具地址”分组。

常见问题

问题 说明
图片放哪里？ 建议放到当前文章目录下的 `images/`，文章里直接用 `./images/xxx.png`。
文章太长怎么办？ 可以拆成系列文章，并继续沿用左侧统一导航来回切换。