构建一套真正适合阅读的技术博客

一次好的技术写作体验，不只是内容正确，还包括下面这些细节：页面够快、层级清晰、代码块易读、表格不刺眼、引用有呼吸感。

当页面足够克制，读者才会更容易进入内容本身。

为什么选择这种技术栈

• Next.js App Router 负责静态页面组织与路由。
• Tailwind CSS 负责视觉系统和边界控制。
• @tailwindcss/typography 负责正文排版质量。
• 本地 Markdown 内容源让写作和部署都更轻量。

一个简单的 TypeScript 片段

type Post = {
  title: string
  slug: string
  date: string
}

export function sortPosts(posts: Post[]) {
  return [...posts].sort((a, b) => {
    return new Date(b.date).getTime() - new Date(a.date).getTime()
  })
}

一个终端命令示例

npm run build

列表与步骤

1. 先定义内容组织方式。
2. 再搭建可静态导出的页面结构。
3. 最后打磨文章排版、代码高亮和主题切换。

• 无序列表适合表达并列观点。
• 有序列表适合表达执行顺序。
• 嵌套内容应当保持克制，避免层级失控。

表格

维度	方案	价值
内容源	Markdown	易维护、易迁移
样式	Tailwind Typography	排版稳定
部署	Static Export	成本低、速度快

行内强调

你可以使用 粗体 强调关键结论，用 斜体 标注语气变化，也可以使用 inline code 标记命令、变量名或路径。

---

收尾时只需要记住一件事：真正高级的博客，不是视觉元素越来越多，而是每个元素都刚刚好。