侧边栏组件
本页讲解侧边栏与首页小部件:页面级统计组件(标签云/词云/分类雷达/归档/图表)、Live2D 看板娘、音乐播放器。前两者由主题自动渲染,后两者有独立配置。
主题配置以
userConfig/_config.tmp.yml为权威源(CI 时覆盖主题配置)。
1. 页面级组件(自动渲染)
用途:以下组件由主题生成器按页面自动渲染,无需配置,随内容自动更新。
组件清单(对应 themes/matery/layout/_widget/ 目录):
| 页面 | 组件 | 说明 |
|---|---|---|
/tags/ | 标签云 tag-cloud + 词云 tag-wordcloud | chip 样式标签列表;canvas 词云字号 ∝ 文章数 |
/categories/ | 分类云 category-cloud + 雷达图 category-radar | canvas 雷达图展示各分类文章数量分布 |
/archives/ | 时间线 + 日历 post-calendar | 按年/月时间线,圆点 + 年份折叠 |
/about/ | 站点统计图表 post-charts | 多组 canvas 图表(文章数/分类/标签/时间线等) |
| 文章页 | 分类栏 category-bar | 当前分类下文章(配置见「文章页配置」篇) |
说明:这些组件挂在对应 layout 上,页面数据来自站点内容本身。想"配置"它们,本质是调整内容结构(如标签命名、分类层级),或修改 themes/matery/layout/_widget/*.ejs 模板(高级定制)。
2. Live2D 看板娘(live2dWidget)
用途:右下角/左下角的 Live2D 看板娘(纯静态模型,无 PHP 后端),与用户交互提示语。
配置(主题配置):
live2dWidget:
enable: true # 总开关说明:
- 模型与提示语配置在
source/live2d/(模型静态化)与 waifu-tips 相关文件中,独立于主题配置管理 - 菜单项里的
class: menu-2d-*(如menu-2d-home)是看板娘提示文字框的定位选择器(见「导航菜单与首页」篇) - 模型添加/删除/切换的完整操作见博客的 live2d 维护文档
3. 音乐播放器(music / musics)
用途:基于 APlayer + Meting 的音乐播放器,支持网易云/QQ 音乐等平台歌单。分两处:
music:首页(非吸底模式,可自动隐藏)musics:独立音乐页/musics/(吸底模式,全站悬浮)
首页音乐(主题配置):
music:
enable: false # 是否在首页显示音乐
title: # 非吸底模式有效:标题栏
enable: true
show: 听听音乐
autoHide: true # 自动隐藏
server: netease # 音乐平台:netease | tencent | kugou | xiami | baidu
type: playlist # 类型:song | playlist | album | search | artist独立音乐页(主题配置,/musics/):
musics:
enable: true
title:
enable: true
show: 听听音乐
server: netease # 音乐平台
type: playlist # 类型
id: 4965675848 # 歌单/歌曲/专辑 ID 或搜索关键词
fixed: false # true 开启吸底模式(悬浮底部)
autoplay: true # 是否自动播放
theme: '#42b983' # 播放器主题色
loop: 'all' # 循环:'all' | 'one' | 'none'
order: 'random' # 顺序:'list' | 'random'
preload: 'auto' # 预加载:'none' | 'metadata' | 'auto'
volume: 0.7 # 默认音量(播放器会记忆用户手动设置)
listFolded: false # 列表默认折叠
listMaxHeight: "525px" # 列表最大高度说明:id 填对应平台的歌单/歌曲 ID(网易云歌单 ID 可直接在网页 URL 中看到)。注意播放器会记忆用户设置——用户手动调过音量后,volume 默认值即失效。
4. 其他首页小部件
themes/matery/layout/_widget/ 还包含以下可挂载组件,启用方式见对应 layout 模板:
| 组件 | 说明 |
|---|---|
dream | 首页"梦想"语录(配置见「导航菜单与首页」篇) |
video | 首页视频(主题 video 段,enable: false 默认关) |
recommend | 推荐文章(主题 recommend 段 + _data/recommends.json) |
my-gallery / my-projects / my-skills | 关于页的相册/项目/技能展示 |
artitalk | 说说(Artitalk 服务,未启用) |
advertisement | 广告卡片(post.advertisements,见「文章页配置」篇) |
附:侧边栏组件速查表
| 组件 | 页面 | 配置 |
|---|---|---|
| 标签云/词云 | /tags/ | 自动渲染,无需配置 |
| 分类云/雷达图 | /categories/ | 自动渲染,无需配置 |
| 归档时间线/日历 | /archives/ | 自动渲染,无需配置 |
| 站点统计图表 | /about/ | 自动渲染,无需配置 |
| Live2D 看板娘 | 全站 | 主题 live2dWidget.enable |
| 首页音乐 | 首页 | 主题 music 段 |
| 音乐页播放器 | /musics/ | 主题 musics 段(id/server/type/fixed 等) |
| 梦想语录 | 首页 | 主题 dream 段 |
| 首页视频 | 首页 | 主题 video 段(默认关) |