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 重新打磨升级了一番。免费提供下载使用,欢迎使用,也欢迎提出改善意见,谢谢!

1 条评论

  1. 欢迎加入 Typecho 大家族

留下评论