瀏覽文檔

頁頭概覽

HB Framework Authors 2023年2月16日 1 分鐘閱讀 模塊 文檔 頁頭

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

本頁內容
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 時摺疊，否則展開。可選項：lg、xl、xxl。
full_widthbooleantrue是否全寬。
logo_bgstring-Logo 背景色 background，用於透明背景的 Logo。
menus_alignmentstringstart菜單對齊：start、center 和 end。
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頁頭面板。