Navigation Menu & Homepage

This page explains the top navigation menu (level-1/level-2 menus) and the homepage (cover carousel, banner, post waterfall) configuration. Everything is done in the theme config.

The authoritative source of the theme config is userConfig/_config.tmp.yml (it overwrites the theme config at CI time); all sections below come from it.

Purpose: menu items in the top navbar. Supports level-1 menus (direct links) and level-2 menus (children dropdowns).

Config (theme config):

menu:
  home:                         # level-1 menu: direct link
    url: /                      # level-1 menus must have url (can omit when children exist)
    icon: fas fa-home           # Font Awesome icon (v5.15 icon names)
    class: menu-2d-home         # live2d selector: positions the tooltip box
  nav:
    url: https://nav.17lai.site/
    icon: fas fa-suitcase
    class: menu-2d-nav
    target: _blank              # open in a new tab
  so:
    url: https://so.17lai.site/
    icon: fas fa-mask
    class: menu-2d-sosuo
    target: _blank
  multimedia:                   # level-2 menu: children array
    icon: fas fa-music
    class: menu-2d-media
    children:
      - name: music             # menu display name (i18n key)
        url: /musics/
        icon: fas fa-music
        class: menu-2d-musics
      - name: gallery
        url: /galleries/
        icon: fas fa-image
      - name: movie
        url: /movies/
        icon: fas fa-film
  posts:
    icon: fas fa-folder-plus
    children:
      - name: tags              # /tags/ tag page
        url: /tags/
        icon: fas fa-tags
      - name: categories        # /categories/ category page
        url: /categories/
        icon: fas fa-bookmark
      - name: archives          # /archives/ archive page
        url: /archives/
        icon: fas fa-archive

Notes:

Adding a menu: add an entry under menu (level-1) or add children to a menu (level-2). name is an i18n key (the matching copy in languages/zh-CN.yml); look up icon in Font Awesome v5.15; target: _blank opens external links in a new window.
class is only for positioning the live2d mascot tooltip; can be omitted without a mascot.
Write menu url as /musics/ (absolute path), not musics, otherwise concatenation with url may break.

2. Homepage Cover Carousel (cover)

Purpose: the cover carousel of posts at the top of the homepage. Posts enter the carousel via cover/coverImg in front-matter.

Config (theme config):

cover:
  showPrevNext: true    # prev/next buttons
  showIndicators: true  # bottom indicators (dots)
  autoLoop: true        # auto rotation
  duration: 180         # transition duration (ms)
  intervalTime: 8000    # auto rotation interval (ms)
  useConfig: false      # true = use _data/covers.json for carousel posts
  video:
    enable: false       # carousel background video (fill src with an array of video URLs)
    src:
      - https://example.com/video1.mp4

Post front-matter control (priority notes from the config comments):

front-matter key	Effect
`hide: true`	fully hide the post (not in the homepage list, not in the cover carousel)
`cover: true`	post enters the cover carousel (prerequisite: `hide` is not true)
`coverImg: /path/to/img.webp`	custom carousel image (takes priority over the cover default)

Priority: hide: true > cover: true. hide: true + cover: true → the post is fully hidden, not in the carousel.

Purpose: homepage hero image (independent of the global banner), typewriter subtitle, buttons & social links, and the “dream” quote.

Config (theme config):

index:
  banner_img: /img/default.png   # homepage hero image (relative or absolute path)
  banner_img_height: 100         # hero image height (percentage of screen, 0-100)
  banner_mask_alpha: 0.3         # black mask opacity (0-1, 1 = fully opaque)
  slogan:                        # homepage subtitle, configured independently
    enable: true
    text: "An elegant Material-Design theme for Hexo"  # empty = use hexo subtitle
    api:                         # fetch the subtitle via API (returns JSON)
      enable: false
      url: ""
      method: "GET"              # GET | POST | PUT
      headers: {}
      keys: []                   # value path, e.g. ['data','content']

Homepage-only widgets:

dream:               # "dream" quote (text below the banner)
  enable: true
  showTitle: false
  title: 追梦
  text: "凡我所失，皆非我所有……"

indexbtn:            # second banner button
  enable: true
  name: GitHub
  icon: fab fa-github
  url: https://github.com/appotry

socialLink:          # personal info row in the banner (leave empty to hide)
  github: https://github.com/appotry
  dockerhub: https://hub.docker.com/u/bloodstar
  email: admin@17lai.fun
  rss: true          # true/false

4. Homepage Post List (Waterfall)

Purpose: the homepage content area shows post cards in a waterfall (Masonry) layout. The layout is automatic; config controls excerpts, link target, meta info and pinning.

Config (theme config, inside the index section):

index:
  auto_excerpt:
    enable: true              # auto-extract post excerpts
  post_url_target: _self      # open posts: _blank new tab | _self same page
  post_meta:                  # post card meta info
    date: true
    category: true
    tag: true
  post_sticky:                # icon before pinned post titles
    enable: true
    icon: "iconfont icon-top"

Post front-matter controls the card:

title: Example post
sticky: 1          # larger = higher (homepage pin)
index_img: /medias_webp/cover/5w2h.webp   # card cover image
hide: false        # true = hidden from the homepage list

Notes: without index_img, the theme config post.default_index_img is the fallback (see the Post Page Configuration chapter); if both are empty no cover shows. The waterfall layout is based on Masonry — it reflows automatically after images load, no manual maintenance.

Feature	Config location	Description
Nav menu	theme `menu`	level-1 `url/icon/class/target`, level-2 `children`
Cover carousel	theme `cover`	auto rotation + indicators; front-matter `cover`/`coverImg`/`hide`
Homepage banner	theme `index`	`banner_img`/height/mask + `slogan` subtitle
Dream quote	theme `dream`	quote text below the banner
Homepage button	theme `indexbtn`	second button (name/icon/link)
Social links	theme `socialLink`	second-row icons, hidden when empty
Post list	theme `index` + front-matter	excerpt/link target/meta/pin/cover