頁頭橫幅

頁頭橫幅

於頁頭展現一幅圖片或一段視頻。
瀏覽文檔

頁頭橫幅

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'

hugo.yaml

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

hugo.json

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

頁面參數

於 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