DreamInLake 主题介绍：梦里依稀的小湖

这是「梦里依稀的小湖」的第一篇文章，介绍一下本站正在使用的主题 —— DreamInLake。它是我自己做的一款 Typecho 主题，你现在看到的这个网站，就是它的实际运行效果：本站即演示站。

主题信息

  • 名称：DreamInLake（梦里依稀的小湖）
  • 版本：v20261021（2026-10-21）
  • 适用：Typecho 1.3
  • 实测环境：PHP 8.3 / MySQL；PC、平板、手机与微信内置浏览器均已实测（本站运行在 PHP 8.3 + SQLite 上，同样正常）

设计：原创羊皮纸撕纸美术

整套视觉由五张原创主题图构成：页头的旧砖墙、正文的羊皮纸、撕纸边缘、页脚……深色墙面衬着暖黄色的纸面，像夜里摊开的一本旧手账。

  • 三端响应式：PC 端内容最大 1180px 居中；平板居中适配；手机端（≤640px）单列排版，纸面放大挤出透明边，文字贴着纸面排。
  • 日期章：每篇文章自带一枚彩色圆形日期章，共 6 种色调轮换，像在纸页上盖下的印章。

深色模式：点灯开关

页面右上角挂着一盏小灯泡，它就是深浅色的开关：

  • 灯亮 = 深色，灯灭 = 浅色，状态常显、没有悬停效果；点击区域紧贴灯泡本体，点吊线和周围空白不会误触。
  • 默认跟随系统：首次访问按系统的 prefers-color-scheme 自动选择；手动点过之后记住你的选择（localStorage），不再被系统变化覆盖；从未手动选过时，实时跟随系统切换。
  • 深色画法：纸面美术图叠一层深棕罩，撕纸纹理完整保留；文字转暖米色、链接亮金色；文章照片一律不动颜色。
  • 防闪烁：配色在页面渲染前就已判定，打开就是目标颜色，不会先白闪一下；同时声明了 color-scheme: light dark，安卓浏览器不会再自作主张把页面算法变暗。

一个小提醒：用灯泡深色时，请关掉浏览器自带的「网页深色 / 夜间模式」（或把本站加白名单）。浏览器会在本站深色之上再盖一层，背景会接近全黑，两者二选一即可。

阅读体验

  • PJAX 无刷新翻页：站内链接点击即换正文，伴随淡入淡出，标题、地址栏、浏览器前进 / 后退同步更新；切换页面时会自动停止正在播放的音乐和视频。
  • 灯箱看图：正文图片与九宫格图片点击看大图，同一文章（或同一九宫格）内的图片自动成组，底部有计数（如 3 / 9）；移动端可手指滑动翻页，PC 端有圆形按钮并支持键盘 ← / → / Esc；相邻图片会预加载，翻页不等待。
  • 分页与导航：分页是羊皮纸药丸样式，文章列表、归档页、评论区共用；评论区分页完整可用；文章页有上一篇 / 下一篇导航；标题过长时自动单行省略，悬停可看全文。
  • 搜索与评论：顶栏搜索框常驻；移动端输入字号 16px，iOS 聚焦时不会自动放大页面；评论表单透明融入纸面，深浅色都适配，提交按钮随主题变色。

媒体短代码

写文章时直接用，不需要装插件：

  • 音乐（APlayer，歌词、封面可省略）：[Music title="歌名" author="歌手" url="音频地址" pic="封面图" lrc="歌词地址"/]
  • 视频（ArtPlayer 内嵌播放；万一播放器加载失败，会自动回退为浏览器原生播放器，不黑屏）：[Video url="视频地址" pic="封面图"/]
  • 视频分集：用 [play] 与 [/play] 包住多个视频地址，一行一个，即为分集列表。
  • B 站视频（点击后才内嵌播放，不自动播放）：[bilibili bvid="BVxxxx"/]
  • 九宫格图册（自动排成 3×3 并接入灯箱）：
[gallery]
图片地址1
图片地址2
……
[/gallery]

性能取向

  • 播放器按需加载：页面上有音乐 / 视频元素时才拉取对应播放器库，纯文字页大约省下 216KB。
  • 缓存友好：CSS / JS 都带版本参数，更新自动破缓存；图片、音视频等静态资源可配合服务器长缓存。

后台设置

主题设置（后台 → 外观 → 设置外观）只有两项，保持简单：

  • 站点 LOGO 地址：填入图片 URL 后，会显示在网站标题前。
  • 侧边栏显示：勾选要显示的模块 —— 最新文章、最近回复、显示分类、显示归档、显示其它杂项。

安装方法

  1. 下载文末的 zip 包，解压后得到 dreaminlake 文件夹；
  2. 把整个文件夹上传到 Typecho 的 usr/themes/ 目录；
  3. 进入后台 → 外观，启用 DreamInLake；
  4. （可选）在「设置外观」里填上 LOGO 地址、勾选侧边栏模块。

扩展与二次开发注意事项

主题文件结构清晰，主要文件一览：

  • 页面模板：index.php（首页 / 列表）、post.php（文章页）、page.php（独立页）、archive.php（分类 / 标签 / 搜索 / 作者）
  • 功能页模板：tpl_archive.php（归档页）、tpl_tags.php（标签页）
  • 公共部件：header.php（页头）、footer.php（页脚）、sidebar.php（侧边栏）、comments.php（评论）、post-date.php（日期章）
  • 逻辑与资源：functions.php（主题设置与工具函数）、media.php（短代码解析）、style.css（样式）、media.js（脚本）

在其基础上扩展时，有几点是我踩过坑后想提醒的：

  1. 改样式必须同步升版本号。修改 style.css 后，务必同步修改 header.php 里 style.css?v= 的参数；修改 media.js 后同步改 footer.php 里的 ?v=。否则浏览器（尤其是微信）会长期读旧缓存，改了像没改。
  2. 灯泡图与点击区是配套的。点击区坐标按现灯泡图定位（玻璃泡在图内 x153–188、y67–125）；更换灯泡美术图时，需同步调整 style.css 中 #bulbHit 的位置与尺寸。
  3. 九宫格图片不要加懒加载。主题已按 iOS Safari 的兼容性处理（其原生懒加载会随机丢图），自行改图时勿给九宫格图片加 loading="lazy"。
  4. 新元素要同时做两套配色。深色模式不是滤镜反色，而是美术图叠罩 + 文字单独配色；新增模块时记得在深色规则下补齐样式，并保持「照片不变色」的原则。
  5. PJAX 环境的新脚本要考虑重绑定。站内切页不刷新整页，新加的交互脚本需在 PJAX 切页后重新初始化；切页时主题会自动停掉音视频，别与这套逻辑冲突。
  6. 批量导入文章请错开发布时间。Typecho 的上一篇 / 下一篇按发布时间严格排序，同一秒发布的文章会互相「看不见」，导入时逐篇把时间错开即可。
  7. 直接写数据库发文章时，正文开头要加 <!--markdown--> 标记，否则 Markdown 不解析（短代码仍生效，容易误判）。
  8. theme_random_posts 的数据库兼容。functions.php 中的随机文章函数用了 MySQL 的 RAND() 排序；若在 SQLite 上启用它，需改为 RANDOM()。
  9. 打包发布前清理备份文件。主题目录内不要留 .bak、.prelou 等备份文件再打包，避免把敏感配置混进发布包。

下载

这是一款 2015 年的老主题，最近利用 AI 重新打磨升级了一番。免费提供下载使用，欢迎使用，也欢迎提出改善意见，谢谢！