THE DARK ROOM
首页瞬间关于图库链接归档
拾光·暗室

「拾光·暗室」主题开源

2026-10-11 · 半砚

「拾光·暗室」是本站正在使用的 Halo 主题，今天正式开源。

一句话说它是什么：一座会呼吸的暗室 —— 粒子星屑、随机极光、星座导航，把博客做成一个值得探索的光之档案馆。

拾光·暗室

特性总览

1. 光球开门（Light Orb）

首页进场是一枚呼吸的光球，四周环绕虚线轨道与呼吸光环。轻触光球，暗室之门开启，页面内容随之显影。光球色相每次加载从七种色相中随机抽取，每一扇门颜色都不相同。

光球开门

2. 暗室视觉（Dark Room Visual）

  • 三层暗底：深空底色 + 大面积强调色 radial 光晕 + 噪点纹理

  • 粒子星屑：全屏 canvas 星点随视差缓慢漂浮

  • 光标光晕：光标位置跟随一圈柔和光晕（--bx / --by 变量驱动）

  • 强调色随机轮换：每次加载从 7 种色相随机取一，全站按钮、链接、高亮统一跟随

  • 所有颜色均走 CSS 变量（--accent / --bg / --surface 等），不写死任何色值

暗室首页

3. 内容三匣子（Shards）

首页右侧悬浮三只倾斜的「匣子」，分别通往文章、瞬间、图库，带滚动视差（data-speed 差速漂移）。匣子对应板块可通过后台开关显隐，未启用对应插件时匣子自动消失。

内容匣子

4. 首页文章区（Home Posts）

满宽自适应（不做 max-width 收窄，随视口等比缩放），支持 1 / 2 / 4 列布局（后台可配）。文章卡片带封面、分类徽章、摘要与日期，滚动进入视口时逐张显影（reveal 动画）。另支持按分类 slug 配置的「分类专栏」区块，数据全部实时取自 Finder。

首页文章区

5. 星座导航（Constellation Dock）

右下角常驻一枚呼吸光点（指南针），点开后后台菜单的每个导航项化作一枚星点，彼此用星线连成星座。每个星点带独立色相（菜单项 data-c 属性决定），悬停点亮连线。星图展开时同时出现音效开关与暗室搜索入口。

星座导航

星图特写（六枚星点连成星座、悬停点亮）：

星座导航特写

6. 暗室搜索（Darkroom Search）

自建搜索弹窗（不依赖插件前台样式），打开后焦点自动落入输入框，回车即搜、Esc 关闭，支持关键词高亮与命中统计。面向用户的文案走 i18n，经 data-* 属性注入 JS。

暗室搜索

7. 站点看板（Site Dashboard）

后台可开关的站点统计弹窗：文章 / 分类 / 标签 / 图库 / 瞬间数量、分类与标签一览、板块快捷入口，全部数据实时取自 Finder，无任何写死数字。

站点看板

8. 归档时间轴（Archives Timeline）

按年月排开的纵向时间轴，带分类筛选与月份筛选（筛选条 chip 化），每条记录显影入场。

归档时间轴

9. 分类与标签（Categories & Tags）

分类页与标签页沿用暗室语言：筛选 chip、卡片 hover 光晕、逐项显影。

分类

标签

10. 文章页与目录（Post & TOC）

文章页右侧悬浮 TOC 目录（后台可开关），自动按 h2-h4 分级、滚动高亮当前小节、点击平滑跳转；支持 Shiki 代码高亮与评论组件。

文章页与目录

11. 图库（Photos）

瀑布流相册，带相册分组筛选，点开任意一张进入灯箱放大（配合 lightgallery.js）。未上传图片前显示暗室空态。

图库

12. 瞬间（Moments)

动态流「瞬间」：时间轴卡片、媒体九宫格、点开看完整内容并可直接评论。

瞬间

13. 友链（Links）

分组友链卡片墙（logo、名称、描述、徽章），数据为空时显示「暗室空位」空态。

友链

14. 404 光走丢了（Error Page）

「这束光走丢了，飘进了暗室之外」，配合散落的碎片与碎光字样，一键回暗室。

404

15. 移动端适配（Mobile）

断点式响应布局：光球、匣子、文章区、看板在窄屏全部重排，无横向滚动。

移动端光球
移动端首页

16. 全动态不写死（Fully Dynamic）

主题的硬性设计准则：

  • 文案：全部走 i18n（zh_CN / default 双语言文件）或后台主题设置，模板零裸文案

  • 数据：一律从 Finder（postFinder / categoryFinder / tagFinder / menuFinder / pluginFinder 等）实时取，无静态列表

  • 链接与资源：@{} 路由表达式 + #theme.assets()，不写死绝对路径

  • 颜色：全部 CSS 变量，强调色随机轮换、全站统一跟随

环境要求

  • Halo >= 2.26.0（主题实现了 2.26 引入的「页面布局契约」templates/layout.html，插件前台页面也能复用暗室外壳）

安装

方式一：Halo 后台 → 主题 → 安装 → 上传 zip。必须保证 theme.yaml 位于 zip 根目录，否则 Halo 无法识别主题。

方式二：将本仓库 clone 到 Halo 工作目录的 themes/shiguang-darkroom/，然后在后台启用。

注意（从 Gitee 下载 ZIP 时）：Gitee 的「下载 ZIP」会把内容包进一层 theme-shiguang-darkroom-master/ 目录，theme.yaml 不在根目录，不能直接上传。需先解压，进入该目录后对其内部内容重新打包：

> 

> unzip theme-shiguang-darkroom-master.zip</blockquote>
<blockquote>cd theme-shiguang-darkroom-master</blockquote>
<blockquote>zip -r ../shiguang-darkroom-install.zip . -x "*.DS_Store"</blockquote>
<blockquote>

> 或直接使用 Release 附件里的安装包，下载即用（根目录即 theme.yaml）：

https://gitee.com/lin-0227/theme-shiguang-darkroom/releases/download/v0.8.1/shiguang-darkroom-0.8.1.zip

推荐插件

主题已声明推荐应用，启用后对应板块才会显示：

  • 链接管理（app-hfbQg）

  • 图库管理（app-BmQJW）

  • 瞬间（app-SnwWD）

  • Shiki 代码高亮（app-kzloktzn）

  • lightgallery.js 灯箱（app-OoggD）

主题设置

后台 → 主题 → 设置，共三组：

  • 基础设置：首页主 / 副标题、页脚版权与署名、建站日期、各板块显隐开关、精选条数、文章目录（TOC）、站点看板

  • 内容文案：首页上部标识、各板块标题 / 导语 / 按钮文字、留白标语

  • 首页文章区：列数（1 / 2 / 4）、展示的分类 slug、每类展示篇数

所有文案均可配置；页脚版权与页脚署名支持 HTML 链接等任意内容。

许可

MIT

主题的持续更新与开发记录发布在本专栏。遇到问题、有建议，或者想让我把某个地方改成你喜欢的样子，都欢迎写信给我：nostos@agent.qq.com

评论