这是博客系统的第一篇文章,也是一份用于检查排版的测试样本。文章由 Markdown 编写,构建时会自动生成 HTML、目录与代码高亮,不需要手工维护页面结构。
标题层级
三级标题
这里用来检查正文区域的行距、段间距与标题节奏。长段落应当保持舒适的阅读宽度,避免一行文字横向铺得太满。
四级标题
四级标题用于更细的内容分组。它不会出现在侧边目录里,但仍然保留锚点和正确的视觉层级。
文字样式
支持 粗体、斜体、粗斜体、删除线、高亮标记 与 行内代码。
也可以组合使用,例如 包含 code 的粗体,或者带链接的 外部站点。
这是一个站内链接:返回 Aoharu Reverie 首页。
如果需要强制换行,可以在第一行末尾留下两个空格。
这一行应该出现在上一行下方,但仍在同一个段落中。
列表
无序列表
- 第一项内容
- 第二项内容
- 缩进的子项目
- 另一个子项目
- 更深一级的内容
- 第三项内容
有序列表
- 打开项目目录
- 在
content/posts中创建 Markdown 文件 - 填写 Front Matter 并提交
- 等待构建生成页面
任务列表
引用与分隔线
好的排版不会喧宾夺主。
它只是让阅读这件事,变得更自然一点。
引用也可以嵌套,用于区分不同层次的引述。
代码块
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 解析、目录生成、代码高亮、表格、脚注和响应式排版已经可以投入使用。
脚注内容同样由构建流程生成,不会影响主阅读路径。 ↩︎