頁頭橫幅

頁頭橫幅

於頁頭展現一幅圖片或一段視頻。

頁頭橫幅

於頁頭展現一幅圖片或一段視頻。

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,至少指定 imgvideo 其中之一。
videoobjectY-視頻。
video.srcstringY-視頻 URL。
video.posterstringY-視頻封面。
video.typestringY-視頻媒體類型,如:application/x-mpegURL(HLS)、application/dash+xml(MPEG DASH)。
alignmentstring-start內容對齊方式:startcenterend
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

razonyang
2024年6月15日 星期六 2023年8月26日 星期六