博客浏览模板

阅读说明

这是一篇用于验证博客浏览体验的模板文章。内容覆盖常用的 Markdown 元素，并刻意设置了多层章节，方便检查右侧目录的层级、滚动和跳转效果。

模板用途

• 检查文章标题、段落和留白是否舒适
• 检查右侧目录是否完整显示章节
• 检查点击目录后能否准确跳转
• 检查长文章中的代码块和表格

建议检查方式

先观察右侧目录的层级缩进，再依次点击不同章节。跳转后，章节标题应该自然地出现在阅读区域中。

标题层级

右侧目录会根据标题层级进行缩进，帮助读者理解文章结构。

二级内容

这是一个三级标题对应的内容段落，用于展示章节下的子主题。

更细的说明

这是四级标题。个人博客通常使用到这里已经足够，再继续增加层级会让阅读结构变得复杂。

文字与引用

普通段落适合陈述主要内容。需要强调时，可以使用 粗体文字，也可以使用 行内代码 标记命令或文件名。

引用样式

写作不是一次完成的工作，而是把零散想法逐渐整理清楚的过程。

引用区域可以用来放置结论、提醒或摘录，并与正文保持清晰区分。

列表展示

列表适合整理步骤、清单和并列信息。

无序列表

• 保持标题简短
• 每个章节只讨论一个主题
• 代码示例前说明使用场景
• 文章末尾补充总结

有序列表

1. 创建文章文件
2. 填写标题、描述和分类
3. 编写正文与章节
4. 预览并检查目录跳转

代码示例

代码块用于展示可复制的完整片段。

interface BlogPost {
  title: string;
  description: string;
  category: string;
  pubDate: string;
  updatedDate: string;
  tags: string[];
}

const post: BlogPost = {
  title: "博客浏览模板",
  description: "验证文章浏览效果",
  category: "TEST",
  pubDate: "2026-07-27",
  updatedDate: "2026-07-27",
  tags: ["Astro", "Markdown", "Blog"],
};

命令示例

npm run dev
npm run build

表格展示

元素	用途	检查重点
标题	划分章节	层级是否清晰
段落	承载正文	行距是否舒适
代码块	展示代码	是否支持横向滚动
表格	对比信息	小屏幕是否可浏览

长文浏览

当文章内容超过一屏时，右侧目录应保持在可见区域内；如果章节很多，目录区域会独立滚动，而正文仍然可以正常阅读。

目录跳转

点击右侧任意章节后，页面会跳转到对应标题。浏览器地址中也会出现该章节的锚点，便于直接分享具体位置。

返回顶部

页面向下滚动一段距离后，右下角会出现返回顶部按钮。短页面或仍在页面顶部时不会显示。

结语

如果本页的标题层级、目录滚动、代码、表格和跳转都表现正常，就说明当前博客文章模板已经可以用于后续写作。