浏览模块

页头概览

HB Framework Authors 2023年2月16日 2 分钟阅读 模块 文档 页头

页头模块是一个通用的顶部应用栏，其带有一些实用的子模块，比如搜索表单、社交链接、浅色/深色切换以及语言切换等。

本页内容
赞助
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是否全宽。
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菜单对齐：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页头面板。