文章目录 15 节
  1. 标题层级
  2. 三级标题
  3. 文字样式
  4. 列表
  5. 无序列表
  6. 有序列表
  7. 任务列表
  8. 引用与分隔线
  9. 代码块
  10. 表格
  11. 图片
  12. 脚注
  13. 混合内容
  14. 测试结束

这是博客系统的第一篇文章,也是一份用于检查排版的测试样本。文章由 Markdown 编写,构建时会自动生成 HTML、目录与代码高亮,不需要手工维护页面结构。

标题层级

三级标题

这里用来检查正文区域的行距、段间距与标题节奏。长段落应当保持舒适的阅读宽度,避免一行文字横向铺得太满。

四级标题

四级标题用于更细的内容分组。它不会出现在侧边目录里,但仍然保留锚点和正确的视觉层级。

文字样式

支持 粗体、斜体、粗斜体、删除线、高亮标记 与 行内代码。

也可以组合使用,例如 包含 code 的粗体,或者带链接的 外部站点。

这是一个站内链接:返回 Aoharu Reverie 首页。

如果需要强制换行,可以在第一行末尾留下两个空格。
这一行应该出现在上一行下方,但仍在同一个段落中。

列表

无序列表

  • 第一项内容
  • 第二项内容
    • 缩进的子项目
    • 另一个子项目
      • 更深一级的内容
  • 第三项内容

有序列表

  1. 打开项目目录
  2. 在 content/posts 中创建 Markdown 文件
  3. 填写 Front Matter 并提交
  4. 等待构建生成页面

任务列表

引用与分隔线

好的排版不会喧宾夺主。

它只是让阅读这件事,变得更自然一点。

引用也可以嵌套,用于区分不同层次的引述。


代码块

const posts = await loadPosts();
const latest = posts
  .filter((post) => !post.draft)
  .sort((a, b) => b.date - a.date)
  .slice(0, 4);

console.log(`最近 ${latest.length} 篇文章`);
.post-content {
  max-width: 740px;
  font-size: 15px;
  line-height: 2;
}
npm ci && npm run build

行内代码示例:npm run build、content/posts/*.md、<meta name="description">。

表格

格式 支持情况 备注
标题与目录 支持 自动生成锚点
代码高亮 支持 构建时完成
脚注 支持 文末汇总
任务列表 支持 可显示勾选状态
宽表格 支持 小屏幕横向滚动

图片

小鸟游星野壁纸测试图

图片宽度会被限制在正文区域内,并保留原始比例。

脚注

脚注可以在正文中补充不便展开的说明[1]。

混合内容

一段普通正文之后可以紧跟列表:

  • 文字、链接与 代码 可以出现在同一行
  • 列表内也能使用 强调样式
  • 任务列表与普通列表可以分别出现

最后再用一段较长的文字检查阅读体验。博客正文应当保持克制:标题明确、段落不过度拥挤、代码与表格有足够边界,链接和强调色只用于真正需要注意的位置。这样即使文章很长,读者也能快速找到结构,并且不会因为视觉效果而分心。

测试结束

如果以上内容均显示正常,说明 Markdown 解析、目录生成、代码高亮、表格、脚注和响应式排版已经可以投入使用。


  1. 脚注内容同样由构建流程生成,不会影响主阅读路径。 ↩︎