用编辑器配色方案整体美化 Astro 博客的多主题静态站方案

方案简介

MultiTerm Astro 是一个面向喜欢编辑器配色方案的程序员的 Astro 博客主题。它的核心思路是：把你在代码编辑器里喜欢的配色方案（Shiki 主题）应用到整个网站的外观上，让全站文字与代码都以这种美学呈现，并带有向原始 markdown 美学致敬的排版风格。

它解决的场景是：程序员想要一个可以直接用自己熟悉的配色（如各种 Shiki 主题）来定制外观的技术博客，而不需要自己搭建主题系统。读者还可以在亮/暗/自动三种模式间切换，或从最多 59 个 Shiki 主题中挑选自己喜欢的主题，全站元素通过 CSS 变量交互式地无缝变色。

该方案适合：想要开箱即用的博客能力（评论、RSS、站点地图、社交卡片图、数学公式、MDX、TOC 等）又能深度定制配色的开发者。项目同时提供静态站点渲染（默认）或动态内容生成两种构建方式。

亮点与能力

• 丰富主题选择：使用 Expressive Code 内置的任意 Shiki 主题个性化博客外观
• 暗色/亮色/自动主题模式：选择任意两个 Shiki 主题，通过站头按钮自动适配读者偏好
• 多主题模式：提供三个（或全部 59 个！）Shiki 主题，读者可从对话框菜单中选择最爱，全站元素借助 CSS 变量交互式变色
• GitHub 评论区：由 GitHub 和 Giscus 驱动，读者可回复、讨论和反应，并精细调校以匹配站点外观
• GitHub 活动组件：可选地在首页包含静态生成的 GitHub 活动日历，与当前配色方案完美匹配
• Markdown 扩展：Admonitions、自动生成的侧边粘性 TOC、emoji 短代码、KaTeX 数学、MDX、阅读时长估计
• RSS 订阅与站点地图：内置支持，无需额外配置
• 社交链接：轻松加入 GitHub、Mastodon、Twitter、LinkedIn 和 E-mail 等开发者平台链接
• 响应式设计：从桌面到手机全设备优化，基于 Tailwind v4 构建
• SEO 优化：内置 SEO 最佳实践，通过 Satori 为每页自动生成社交卡片图片
• 可定制构建：由 Astro 驱动，可渲染为静态站点（默认）或动态生成内容

组成与分工

• Astro：站点框架与构建核心，负责渲染静态站点（默认）或动态生成内容
• Shiki / Expressive Code：提供配色方案（主题）来源，Expressive Code 捆绑了大量 Shiki 主题供整站使用
• Tailwind v4：CSS 框架，实现从桌面到手机的响应式设计
• Giscus：基于 GitHub 的评论系统，让读者回复、讨论和反应，并按站点配色精细调校
• Satori：为每个页面自动生成社交卡片（OpenGraph）图片
• MDX / KaTeX / RSS：内容增强与输出——MDX 扩展 markdown、KaTeX 渲染数学公式、内置 RSS 订阅与站点地图

前置要求

项目通过 git 与 npm 分发，克隆后即可安装依赖运行：

bash
git clone --depth 1 https://github.com/stelcodes/multiterm-astro my-new-blog && cd my-new-blog

bash
npm install

实施步骤

从零到跑通只需三步：

1. 克隆仓库

bash
git clone --depth 1 https://github.com/stelcodes/multiterm-astro my-new-blog && cd my-new-blog

2. 安装依赖

bash
npm install

3. 启动开发服务器

bash
npm run dev

4. 构建站点并查看结果

bash
npm run build && npm run preview

使用与配置要点

• 所有配置都集中在一个文件 src/site.config.ts 中完成，可在此调整网站以匹配你的构想
• 添加自己的内容：查看 src/content 目录，可以移除全部示例内容并替换为你自己的内容
• 主题模式：可在站头按钮切换亮/暗/自动模式，或从对话框菜单选择 Shiki 主题
• 可选功能：GitHub 活动日历可静态生成在首页，评论区由 Giscus 提供
• 验证成功：可参考示例站点的 PageSpeed 分数和 OpenGraph 分析检查 SEO 与性能

注意事项与常见问题

• 项目采用 MIT 许可证
• 可参考示例站的 Showing Off Blog Features 文章查看全部博客能力演示
• v2.0.0 已发布，使用时注意版本
• 配置选项详情请查看 src/site.config.ts

优缺点

• ✓ 单文件配置简单
• ✓ 内置 RSS/站点地图/SEO
• ✕ 主题选择受限于 Shiki 主题集

出处

本方案挖掘自开源项目 stelcodes/multiterm-astro，方案内容与实施命令均来自其 README 原文。