加载中...

加载中...

侧边栏组件

本页讲解侧边栏与首页小部件:页面级统计组件(标签云/词云/分类雷达/归档/图表)、Live2D 看板娘、音乐播放器。前两者由主题自动渲染,后两者有独立配置。

主题配置以 userConfig/_config.tmp.yml 为权威源(CI 时覆盖主题配置)。

1. 页面级组件(自动渲染)

用途:以下组件由主题生成器按页面自动渲染,无需配置,随内容自动更新。

组件清单(对应 themes/matery/layout/_widget/ 目录):

页面组件说明
/tags/标签云 tag-cloud + 词云 tag-wordcloudchip 样式标签列表;canvas 词云字号 ∝ 文章数
/categories/分类云 category-cloud + 雷达图 category-radarcanvas 雷达图展示各分类文章数量分布
/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 段(默认关)
评论
数据加载中 ...