Shiro 是一个源于 8 年前的想法。

那时候我就想做一个简约白色调的博客主题 —— 为单纯的写作而生，没有太多复杂和浮夸的功能，回归纯粹。市面上的主题要么功能堆砌得让人眼花缭乱，要么视觉设计过于喧闹，真正安静地服务于文字本身的，少之又少。这个念头在心里搁了很久，直到最近终于把它变成了现实。

设计理念

Shiro（白），日语中”白色”的意思。这个名字承载了整个主题的设计哲学 —— 以留白为美，以简约为道。

灵感来源于日本传统的和纸（washi）质感。打开页面，你会看到淡雅的纸张纹理、柔和的灰白色调，以及点缀其间的朱红色印章。这不是一个堆砌功能的主题，而是一个试图在数字世界中还原纸笔书写质感的尝试 —— 也是对 8 年前那个简单想法的最终回答。

整个主题的配色只有三种基调：

• 灰白：和纸般温润的背景，给文字最舒适的栖息地
• 深灰：沉稳的正文色，确保长时间阅读不疲劳
• 朱红：画龙点睛的强调色，来自传统印章的灵感

白は、余白の名。

这句话藏在页面的角落里，也是 Shiro 的设计宣言 —— 白，是留白的名字。

技术栈

Shiro 基于现代前端技术构建：

• Tailwind CSS v4 —— 利用最新的 @theme、@utility、@layer 语法，CSS 变量驱动的主题系统
• Nunjucks —— Hexo 原生支持的模板引擎，宏和组件化的模板架构
• Vanilla JavaScript —— 零框架依赖，所有交互功能用原生 JS 实现，轻量高效

没有 jQuery，没有 React，没有 Vue。一个博客主题，不需要那么重。

功能一览

🌙 暗色模式

这大概是我花最多心思打磨的功能。Shiro 的暗色模式不是简单的黑白反转，而是「夜の白」—— 夜晚的留白。

• 三态切换：跟随系统 → 亮色 → 暗色
• 微暖中性灰色调，与亮色模式的和纸风格一脉相承
• 朱红色在深色背景上依然是视觉焦点
• localStorage 记住你的偏好，下次访问自动恢复
• 防闪烁（FOUC Prevention）：页面渲染前就应用正确的主题，不会看到颜色跳变

📑 目录侧边栏（TOC）

长文章的好伙伴。自动从文章标题生成目录，固定在页面右侧：

• 当前阅读位置用朱红色小圆点标记，其余条目保持干净的纯文字
• 目录标题固定在顶部，列表独立滚动
• 滚动到对应章节时，目录自动跟随高亮
• 可配置目录深度和最少标题数

📊 阅读进度条

页面顶部一条细细的朱红色进度条，随滚动实时更新。简单，但有效。短页面（内容不足一屏）时自动隐藏，不会显得多余。

⬆️ 返回顶部

滚动超过一屏后，右下角会淡入一个小巧的圆形按钮。点击平滑滚动回顶部，尊重 prefers-reduced-motion 设置。

🖥️ 代码块增强

作为一个技术博客主题，代码块的体验很重要：

• 语言标签：自动识别并显示代码语言（如 javascript、python）
• 一键复制：复制按钮只复制代码内容，不会把行号一起复制进去
• 固定宽度：无论代码长短，代码块始终保持一致的宽度

🖼️ 图片灯箱

集成 LightGallery，文章中的图片点击即可放大浏览，支持手势操作。仅在文章页和独立页面加载，不浪费其他页面的资源。

💬 评论系统

支持 Disqus 评论，使用 IntersectionObserver 延迟加载 —— 只有当评论区滚动到可视区域时才开始加载 Disqus 脚本，不影响页面初始加载速度。

🌐 多语言支持

内置 9 种语言文件：简体中文、繁体中文、英语、日语、法语，以及对应的地区变体。所有界面文字都可以通过语言文件自定义。

📡 RSS 支持

配合 hexo-generator-feed 插件，一键开启 RSS 订阅。

无障碍与性能

这些是用户看不到但我很在意的细节：

• 所有 SVG 图标都有 aria-hidden="true"
• 暗色模式切换按钮动态更新 aria-label
• 移动端菜单实现了 focus trap（Tab 键在菜单内循环）
• 导航分隔符对屏幕阅读器隐藏
• Google Fonts 异步加载，不阻塞页面渲染
• 所有脚本使用 defer 属性并行下载
• 滚动事件使用 requestAnimationFrame 节流 + { passive: true }
• prefers-reduced-motion 全面支持（CSS + JS）

安装与使用

1

npm install hexo-theme-shiro

或者通过 Git：

1

git clone https://github.com/Acris/hexo-theme-shiro.git themes/shiro

然后在 Hexo 的 _config.yml 中设置 theme: shiro 即可。

详细的配置说明请参考 GitHub 仓库 的 README。

写在最后

Shiro 是我对「博客应该长什么样」这个问题的回答。在这个信息过载的时代，我希望阅读博客的体验能回归纯粹 —— 就像在一张干净的和纸上，安静地读一篇文章。

如果你也喜欢这种简约的风格，欢迎试用 Shiro。有任何问题或建议，欢迎在 GitHub Issues 中提出。

如果觉得不错，也请给个 ⭐️ 支持一下 :)

GitHub: https://github.com/Acris/hexo-theme-shiro
Live Demo: https://acris.me