TriM3 — Typecho 三栏 Material Design 3 博客主题

版本 v1.1.0 · 作者 薄荷

TriM3 是一个基于 Material Design 3 设计规范的三栏响应式个人博客主题，视觉灵感源自三栏教育仪表盘界面：整页背景为可自定义的渐变/纯色，三栏被一个「玻璃亚克力大底」整体包裹（左右边栏透明亚克力、中间栏纯白圆角面板），扁平化设计、少线条少阴影，细节统一走 MD3 设计令牌。

• 适配 Typecho 1.3 与 PHP 8.5（兼容 7.4+，不依赖任何弃用语法）
• 三栏布局：左栏导航 / 中栏正文 / 右栏小组件，三栏宽度后台可自定义
• Remixicon 图标库（已内置字体到本地 assets/fonts/，离线可用）
• 完整 MD3 色彩系统：背景色驱动整套色板（主色/次色/第三色/容器色/surface 阶梯/文本层级自动推导，也可手动覆盖）
• 响应式：优先隐藏右栏，左栏导航尽可能保持；移动端白底满宽 + 底部固定导航
• 深色模式：手动切换 + 跟随系统，localStorage 记忆

安装

1. 安装主题

1. 将 TriM3 文件夹复制到 Typecho 的 usr/themes/ 目录下
2. 进入后台「控制台 → 外观」，启用 TriM3 主题
3. 进入「外观 → 设置外观」，按 13 个分组配置主题（详见下文）

2. 安装配套插件（可选，按需启用）

将插件文件夹复制到 Typecho 的 usr/plugins/ 目录下，后台「控制台 → 插件」启用：

迁移类插件（WordpressToTypecho / PixMomentsToTri3）执行完导入即可停用，不影响站点运行。

后台设置面板（设置外观）

后台设置页分为 13 个 Tab，大屏两栏布局（左侧 Tab 导航 + 右侧设置卡片），配色自动跟随「外观定制」里的背景色推导，并支持文本层级单独配色：

所有设置保存后即时生效，无需改代码。

功能特性

布局与视觉

• 三栏大底：左右透明亚克力边栏 + 纯白中栏 + 底部一体大圆角框，距页顶 60px；左右栏随滚动吸附，内容不足时大底保持合理高度
• Banner 轮播：中栏顶部通栏轮播（底部直角、两侧圆角），支持多图、切换间隔、搜索按钮、登录按钮；未登录点击弹窗登录，已登录显示头像与弹出菜单（发布说说 / 后台 / 退出）
• 个人信息卡：头像半入 Banner，下方为名字、简介、社交图标（贴右）、自定义信息、点赞/访问数
• 首页横向菜单：Pjax 局部切换（文章 / 说说 / 分类 / 单页模板），不整页跳转；「文章」项自动展开为分类汇总，后台可设置显示的菜单与分类
• 文章卡片：图片 + 标题 + 摘要的精致布局，标题超长省略号，悬停显示全文；融合模式下文章与说说按时间线融合，文章以「#标题 + 正文 + 图集」形式呈现
• 说说系统：发布 / 编辑 / 删除 / 分类 / 置顶；支持文字、图片、音乐卡片、视频、实况（Live Photo）等多内容共存排版；前台弹窗发布，表情、图集、灯箱
• 聊天框评论区：QQ 聊天框风格气泡、头像左右排布、正序/倒序切换、回复父子关系清晰；支持表情、插入图片；发布后跳转到最新评论
• 播放器：头像播放器（未播放时仅显示音量/歌单/歌词按钮与进度条，悬停头像显示播放键；播放后封面/上一曲/播放暂停/下一曲入框）+ 页面底部悬浮播放器；Meting API 支持网易云 / QQ 单曲与歌单，歌词轮播、可视化、Cookie 试听；切歌封面与信息平滑过渡
• 文章页：版权声明卡片（背景 CC 水印）、上一篇 / 下一篇、标签胶囊、目录悬浮导航（可后台按文章自定义开关）、灯箱
• 单页模板：友链（分组展示、站点截图缓存、每行自适应数量）、相册（相册列表 / 直接展示指定相册、瀑布流、灯箱）、豆瓣书影音、B 站番剧、归档（时间线 + 分类 / 标签 / 月度统计）

后台管理与扩展

