頁頭概覽

頁頭模塊是一個通用的頂部應用欄,其帶有一些實用的子模塊,比如搜索表單、社交鏈接、淺色/深色切換以及語言切換等。

本頁內容

Modulegithub.com/hbstack/header
Repository⭐ Please consider giving a star if your like it.
Stars
Version
Used by
Requirements
License
UsageSee how to use modules.

站點參數

ParameterTypeDefaultDescription
brandstring站點標題品牌文本。
breakpointstringlg當屏幕寬度小於 breakpoint 時摺疊,否則展開。可選項:lgxlxxl
full_widthbooleantrue是否全寬。
logoboolean-false 時隱藏 Logo。
logo_bgstring-Logo 背景色 background,用於透明背景的 Logo。
main_brandobject-主品牌。
main_brand.titlestring-主品牌標題。
main_brand.logostring-主品牌 Logo,相對於 assets 目錄。
main_brand.urlstring-主品牌 URL。
main_brand.hide_titlebooleanfalse是否隱藏主品牌 Logo。
menus_alignmentstringstart菜單對齊:startcenterend
stickybooleantrue是否固定頭部。
themestring-v0.4.0 刪除,另請參閱主題

logo 參數屬於核心模塊

hugo.toml

 1[params]
 2  [params.hb]
 3    logo = 'images/logo.png'
 4    [params.hb.header]
 5      brand = ''
 6      breakpoint = 'lg'
 7      full_width = true
 8      logo_bg = 'indigo'
 9      menus_alignment = 'start'
10      sticky = true

hugo.yaml

 1params:
 2  hb:
 3    header:
 4      brand: ""
 5      breakpoint: lg
 6      full_width: true
 7      logo_bg: indigo
 8      menus_alignment: start
 9      sticky: true
10    logo: images/logo.png

hugo.json

 1{
 2   "params": {
 3      "hb": {
 4         "header": {
 5            "brand": "",
 6            "breakpoint": "lg",
 7            "full_width": true,
 8            "logo_bg": "indigo",
 9            "menus_alignment": "start",
10            "sticky": true
11         },
12         "logo": "images/logo.png"
13      }
14   }
15}

鉤子

NameDescription
hb-header-nav-begin與頁頭導航開始處。
hb-header-togglers-begin於切換按鈕開始處。
hb-header-togglers-end於切換按鈕結束前。
hb-header-panel頁頭面板。
razonyang
2024年6月15日 星期六 2023年2月16日 星期四