頁頭概覽
頁頭模塊是一個通用的頂部應用欄，其帶有一些實用的子模塊，比如搜索表單、社交鏈接、淺色/深色切換以及語言切換等。
本頁內容
贊助
| Module | github.com/hbstack/header |
|---|---|
| Repository | ⭐ Please consider giving a star if your like it. |
| Stars |  |
| Version |  |
| Used by |  |
| Requirements |  |
| License |  |
| Usage | See how to use modules. |
站點參數
| Parameter | Type | Default | Description |
|---|---|---|---|
brand | string | 站點標題 | 品牌文本。 |
breakpoint | string | lg | 當屏幕寬度小於 breakpoint 時摺疊，否則展開。可選項：lg、xl、xxl。 |
full_width | boolean | true | 是否全寬。 |
logo | boolean | - | 為 false 時隱藏 Logo。 |
logo_bg | string | - | Logo 背景色 background，用於透明背景的 Logo。 |
main_brand | object | - | 主品牌。 |
main_brand.title | string | - | 主品牌標題。 |
main_brand.logo | string | - | 主品牌 Logo，相對於 assets 目錄。 |
main_brand.url | string | - | 主品牌 URL。 |
main_brand.hide_title | boolean | false | 是否隱藏主品牌 Logo。 |
menus_alignment | string | start | 菜單對齊：start、center 和 end。 |
sticky | boolean | true | 是否固定頭部。 |
theme | string | - | 自 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}
鉤子
| Name | Description |
|---|---|
hb-header-nav-begin | 與頁頭導航開始處。 |
hb-header-togglers-begin | 於切換按鈕開始處。 |
hb-header-togglers-end | 於切換按鈕結束前。 |
hb-header-panel | 頁頭面板。 |
