TriM3・一个人的博客主题

版本：v1.2.3
作者：薄荷
站点：abohe.cn
状态：自用，暂不开源

写在前面

博客这件事，我折腾过两版。

最早用 Pix 主题，干净、好看、插件多，用了一年多。但越用越觉得不对 —— 它太 "通用" 了，每个人装上去都长一个样。我的文章、我的说说、我看的番剧，塞进去都像在别人的客厅里说话。

后来我自己写了一版，类推特的，时间线往下刷，卡片一行一条，像刷朋友圈。写了两个月，上线了，也用了。但总觉得缺了点什么 —— 它更像一个信息流，不像一个 "家"。没有侧边栏放天气，没有地方放正在追的番，音乐播放器挤在角落里，写文章的时候总觉得后面有什么东西在催我往下刷。

今年深秋，我把第二版的代码全删了。

那天晚上打开 Figma，画了一个三栏的草稿：左边放导航，中间纯白放文章，右边放天气和最近在看的剧。Material Design 3 的配色系统刚出来不久，我喜欢那种紫粉色的渐变，像深秋傍晚的天。

从那张草稿到今天 v1.2.3，过去了不到两个月。中间改了一百多个版本，有时候一天改七八次，有时候盯着一个动画效果发呆到凌晨三点。

这个主题不是给所有人用的。它是我自己的博客，我自己的工作台。但如果你刚好路过，觉得它有点意思，欢迎看看。

它长什么样

三栏布局，亚克力质感的大背景，中间纯白内容区。

• 左栏：横向导航菜单，首页切换文章 / 说说 / 相册 / 友链 / 豆瓣 / 番剧，不用刷新页面
• 中栏：文章卡片、说说流、相册瀑布流，滚动时卡片逐个滑入
• 右栏：天气、最近评论、TOC 目录，跟着文章走

配色用的是 Material Design 3 的动态取色系统，开了深色模式以后整个站点会跟着自动调整。

它能做什么

写作与阅读

• 文章页带 TOC 目录，跟随滚动高亮当前章节
• macOS 风格的代码高亮，复制按钮，行号
• 灯箱画廊，点图片放大看
• 评论区支持表情、图片、@提醒

内容模板

• 说说：像朋友圈一样的短内容流，带图片、点赞
• 相册：瀑布流布局，按相册分组，点进去看大图
• 友链：卡片墙，自动抓网站截图，鼠标悬停有动画
• 豆瓣：最近看过的书、看过的电影、听过的音乐
• 番剧：Bangumi 追番进度同步，看到第几集自动更新

播放器

全站音乐播放器，支持 Meting 源（网易云 / QQ 音乐），嵌在底部，写文章的时候边听边写。

体验细节

• 无刷新导航：切换页面不白屏，像 App 一样丝滑
• 滚动动画：每个卡片进入视口时从下方滑入，带交错延迟
• 图片代理：外链图片自动走 CDN 缓存，不加载时不占带宽
• 深色模式：自动跟随系统，也可以手动切
• 后台可视化配置：改配色、改圆角、开关功能，不用碰代码

这两个月改了什么

v1.0 到 v1.2.3，一百多个版本，从一张 Figma 草稿到一个能用的博客，中间经历的事比想象中多得多。

从零搭起来

第一周在搭骨架：Typecho 模板结构、三栏布局、Turbo 无刷新导航。Turbo 是个好东西，页面切换不白屏，但它把 DOM 整个换掉之后，所有 JS 都得重新初始化——这一个问题就折腾了好几天。

第二周开始填肉：说说流、相册瀑布流、友链卡片墙、豆瓣观影、番剧追踪。每个都是独立模板，各有各的坑——相册要处理懒加载和灯箱，说说要做点赞和无限加载，友链要自动抓网站截图。

动画这块最磨人

最开始想做那种"卡片一个个滑进来"的滚动效果，搬了第三方动画库，结果在无刷新导航下各种 bug——28 个元素只追踪了 9 个，剩下的直接隐藏不显示。折腾了十几个版本，最后放弃了第三方库，自己写了个 IntersectionObserver 的方案，反而更轻更稳。

中间调过无数次：

• 页面切换后动画不触发——Turbo render 事件没接好
• 往下滚新加载的卡片没有动画——MutationObserver 没观察到新节点
• 边栏每次切换都重新播动画——加了首屏标记，边栏只播一次
• 首页内容区标题该隐藏但没隐藏——CSS 选择器优先级问题
• 动画中途卡住——CSS transition 时钟在某些情况下不前进，改用 keyframe
• GPU 加速没生效——加了 translate3d 和 will-change

功能迭代

• 首页横向导航：点击切换文章/说说/相册，AJAX 加载内容不刷新页面
• 深色模式：自动提取文章主色生成配色方案
• 音乐播放器：底部固定 APlayer，支持网易云/QQ音乐
• 灯箱：Fancybox + Lightbox 两套，图片点开放大看
• 图片代理：外链图片走 CDN 缓存，不加载时不占带宽
• 代码高亮：macOS 风格 Prism，带复制按钮
• 后台可视化面板：改配色、改圆角、开关功能，不用碰代码

踩过的坑

• 后台设置保存了不生效——字段映射漏了一个
• 无限加载和动画互相干扰——加载新内容后要重新初始化观察器
• 安全审查发现后台接口没加认证——访客能直接导出全部密钥，赶紧补上
• 评论昵称 XSS——漏了一处转义
• fancybox 在 Turbo 导航下重复加载报错——加了防重复执行
• 评论表写死了表前缀——换数据库前缀就崩

这些问题单独看都不大，但凑在一起就是"这个主题能不能用"和"这个主题好用"的区别。

技术栈

• 后端：Typecho 1.3 + PHP 8.5
• 前端：原生 JS + Turbo（Hotwire）+ IntersectionObserver
• 样式：SCSS → 压缩 CSS，Material Design 3 配色系统
• 动画：CSS Keyframe + GPU 加速（translate3d + will-change）
• 数据库：MySQL，自定义说说 / 相册 / 评论表
• 部署：宝塔面板 + Nginx

为什么不开源

不是不想，是还没到时候。

这个主题里有我自己的 API 接口、自己的数据库表结构、自己的图床配置。直接放出去，别人装不上，装上了也跑不起来。我不想发一个 "看起来很美但用不了" 的东西。

等它再稳定几个月，等我把配置文档写清楚，等我自己用着不再出问题的时候，可能会整理出来。

但那是以后的事了。

现在，它就是我的博客。

TriM3 v1.2.3・写于深秋