页头横幅

页头横幅

于页头展现一幅图片或一段视频。
浏览模块

页头横幅

HB Framework Authors 2023年8月26日 2 分钟阅读 模块

于页头展现一幅图片或一段视频。

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

属性

NameTypeRequiredDefaultDescription
imgstringY-图片 URL，至少指定 img 或 video 其中之一。
videoobjectY-视频。
video.srcstringY-视频 URL。
video.posterstringY-视频封面。
video.typestringY-视频媒体类型，如：application/x-mpegURL（HLS）、application/dash+xml（MPEG DASH）。
alignmentstring-start内容对齐方式：start、center 或 end。
colorstring-#fff内容颜色。
colsstring-12 lg:8内容占用的列数，默认为：col-12 col-lg-8。
titleboolean/string-Page title横幅的标题，支持 Markdown，false 则隐藏。
descriptionboolean/string-Page description横幅的描述，支持 Markdown，false 则隐藏。

站点参数

调整 hb.header.banner 站点参数以全局地启用横幅。

hugo.toml

1[params]
2  [params.hb]
3    [params.hb.header]
4      [params.hb.header.banner]
5        img = '/images/banner.png'
6        transparentize_navbar_bg = true

hugo.yaml

1params:
2  hb:
3    header:
4      banner:
5        img: /images/banner.png
6        transparentize_navbar_bg: true

hugo.json

 1{
 2   "params": {
 3      "hb": {
 4         "header": {
 5            "banner": {
 6               "img": "/images/banner.png",
 7               "transparentize_navbar_bg": true
 8            }
 9         }
10      }
11   }
12}

页面参数

于 Front Matter 设置 header.banner 参数，以设置该页面的横幅，其会覆盖站点的横幅设置。

1[header]
2  [header.banner]
3    img = '/images/banner.png'

1header:
2  banner:
3    img: /images/banner.png

1{
2   "header": {
3      "banner": {
4         "img": "/images/banner.png"
5      }
6   }
7}

若需要为页面禁用全局的横幅设置，可将 header.banner 设置为 false。

1[header]
2  banner = false

1header:
2  banner: false

1{
2   "header": {
3      "banner": false
4   }
5}

要获得 Video.js 的支持，应指定 video_js 参数，该参数可用于播放浏览器本机不支持的视频，如 HLS 和 MPEG-DASH。

1video_js = true
2[header]
3  [header.banner]
4    [header.banner.video]
5      poster = 'https://example.org/video.webp'
6      src = 'https://example.org/video.m3u8'
7      type = 'application/x-mpegURL'

1header:
2  banner:
3    video:
4      poster: https://example.org/video.webp
5      src: https://example.org/video.m3u8
6      type: application/x-mpegURL
7video_js: true

 1{
 2   "header": {
 3      "banner": {
 4         "video": {
 5            "poster": "https://example.org/video.webp",
 6            "src": "https://example.org/video.m3u8",
 7            "type": "application/x-mpegURL"
 8         }
 9      }
10   },
11   "video_js": true
12}

Examples