• 相册管理：外部管理页（admin/albums.html），上传 / 编辑 / 删除 / 排序相册与图片；支持自建图床 API（如兰空），可后台设置
• 说说管理：外部管理页（admin/moments.html），列表分页、查看前台、编辑（含插入内容与表情）
• 小组件系统：外部管理页（admin/widgets.html），类似 WordPress 的拖拽式小组件，可拖到左栏 / 右栏自由排列；内置今日天气与本周天气（和风天气）、访客浏览量、倒计时、翻页时钟、简约日历、日/周/年进度、一言、今日诗词、博客信息、文章展示、站点统计、导航菜单、自定义 HTML、音视频、社交信息、最新评论、归档、标签云、图片等组件
• 友链可视化编辑器：后台「友链」Tab 内直接增删改、拖拽排序、分组管理
• Joe 编辑器：后台文章编辑器集成最新版 Joe 编辑器（含短代码：回复可见、音乐卡片等）

性能与体验

• 全站 Pjax 无刷新切换 + 懒加载（IntersectionObserver）+ CSS 过渡动效
• 图标库与字体本地化，无需外部 CDN 依赖
• 前台登录 / 说说发布等交互均走主题自带 API

文件结构

TriM3/
├── index.php              首页（文章 / 说说 / 融合列表 + 横向菜单）
├── post.php               文章页
├── page.php               独立页面
├── page-moment.php        说说模板
├── page-links.php         友链模板
├── page-albums.php        相册模板
├── page-douban.php        豆瓣书影音模板
├── page-bangumi.php       B 站番剧模板
├── archive.php            归档页（分类 / 标签 / 日期 / 搜索）
├── category.php           分类页
├── comments.php           评论列表与表单
├── 404.php                404 页面（MD3 风格，兼容模式可选）
├── header.php             全局头部（MD3 色板注入、图标库、版本号资源引用）
├── footer.php             全局页脚
├── sidebar.php            右栏 / 左栏小组件容器
├── functions.php          主题函数入口（加载 lib/ 模块）
├── style.css              Typecho 兼容入口（加载 assets/css/main.css）
├── api/                   AJAX 接口（全部集中在此目录）
│   ├── list-api.php       列表 / 说说 / 友链等数据接口
│   ├── moment-api.php     说说增删改接口
│   ├── comment-api.php    评论接口
│   ├── login-api.php      前台登录接口
│   ├── meting-api.php     Meting 音乐代理（网易云 / QQ）
│   ├── widget-api.php     小组件数据接口
│   ├── album-api.php      相册接口
│   ├── shot-api.php       友链截图缓存接口
│   ├── img.php            图片代理（缩放 + WebP + 磁盘缓存）
│   └── img-cache.php      图片缓存管理（扫描 / 预生成 / 统计 / 清空）
├── admin/                 外部管理页（相册 / 说说 / 小组件）
├── component/             复用组件（文章卡片、说说卡片、首页菜单、版权卡、评论等）
├── lib/
│   ├── helpers.php        前台工具函数（tri_opt / 头像 / 配色推导 / 分页）
│   ├── admin.php          后台设置面板（13 Tab 字段 + 色板注入）
│   ├── moment.php         说说数据层
│   ├── album.php          相册数据层
│   ├── widgets.php        小组件数据层
│   ├── douban.php         豆瓣数据层
│   ├── bangumi.php        番剧数据层
│   ├── Meting.php         Meting 音乐解析
│   └── joe-short.php      Joe 短代码
├── assets/
│   ├── css/               主题样式（main / moment / player / album / links / widgets / admin 等）
│   ├── js/                交互脚本（main / pjax / player / moment / album / widgets / admin 等）
│   ├── fonts/             本地 Remixicon 字体
│   └── lib/typecho/       后台数据层辅助
├── preview.html           静态预览页
└── screenshot.png         主题截图

设计要点

• 色彩：MD3 角色化配色，默认主色由背景色推导（改背景色，全套配色自动跟随），也支持手动指定主色 / 次色 / 第三色 / 容器色 / 文本层级
• 整体式布局：三栏被一个整体大圆角框包裹（距顶 60px），内部少边框线、少阴影，靠背景层级与留白区分
• 亚克力边栏：左右边栏半透明白 + 背景模糊透出页面背景色斑；中间栏为纯白实心圆角面板
• 扁平化：界面元素全部扁平，按钮 / 胶囊 / 标签全圆角，状态层过渡（hover / focus / pressed）
• 类型：MD3 类型尺度，正文 / 标题 / 摘要 / 时间各层级可单独配色

