Sidebar Widgets

This page explains sidebar & homepage widgets: page-level statistics widgets (tag cloud/word cloud/category radar/archive/charts), the Live2D mascot, and the music player. The first two are auto-rendered by the theme; the latter two have dedicated config.

The authoritative source of the theme config is userConfig/_config.tmp.yml (it overwrites the theme config at CI time).

1. Page-level Widgets (auto-rendered)

Purpose: the following widgets are rendered automatically by the theme generators per page — no config needed, they update with content.

Widget list (corresponding to the themes/matery/layout/_partial/widget/ directory):

Notes: these widgets are mounted on their layouts; page data comes from the site content itself. To “configure” them, essentially adjust the content structure (tag naming, category hierarchy), or edit the themes/matery/layout/_partial/widget/*.ejs templates (advanced customization).

2. Live2D Mascot (live2dWidget)

Purpose: the Live2D mascot in the bottom-right/bottom-left corner (pure static models, no PHP backend), with interactive tips.

Config (theme config):

live2dWidget:
  enable: true   # master switch

Notes:

• Models and tips are configured under source/live2d/ (static models) and the waifu-tips files, managed independently of the theme config
• The class: menu-2d-* values in menu items (e.g. menu-2d-home) are positioning selectors for the mascot’s tooltip box (see the Navigation Menu & Homepage chapter)
• Full add/remove/switch procedures for models: see the blog’s live2d maintenance docs
• Dual runtime: Cubism 2 (live2d.min.js) and Cubism 5 (live2dcubismcore.min.js) coexist; autoload.js loads the appropriate version based on model metadata (cubism2Path / cubism5Path)
• Local models: models and manifests are located at source/live2d/model/ and source/live2d/model_list.json
• Actual config keys: theme config has only the live2dWidget.enable switch; the autoload script path is libs.js.live2dAutoload → /libs/live2d/autoload.js; runtime assets (autoload.js / waifu-tips.js / waifu.css) live in themes/matery/source/libs/live2d/
• Tips are configurable: yes — autoload.js points to waifu-tips.json via waifuPath; edit that file to customize tips
• Dark mode adaptation: waifu.css supports both manual dark mode ([data-user-color-scheme="dark"]) and system preference (prefers-color-scheme: dark)
• Loading threshold: layout/_partial/script/live2d.ejs only loads when window width > BP.fun AND visit count > 2

3. Music Player (music / musics)

Purpose: an APlayer + Meting based music player supporting NetEase/QQ Music playlists. Two places:

• music: homepage (non-fixed mode, can auto-hide)
• musics: standalone music page /musics/ (fixed mode, floats site-wide)

Homepage music (theme config):

music:
  enable: false         # show music on the homepage
  title:                # effective in non-fixed mode: title bar
    enable: true
    show: 听听音乐
  autoHide: true        # auto hide
  server: netease       # music platform: netease | tencent | kugou | xiami | baidu
  type: playlist        # type: song | playlist | album | search | artist

Standalone music page (theme config, /musics/):

musics:
  enable: true
  title:
    enable: true
    show: 听听音乐
  server: netease       # music platform
  type: playlist        # type
  id: 4965675848        # playlist/song/album ID or search keyword
  fixed: false          # true = fixed mode (floating at the bottom)
  autoplay: true        # autoplay
  theme: '#42b983'      # player theme color
  loop: 'all'           # loop: 'all' | 'one' | 'none'
  order: 'random'       # order: 'list' | 'random'
  preload: 'auto'       # preload: 'none' | 'metadata' | 'auto'
  volume: 0.7           # default volume (player remembers manual settings)
  listFolded: false     # list folded by default
  listMaxHeight: "525px" # list max height

Notes: fill id with the platform’s playlist/song ID (NetEase playlist IDs are visible in the page URL). Note the player remembers user settings — after a user adjusts volume manually, the volume default no longer applies.

4. Other Homepage Widgets

themes/matery/layout/_partial/widget/ also contains the following mountable widgets; see the corresponding layout templates for enabling:

5. About Page Profile (profile)

Purpose: personal info card at the top of /about/ — avatar, career, personal introduction.

Config (theme config):

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

Notes: introDetail is a list, one line per intro item; career uses | to separate multiple career tags.

6. About Page Projects (myProjects)

Purpose: “My Projects” card grid on /about/.

Config (theme config):

myProjects:
  enable: true
  data:
    LinuxPTTools:
      icon: fab fa-linux                    # Font Awesome icon
      iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'  # icon background gradient
      url: https://github.com/appotry/PTtool  # project link
      desc: 为PT用户设计，方便同时刮削和做种。  # project description
    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 环境，集成很多实用插件。

Notes: each key under data is a project (the key name is the project name; : groups like Docker:hexo are allowed); set enable: false or delete the block to hide it.

7. About Page Skills (mySkills)

Purpose: “My Skills” progress bars on /about/.

Config (theme config):

mySkills:
  enable: true
  data:
    C语言:
      background: 'linear-gradient(to right, #2196F3 0%, #42A5F5 100%)'  # bar gradient
      percent: 90%    # proficiency percentage
    Linux Device Driver:
      background: 'linear-gradient(to right, #FF0066 0%, #FF00CC 100%)'
      percent: 90%

Notes: each key under data is a skill (the key name is the skill name); percent controls the bar length.

8. About Page Gallery (myGallery)

Purpose: “My Gallery” image wall on /about/.

Config (theme config):

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

Notes: data is an array of image paths, one image per item; place images under source/ and reference them with absolute paths.

Difference from the standalone /galleries/ pages: myGallery is a simple image wall on the About page (just a data path array, no titles/descriptions); the standalone gallery pages read source/_data/galleries.yml (cover/description/lightbox, see Layout & Pages §4). The two data sources are independent.

9. Archive Page Calendar (postCalendar)

Purpose: whether /archives/ shows the “post calendar” widget (highlights days with posts).

Config (theme config):

postCalendar: true   # true | false

Notes: boolean switch; true shows a calendar at the top of the archive page with post dates highlighted.

10. Bbtime (bbtime)

Purpose: sidebar “bb” (status/updates) widget, backed by LeanCloud storage.

Config (theme config):

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

Notes: create an app in LeanCloud to get appId/appKey; serverURLs is your LeanCloud API address (international: https://first8ofappid.api.lncldglobal.com).

11. Recommended Posts (recommend)

Purpose: homepage recommendation slot — shows a curated post list, with configurable title and data source.

Config (theme config):

recommend:
  enable: true
  showTitle: true      # whether to show the recommended-posts title
  useConfig: false     # true = use _data/recommends.json; false = use the theme config's top property

Data source (when useConfig: true): the theme ships no template file — create source/_data/recommends.json yourself (shape: {"recommends": [...]}):

{
  "recommends": [
    { "title": "Recommended post title", "url": "/posts/xxx/", "cover": "/medias_webp/cover/xxx.webp" }
  ]
}

Notes: with useConfig: false (default), recommended posts come from the theme config’s top property; with useConfig: true, edit source/_data/recommends.json without touching the theme.

12. Artitalk (artitalk)

Purpose: dynamic “bb” (status/updates) widget — short posts like a microblog, backed by LeanCloud storage, shown on the standalone /bb/ page.

Config (theme config):

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

Notes: currently disabled (enable: false). To enable: ① create an app in LeanCloud and a content Class (with a content column, String type); ② record appid/appKey; ③ hexo new page bb to create /bb/, set layout: bb in front-matter. Docs: artitalk.js.org.

Appendix: Sidebar Widget Quick Reference