### [Shiro：简约白色调的Hexo博客主题，为单纯的写作而生](https://www.appmiao.com/article/2992)

**Published:** 2026-03-10T02:38:14

**Author:** 阿喵

**Excerpt:** 作者前言： Shiro 是一个源于 8 年前的想法。 那时候我就想做一个简约白色调的博客主题 —— 为单纯的写作而生，没有太多复杂和浮夸的功能，回归纯粹。市面上的主题要么功能堆砌得让人眼花缭乱，要么视觉设计过于喧闹，真正安静地服务于文字本身

作者前言：

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

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

## 网站截图

![](https://pic.amiao.app/2026/03/10023549/70628-10027e0ce9-1.png "70628-10027e0ce9-1")

## **功能一览**

### **🌙 暗色模式**

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

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

### **📑 目录侧边栏（TOC）**

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

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

### **📊 阅读进度条**

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

### **⬆️ 返回顶部**

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

### **🖥️ 代码块增强**

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

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

### **🖼️ 图片灯箱**

集成 [**LightGallery**](https://www.lightgalleryjs.com/)，文章中的图片点击即可放大浏览，支持手势操作。仅在文章页和独立页面加载，不浪费其他页面的资源。

### **💬 评论系统**

支持 [**Disqus**](https://disqus.com/) 评论，使用 `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://github.com/Acris/hexo-theme-shiro)

博客地址：[https://acris.me/](https://acris.me/)

**Categories:** 开源项目

---