说明

• 默认字体 OPPO Sans 4.0（本地分包：常用/次常用/扩展三片按需下载 + 预加载常用片，消除文字逐个渲染；后台可自定义字体栈），不依赖外部字体 CDN
• 图标库已本地化（Remixicon 字体在 assets/fonts/），前台默认子集加载，后台配置出现子集外图标自动切完整版
• 服务器对静态资源有 12 小时强缓存，主题升级后请强刷（Ctrl+F5）查看最新效果

更新日志

v1.1.0（2026-09-16）

图床 · 七牛云 + 时间戳防盗链

• 新增「七牛云（Qiniu Kodo）」图床类型：专属配置（AccessKey / SecretKey / 空间名 / 区域 / 绑定域名 / Token 密钥 / TTL）
• 图片地址在输出层每次渲染自动动态签名（自动剥离旧签名重签，历史数据无需改动），覆盖文章 / 说说 / 相册 / 列表 / 自定义 HTML 小组件全部接入点；七牛域名图片签名直出优先，不再重复走图片代理
• 后台新增「校验链接生成器」可验证签名正确性；提示「回源鉴权」与「时间戳防盗链」二者互斥（开启回源鉴权时不能开时间戳防盗链）

垃圾评论防御加固

• 内置多语言垃圾特征规则：英文博彩 / 推广词、俄语系招聘 / 网课 / 网赚词、突厥语系博彩词、西里尔 / 阿拉伯 / 希伯来字符占比检测——不依赖后台关键词即可命中，命中自动转待审
• 豆包 AI 提示词强化（任意语言博彩 / 招聘 / 网赚 / 课程 / 促销一律视为垃圾、品牌昵称 + 随机后缀、软广告伪装个人经历等特征），并支持选择豆包 pro 模型
• 实测阿塞拜疆语 1xbet、俄语招聘等垃圾评论均被拦截、正常评论零误伤

管理后台批量删除

• 相册管理新增批量删除：相册列表勾选 / 全选 + 批量删除（连带相册内图片）；图片详情同样支持勾选批量删除
• 说说管理新增批量删除：列表头全选 + 批量删除（连带说说字段），拖拽排序与批量勾选互不干扰

v1.0.4（2026-09-15）

安全加固

• 评论系统防护升级：原生 Typecho 评论通道与主题 AJAX 评论接口统一接入 IP 滑动窗口限速（60 秒 3 条 / 10 分钟 10 条，后台「评论过滤」可自定义开关与阈值），防止绕过前端直接 POST 刷评
• 新增垃圾评论规则：纯链接推广（无实质文字）、重复字符轰炸（连续 12+ 相同字符）、同 IP 10 分钟内重复正文——命中自动转待审

布局与列表

• 修复：左栏「收窄仅图标」模式下右栏被强制收敛的问题——底框按后台自定义的右栏宽度正确收回，不再出现右栏大空隙，中栏宽度不被异常吸收
• 修复：说说页无限加载每加载一页嵌套一层列表结构的问题（改为只取容器内卡片项追加）
• 修复：列表「加载更多」按钮在初始输出位置（列表容器外）永不移除的问题——加载到最后一页按钮干净消失、无残留

图床

• 新增「又拍云（Upyun 对象存储）」图床类型：Form API（policy + signature 签名），API 地址填 https://v0.api.upyun.com/服务名/、Token 填「操作员名:操作员密码」，自动解析返回图片地址；与相册管理 / 后台编辑器 / 说说发布上传按钮全通用

小组件

• 博客信息小组件优先读取主题后台自己的设置（SEO 站点名称 / 描述、个人简介、站点 Logo），未填再回退 Typecho 原生站点设置

v1.0.3（2026-09-15）

• 移动端资源瘦身：侧栏小组件样式与脚本（widgets.css / widgets.js）改为宽度驱动按需注入——移动端（<901px）侧栏隐藏时不下载，PC 端 head 内同步注入、样式零滞后，行为与原先完全一致
• 按需加载：移除文章/页面页对 APlayer 库的静态加载（约 71KB）——Joe 音乐卡片已联动本站 TriPlayer 播放器，APlayer 由 joe-content.js 按需动态注入
• 实测：移动端刷新不再下载小组件资源，文章页不再下载 APlayer，首屏资源明显减少
• 修复：Pjax 切到其他页面再快速返回首页时，列表状态以整页渲染的权威页码对齐——修复偶发无限加载不触发、或跳过中间页直接加载后面内容的问题

