TOC 与排版测试页面

这篇文章的存在是为了端到端地验证阅读体验：右侧的固定目录、跟随你滚动位置的高亮指示、视口顶部的进度条，以及正文中标题、列表、引用、代码和链接的排版样式。如果这里有任何地方看起来不对劲，负责它的组件就是首要嫌疑对象。

简介

本页的每个 h2 标题都应该作为顶级条目出现在目录中。当你滚动进入每个部分时，对应的目录链接应该会变粗、变亮，因为 TableOfContents.astro 中的 IntersectionObserver 会在标题进入视口顶部三分之一区域时为其添加 is-active 类。

固定在窗口顶部的细长强调色条是 ReadingProgress 组件。它监听 scroll 事件并通过 requestAnimationFrame 更新其宽度，因此它应该随着你的滚动平滑移动，不会出现卡顿。

需要检查的内容

• 目录在桌面端（lg: 断点及以上）是固定的。
• 在移动端，它不会被渲染——目前还没有可折叠的 <details> 元素，这是一个已知的待办事项。
• 正文中的链接应该用波浪状的强调色下划线标出，而不是黑色。
• 页面标题 h1 不应该出现在目录中——过滤条件是 depth >= 2 && depth <= 4。

更深一层

h4 标题也应该出现在目录中，并且比 h3 标题缩进更多。这个部分就是为了证明这一点。

段落与行内格式

这是一个包含粗体文本、斜体文本、两者兼具、行内代码以及一个指向 Astro 文档的链接的段落。链接应该使用 global.css 中正文样式覆盖定义的强调色波浪下划线。

列表

一个无序列表：

• 第一项
• 第二项，里面包含粗体
• 第三项，包含一个链接
• 第四项，包含 行内代码

一个有序列表：

1. 一
2. 二
3. 三

嵌套列表

• 父项
  • 子项 A
  • 子项 B
    • 孙项
• 同级项

引用块

这是一个引用块。得益于 @tailwindcss/typography，它应该呈现为带有左边框、柔和前景色和斜体文字。同一个引用块内的多行文本会合并成一个段落。

再来一个单行的引用块，以求保险。

代码块

像 const x = 42; 这样的行内代码应该使用 Geist Mono 字体，并从正文样式覆盖中继承柔和的背景色。

一个 JavaScript 代码块：

// This exercises rehype-pretty-code with the vitesse-light / vitesse-dark
// dual-theme setup. Switch the site theme with the header button and
// this block should recolor without a page reload.
function fibonacci(n) {
  if (n < 2) return n;
  let a = 0;
  let b = 1;
  for (let i = 2; i <= n; i++) {
    const next = a + b;
    a = b;
    b = next;
  }
  return b;
}

console.log(fibonacci(10)); // 55

一个 TypeScript 代码块：

type Post = {
  title: string;
  pubDate: Date;
  tags: string[];
};

const example: Post = {
  title: "Hello",
  pubDate: new Date("2026-04-13"),
  tags: ["meta", "test"],
};

一个 Shell 代码块：

npm run dev
npm run build
npx astro check

代码块下的另一个 h3 标题

确认同一父级 h2 下的 h3 标题仍然作为同级项出现在目录中，并且缩进正确。

水平分割线与图片

下面应该是一个水平分割线：

---

就这样了——这篇文章里没有图片，因为内容集合的图片需要放在 src/content/posts/ 目录下，与 MDX 文件放在一起，而这个测试文章没有附带图片。

一个用于强制滚动的长章节

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac neque nec arcu aliquet suscipit. Quisque tempor, nisi sed fermentum elementum, nibh arcu aliquet justo, vel feugiat nulla magna a lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin eget tortor risus.

Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta.

Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.

阅读时间检查

这篇文章的标题部分应该显示类似“4 分钟阅读”的内容——remark-reading-time 插件会统计字数并将结果限制在至少 1 分钟。如果这个数字看起来异常低或高，请检查 src/lib/remark-reading-time.mjs。

滚动监听检查

从顶部慢慢滚动到这里。当“一个用于强制滚动的长章节”这个部分进入视口顶部时，其对应的目录链接应该变为活动状态。当你继续滚动经过这个标题到达结论部分时，活动链接应该相应地前进。

结论

如果以上每个部分都清晰呈现，目录随着你的滚动而更新，进度条前进，代码块在你切换主题时重新着色，并且波浪状的标题锚点没有划穿标题文字，那么阅读子系统就处于良好状态。

一旦你确认无误，就可以删除这个文件（src/content/posts/toc-test.mdx）——它只是一个“厨房水槽”式的测试文件。