頁頭模塊是一個通用的頂部應用欄,其帶有一些實用的子模塊,比如搜索表單、社交鏈接、淺色/深色切換以及語言切換等。
成為我們的資助者或贊助商,以支持我們的工作。
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 | 頁頭面板。 |