v1.0.2（2026-09-15）

• 前台体验：首页横向菜单（点「文章」切换为分类汇总，菜单项/分类后台可设）+ 顶部通知条 + 搜索按钮平滑延伸；首页列表三种模式（原样/说说/融合——文章与说说按时间线混合、文章以 # 标题+正文+图集呈现、摘要字数可调）；列表分页重构（上一页/下一页局部 Pjax + 无限滚动加载）
• 说说系统增强：发布/编辑/删除/分类/置顶，文字、图片、音乐卡片、视频、实况多内容共存与插入排版，表情（删颜文字/阿鲁，前置 B 站、微博国内源），说说页可独立关闭 Banner 轮播/个人信息卡/首页菜单，后台说说管理（新增/编辑/分页）
• 聊天框评论区重构：QQ 聊天框气泡风格、正序/倒序切换、回复父子关系清晰、发表后跳转最新评论、插入图片、QQ 号（QQ 头像 + QQ 邮箱收件）、每条评论删除入口
• 播放器重构：头像播放器 + 底部悬浮播放器双形态、Meting 网易云/QQ 单曲与歌单（平台/类型选择式 + 链接自动识别 + Cookie VIP）、歌词轮播（默认开关可设、3 行、点击消失）、音乐可视化、歌单面板、鸿蒙风格三角播放按钮
• 文章页：版权声明卡片（背景 CC 水印）、上一篇/下一篇重构、标签 MD3 胶囊、标题美化、目录悬浮导航（后台按文章自定义开关）
• 单页模板：友链（分组展示、站点截图缓存天数 + 手动刷新）、相册（相册列表/指定相册、瀑布流、灯箱）、豆瓣书影音、B 站番剧、归档（时间线 + 分类/标签/月度统计）
• 灯箱升级：全站接入 fancybox 现代化灯箱（文章/说说/相册/小组件/评论区），MD3 遮罩防白闪、开合动画
• 移动端：底部固定菜单（后台 5 项）、整体响应式重构、轮播/图片等比缩放、悬浮播放器/歌词/返回顶部避让
• 后台能力：设置面板重构为 13 Tab 分组、后台配色跟随背景色按 MD3 自动推导、邮件通知（SMTP 测试/评论回复模板/QQ 邮箱）、配置备份（导出含外部管理页数据/导入/重置）、SEO 优化 Tab、图片优化（代理缩放 + WebP + 磁盘缓存 + cron 预生成，不依赖宝塔）、图床 API（兰空/Chevereto）、小组件拖拽系统（左/右栏自由排列 + 10 余种组件）、相册管理（上传/编辑/删除/排序/外链添加）、导航与分类拖拽排序、接入豆包 AI 评论过滤
• 性能与安全：全站代码审查与加载优化——脚本 defer、图片懒加载 + 首图高优、图标子集/完整版自动切换、OPPO Sans 粗粒度分包（每字重 3 片 + 预加载常用片，文字一次渲染）、安全响应头/登录防暴力/图片代理 SSRF 白名单、清理死代码与调试残留
• 修复：Typecho 1.3 在 contents 表缺失 format 列时 Markdown 原文文章前台不解析（主题内自动渲染兜底）；豆瓣页 pubdate 数组警告；说说卡片变量兜底；后台编辑器（TriJoeEditor）依赖的主题资源恢复并纳入插件依赖检查

v1.0.1（2026-09-14）

• 404 页面全新设计：MD3 风格渐变 404 大数字 + 指南针旋转轨道、背景光斑、漂浮图标、站内搜索框、按钮组、最近文章推荐，扁平无边框，全响应式
• 404 兼容模式：后台「外观定制」新增「404 页面输出」开关。默认兼容模式以 200 状态输出主题 404 页并声明 noindex，解决宝塔等面板 error_page 404 拦截导致主题 404 无法显示的问题；可切回标准 404 状态码
• 主题说明（theme-info.html）重写，增加完整更新日志

v1.0.0（2026-09-14）

• 首个正式版本：三栏 MD3 主题完整交付（详见上文全部功能特性）