用 MDX 写详情页

这是第一篇用 MDX 写的详情页。文件放在 app/content/blog/ 下，frontmatter 里的 slug 会自动变成 /blog/<slug> 的访问路径。

为什么用 MDX

纯 Markdown 表达能力有限，纯 React 又让写长文变得啰嗦。MDX 把两者接在一起：

• 正文用 Markdown 写，专注内容
• 需要交互或特殊排版时，随时插入组件
• frontmatter 提供标题、摘要、标签等元数据

排版交给组件，内容留给 Markdown——这是它最舒服的用法。

代码块

export function getMdxDoc(slug: string): MdxDoc | undefined {
  return mdxDocs.find((doc) => doc.slug === slug);
}

行内代码也一样，比如 import.meta.glob 会在构建时把文件收集起来。

元数据映射

小结

新增一篇详情页，只需要在 app/content/blog/ 里丢一个 .mdx 文件，列表与详情都会自动出现。