Shirone：一套基于 Material 3 Expressive 的 Astro 博客主题

Shirone 是我自己在用、也在维护的一套博客主题。它的目标很简单：长文章读起来安静，个人内容展示得好看，主题本身可以一直跟着上游更新而不碰你的文章。

技术栈是 Astro 7、Svelte 5、Tailwind CSS 4 和 Stylus，界面基于 Material 3 Expressive 的组件与设计令牌搭起来。

配色和界面#

主题色不是写死的十六进制，而是基于 HCT 的动态配色：站点给一个色相，剩下的色板、明暗关系和状态层由算法推出来，Material 3 与 Material 3 Expressive 两套规范都能切换。

访客那侧还有一组显示设置：明暗主题、横幅或纯色背景、背景纹理、文章列表的列表/网格布局、减少动效。这些选择存在浏览器本地，下次进来还是自己习惯的样子。

Markdown 和 MDX 都能写，另外还给作者准备了一批语法，都是开箱可用、不需要在配置里打开开关的：

这些语法都是按需加载的：文章里没用到，对应样式和脚本不会出现在页面上。

归档、分类、标签、友链、动态、番剧、相册、项目、技能、设备、游戏、系列、时间线，都是独立页面，数据放在 src/data/ 或内容仓里，改数据就行，不用动组件。

搜索走 Pagefind，另外内建 RSS、Sitemap 和 llms.txt。

用法	适合谁	怎么开始
源码模板	想改组件、跟进主题开发	`git clone` 后 `pnpm install`
npm 包	只想写博客	`npx shirones init`

源码模板和 npm 包跑的是同一份 src/，区别只在路由注入和覆盖层：包模式会把页面通过 injectRoute 注入，你依然可以在项目里用 src/components/、src/layouts/ 覆盖主题组件。

如果你希望文章和自己的配置单独放一个仓库，还有第三条路：内容分离。

1
pnpm content:eject --yes    # 把内容迁出到 ../shirone-content
2
pnpm content:sync           # 之后每次构建前物化内容

内容仓负责 content/、data/、assets/、config/*.yaml，代码仓保留主题源码。改配置只写想覆盖的键，升级主题时新默认值会自动生效。

本地跑起来

克隆并安装

1
git clone https://github.com/LyraVoid/Shirone.git
2
cd Shirone
3
corepack enable
4
pnpm install

仓库里挂的那张跑分是我自己环境下的参考结果，Performance、Accessibility、Best Practices、SEO 都是 100。实际数值会受托管平台、内容体积和网络影响，不代表任何环境下都一模一样。

可选的第三方功能（评论、统计、音乐、番剧数据）都按「零额外负担」处理：关闭时没有外部请求、没有 DOM 占位、没有主包体积。