Nexus｜基于 Material Design3 的 Typecho 三栏响应式博客主题

之前我一直在使用子比模板做站点，子比偏向业务场景，而 WordPress 整套程序相对臃肿，对于只是用来记录、分享日常的博客来说，体验不算轻巧。

经过反复打磨，同时借助 GLM‑5.3、GLM‑5.3‑Flash、DeepSeek‑V4Pro 大模型辅助开发，我完成了这款面向 Typecho 的博客主题 Nexus。

Typecho 对比 WordPress 虽然知名度不高，但程序足够轻量，对服务器配置要求很低，普通 2C2G 服务器就可以流畅运行，非常适合搭建个人日常分享博客。

目前主题整体框架和 UI 界面已经开发完成，因为内置功能较多，开发过程中也遇到不少 Bug，调试修复消耗了大量 Token。部分问题反复复现，中途我也有过暂停开发的想法。开发冲动也曾有所下降，不过好在也坚持下来了，经过多轮测试，现在主题整体已经趋于稳定，仅剩余少量细碎问题，后续会抽空迭代更新。

🎨 主题简介

Nexus 是一套遵循 Material Design 3 设计规范的三栏响应式 Typecho 个人博客主题。视觉灵感来源于三栏教育仪表盘界面。

整体页面支持自定义渐变或者纯色背景；整套三栏布局被玻璃亚克力大底容器包裹：左右边栏采用透明亚克力效果，中间内容栏是纯白圆角面板。整体走扁平化设计，减少多余线条与阴影，全部细节遵循 MD3 设计令牌规范。

基础环境兼容

• 适配 Typecho 1.3
• PHP 版本：推荐 PHP8.5，向下兼容 PHP7.4+，没有使用已经废弃的 PHP 语法
• 布局结构：左栏导航、中间正文栏、右侧小组件栏，三栏宽度全部可以在后台自定义
• 图标：内置 Remixicon 图标库，字体文件本地存放，离线可用，无需依赖外部 CDN
• MD3 完整色彩系统：可以设置背景色自动推导整套主题色板（主色、次色、第三色、容器色等），也可以手动覆盖每一项颜色配置
• 响应式适配：大屏完整三栏；小屏幕优先隐藏右侧边栏，尽量保留左侧导航；移动端切换全屏白底布局，底部固定导航栏
• 深色模式：支持手动切换、跟随系统，浏览器本地存储记住用户的明暗偏好

📦 主题安装教程

1、安装 Nexus 主题程序

1. 将解压后的 Nexus 文件夹上传到 Typecho 站点目录 usr/themes/ 当中
2. 登录 Typecho 后台，进入「控制台 → 外观」，启用 Nexus 主题
3. 点击「外观 → 设置外观」，主题一共分为 13 个配置分组，在这里完成全部个性化设置
4. 注意：主题部分核心文件加密，请下载SG17扩展插件保证主题运行

2、安装配套插件

把插件文件夹上传至 usr/plugins/，后台控制台插件页面启用对应插件。

✅ 必需插件（保证主题完整功能，建议全部开启）

⚙️ 后台设置面板介绍

主题后台设置一共划分 13 个配置标签页，大屏下采用双栏布局：左侧标签导航，右侧设置卡片，配色会跟随外观定制自动推导，文本层级颜色也可以独立自定义。

所有后台配置保存之后立即生效，不需要手动修改代码文件。

✨ 核心功能特性

布局与视觉表现

1. 三栏亚克力大底布局：左右边栏半透明亚克力，中间纯白内容面板，边栏滚动吸附；页面内容不足时容器自动维持合理高度。
2. Banner 轮播组件：中栏顶部通栏轮播图，支持切换间隔、搜索按钮。未登录显示登录弹窗；已登录展示头像，快捷发布说说、跳转后台。
3. 个人信息卡片：头像半嵌入 Banner，展示昵称简介、社交图标、站点点赞与访问统计。
4. 首页横向导航菜单：Pjax 无刷新切换页面，文章分类可以自动展开，不需要整页重载。
5. 多模式首页列表：普通文章模式、说说模式、融合时间线模式，文章和说说可以按照时间混排展示。
6. 完整说说系统：支持发布、编辑、删除、置顶、分类；支持文字、图集、音乐卡片、视频、Live Photo 实况、公众号文章卡片、抖音视频卡片；弹窗快速发布，表情、图片灯箱，内容懒加载。
7. QQ 聊天气泡风格评论区：头像左右排布，支持正序倒序切换，评论回复层级清晰，支持图片、表情。
8. 双模式音乐播放器：头像悬浮播放器 + 页面底部常驻播放器，支持歌词滚动、音频可视化。
9. 文章页增强：版权声明卡片、上下篇跳转、标签胶囊、悬浮文章目录、图片灯箱。
10. 预制单页模板：友链页面、瀑布流相册、豆瓣书影音、B 站追番、归档时间线。

后台管理扩展能力

• 相册独立管理页：上传、编辑、排序相册图集，兼容本地、各类对象存储图床。
• 说说独立管理页：后台分页管理全部说说内容，编辑、预览。
• 拖拽小组件系统：自由把各类组件放置左侧、右侧边栏；内置天气、倒计时、时钟、日历、一言、站点统计、自定义 HTML 等大量组件。
• 可视化友链管理：后台直接增删友链，拖拽排序、分组。
• Joe 编辑器内置：增强后台写作体验，自带回复可见、音乐卡片等短代码。

性能与稳定性优化

• 全站 Pjax 无刷新切换，资源懒加载，CSS 平滑过渡动画
• 字体、图标全部本地化，不强制依赖外部 CDN
• 全部缓存支持磁盘自愈：抖音解析、图片代理、友链截图、豆瓣 / B 站封面，都设置数量、过期时间上限，长期运行缓存文件不会无限膨胀
• 抖音卡片视口懒加载，限制并发请求，链接自动去重，失败自动重试

📁 主题文件结构

Nexus/
├── 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                MD3风格404
├── header.php             全局头部
├── footer.php             全局页脚
├── sidebar.php            边栏小组件容器
├── functions.php          主题函数入口
├── style.css              样式入口
├── api/                   全部AJAX后端接口
├── admin/                 相册/说说/小组件后台管理页面
├── component/             通用复用组件
├── lib/                   业务逻辑函数库
├── assets/                CSS、JS、本地字体静态资源
├── preview.html           静态预览
└── screenshot.png         主题截图

🎯 设计要点

1. MD3 角色化配色体系：修改背景色就可以自动推算整套主题配色，也可以手动自定义主色、次色、容器、文字层级颜色。
2. 一体化容器布局：全部三栏内容包裹在一个大圆角容器内，依靠背景层级、留白区分区块，减少边框和厚重阴影。
3. 亚克力磨砂侧边栏：左右边栏半透明模糊，透出页面背景，中间内容栏实心纯白，层次分明。
4. 扁平化交互：全部按钮、标签使用圆角设计，hover、点击拥有状态过渡效果。
5. 文字层级规范：标题、正文、摘要、时间文字样式独立，支持单独修改颜色。

📝 补充说明

1. 主题默认字体使用 OPPO Sans 4.0，做了分包按需加载，消除文字闪烁；后台支持自定义字体栈，不会强制请求外部字体 CDN。
2. Remixicon 图标字体存放在本地，默认子集加载，后台使用小众图标会自动切换完整字体包。
3. 服务器如果开启静态资源长时间缓存，主题更新完成，请使用 Ctrl+F5 强制刷新浏览器，加载最新样式脚本。

📝 更新日志

授权地址

授权地址：https://www.jiatuw.cn/product/nexus-theme