侧边栏组件

本页讲解侧边栏与首页小部件：页面级统计组件（标签云/词云/分类雷达/归档/图表）、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`，见「文章页配置」篇）

5. 关于页个人信息（profile）

用途：/about/ 关于页顶部的个人信息卡片——头像、职业、个人介绍。

配置（主题配置）：

profile:
  avatar: /medias_webp/avatar.webp
  career: IIoT | TI方案 | 安防 | ...   # 职业标签（| 分隔）
  introduction: 嵌入式领域专家：
  introDetail:
    - 做遍安防前端、后端所有产品线...
    - 全栈开发者：从底层Uboot，Kernel，BSP到上层应用构架...

说明：introDetail 为列表，每项一行介绍；career 用 | 分隔多个职业标签。

6. 关于页项目（myProjects）

用途：/about/ 关于页的"我的项目"卡片网格。

配置（主题配置）：

myProjects:
  enable: true
  data:
    LinuxPTTools:
      icon: fab fa-linux                    # Font Awesome 图标
      iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'  # 图标背景渐变
      url: https://github.com/appotry/PTtool  # 项目链接
      desc: 为PT用户设计，方便同时刮削和做种。  # 项目描述
    Docker:hexo:
      icon: fab fa-docker
      iconBackground: 'linear-gradient(to bottom right, #29B6F6 0%, #1E88E5 100%)'
      url: https://hub.docker.com/r/bloodstar/hexo
      desc: Hexo docker 环境，集成很多实用插件。

说明：data 下每个键是一个项目（键名即项目名，可用 : 分组如 Docker:hexo）；不需要展示时把 enable 设为 false 或删除整段。

7. 关于页技能（mySkills）

用途：/about/ 关于页的"我的技能"进度条列表。

配置（主题配置）：

mySkills:
  enable: true
  data:
    C语言:
      background: 'linear-gradient(to right, #2196F3 0%, #42A5F5 100%)'  # 进度条渐变
      percent: 90%    # 熟练度百分比
    Linux Device Driver:
      background: 'linear-gradient(to right, #FF0066 0%, #FF00CC 100%)'
      percent: 90%

说明：data 下每个键是一项技能（键名即技能名），percent 控制进度条长度。

8. 关于页相册（myGallery）

用途：/about/ 关于页的"我的相册"图片墙。

配置（主题配置）：

myGallery:
  enable: true
  data:
    - /medias_webp/featureimages/0.webp
    - /medias_webp/featureimages/1.webp
    - /medias_webp/featureimages/2.webp

说明：data 为图片路径数组，每项一张图；图片放 source/ 下用绝对路径引用。

与 /galleries/ 独立相册页的区别：myGallery 是关于页的简单图片墙（仅 data 路径数组，无标题/描述）；独立相册页数据在 source/_data/galleries.yml（含封面/描述/灯箱，见「布局与页面」篇 §4），两者数据源不同、互不影响。

9. 归档页文章日历（postCalendar）

用途：/archives/ 归档页是否显示"文章日历"控件（按日期高亮发文日）。

配置（主题配置）：

postCalendar: true   # true | false

说明：布尔开关，true 时归档页顶部显示日历，发文日期高亮。

10. 哔哔时间（bbtime）

用途：侧边栏"哔哔"（说说/动态）组件，基于 LeanCloud 存储。

配置（主题配置）：

bbtime:
  enable: false   # true | false
  appId: v2hJTCLDHLnGF4iSJkBJ8mga-MdYXbMMI   # 你的 appId
  appKey: Hu4UNHLVERHkhfH6G5xqdqN3           # 你的 appKey
  serverURLs: https://lcvaline.17lai.site    # https://你的api

说明：需在 LeanCloud 创建应用获取 appId/appKey；serverURLs 填你的 LeanCloud API 地址（国际版为 https://appid前八位.api.lncldglobal.com）。

用途：首页推荐位——展示指定文章列表，可配置标题与数据来源。

配置（主题配置）：

recommend:
  enable: true
  showTitle: true      # 是否显示推荐文章标题
  useConfig: false     # true 时用 _data/recommends.json 配置推荐文章；false 走主题配置的 top 属性

数据源（useConfig: true 时）：主题侧无模板文件，需自行创建 source/_data/recommends.json（结构：{"recommends": [...]}）：

{
  "recommends": [
    { "title": "推荐文章标题", "url": "/posts/xxx/", "cover": "/medias_webp/cover/xxx.webp" }
  ]
}

说明：useConfig: false（默认）时推荐文章由主题配置的 top 属性决定；useConfig: true 时改 source/_data/recommends.json 即可，无需动主题。

12. 说说（artitalk）

用途：动态"说说"组件（类似微博/朋友圈短动态），基于 LeanCloud 存储，独立页面 /bb/ 展示。

配置（主题配置）：

artitalk:
  enable: false
  appId:    # LeanCloud appId
  appKey:   # LeanCloud appKey

说明：当前未启用（enable: false）。启用需：① LeanCloud 创建应用，建 content Class（含 content 列，String 类型）；② 记录 appid/appKey；③ hexo new page bb 创建 /bb/ 页面，front-matter 设 layout: bb。官方文档见 artitalk.js.org。

附：侧边栏组件速查表

组件	页面	配置
标签云/词云	`/tags/`	自动渲染，无需配置
分类云/雷达图	`/categories/`	自动渲染，无需配置
归档时间线/日历	`/archives/`	自动渲染，无需配置
站点统计图表	`/about/`	自动渲染，无需配置
Live2D 看板娘	全站	主题 `live2dWidget.enable`
首页音乐	首页	主题 `music` 段
音乐页播放器	`/musics/`	主题 `musics` 段（id/server/type/fixed 等）
梦想语录	首页	主题 `dream` 段
首页视频	首页	主题 `video` 段（默认关）