Vuecho 文档主题(RyeBlog)
VuePress 风格文档主题,移植自 Typecho 主题 Vuecho(MIT License)。
特性
- VuePress 设计语言:绿色主调(
#3eaf7c)、Inter字体栈、细边框卡片 - 侧栏置左:文档导航在左、正文宽版居中(纯 CSS 实现,移动端内容优先)
- 自动 TOC:配合 RyeBlog「侧边栏 → 文章目录」模块,目录树 + 滚动高亮 + 折叠
- 首页 Hero:VuePress 式渐变 Hero(官方站首页宣传区)
- 代码块 / 表格 / 引用 / 卡片全套 VuePress 排版
安装
- 直接放入
usr/theme/vuecho/(含 theme.css + theme.js + home.php) - 后台「外观」→ 启用「Vuecho 文档主题」
首页(文档站宣传页)
启用后首页自动渲染为文档站宣传页(非文章列表):
- Hero 宣传区:站名大标题 + 副标题 + 双按钮(快速上手 / 开始学习)
- 特性卡片 ×3:介绍这个网站能学到什么(如:真实经验 / 健康喝茶 / 五因子评茶)
- 学习目录:最近文章按文档条目列表展示(序号 + 标题 + 分类 + 标签)
文案与链接全部在后台「站点设置 → 首页宣传区(文档主题)」配置,留空即隐藏对应区块/按钮。
内容页(文档式阅读)
文章/独立页保持文档式版式:正文宽版居中、侧栏(文章目录 TOC)置左、目录滚动高亮 + 折叠。
启用 TOC(文档站必做)
后台「侧边栏管理」→ 添加模块「文章目录」,即可在文章页右侧栏显示自动目录。
目录折叠 + 滚动高亮由主题自带 theme.js 提供,无需额外配置。
建议配置
- 后台「侧边栏固定」开关:文档站建议开启(目录跟随滚动)
- 后台「站点设置 → 首页宣传区(文档主题)」:填写 Hero 副标题、双按钮、3 条特性、学习目录标题
文件
| 文件 | 说明 |
|---|---|
| home.php | 文档站首页模板(Hero + 特性 + 学习目录,后台可配) |
| theme.css | VuePress 风格样式(变量映射 + 组件覆盖 + 首页样式) |
| theme.js | 侧栏模块折叠 + TOC 滚动高亮 |