Shiro：简约白色调的Hexo博客主题，为单纯的写作而生

作者前言：

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

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

网站截图

功能一览

🌙 暗色模式

这大概是我花最多心思打磨的功能。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）

项目链接

GitHub：https://github.com/Acris/hexo-theme-shiro

博客地址：https://acris.me/