系列导读 · 静态博客搭建 第 2 / 3 篇
← 上一篇：欢迎来到 Rainy Den · 下一篇：Mermaid 与搜索 →
本文记录一些实现细节，方便日后查阅。
NOTE
本站已支持 GitHub 风格的 Alert 提示块，可在 Markdown 中直接使用。
静态导出配置
在 next.config.ts 中启用：
const nextConfig = {
output: "export",
trailingSlash: true,
images: { unoptimized: true },
};构建产物位于 out/ 目录，可直接部署到静态服务器。
暗色模式
使用 next-themes 配合 Tailwind CSS 的 dark: 变体：
- 支持浅色、深色、跟随系统三种模式
- 在
<head>内联脚本避免首屏闪烁 - 文章区域使用
@tailwindcss/typography的prose类
Markdown 渲染
处理链路：
gray-matter → remark-gfm → rehype-pretty-code → HTML
代码块会自动高亮，标题会生成锚点链接，并支持目录导航与一键复制。
TIP
在宽屏下，文章页右侧会显示基于 h2/h3 生成的目录。
标签系统
每篇文章的 Frontmatter 中声明 tags 数组，构建时会自动生成：
/tags/— 全部标签/tags/[tag]/— 某标签下的文章列表
tags: ["nextjs", "前端"]就这么简单。