頁頭橫幅
於頁頭展現一幅圖片或一段視頻。
於頁頭展現一幅圖片或一段視頻。
| Module | github.com/hbstack/header/modules/banner |
|---|---|
| Repository | ⭐ Please consider giving a star if your like it. |
| Stars |  |
| Version |  |
| Used by |  |
| Requirements |  |
| License |  |
| Usage | See how to use modules. |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
img | string | Y | - | 圖片 URL，至少指定 img 或 video 其中之一。 |
video | object | Y | - | 視頻。 |
video.src | string | Y | - | 視頻 URL。 |
video.poster | string | Y | - | 視頻封面。 |
video.type | string | Y | - | 視頻媒體類型，如：application/x-mpegURL（HLS）、application/dash+xml（MPEG DASH）。 |
alignment | string | - | start | 內容對齊方式：start、center 或 end。 |
color | string | - | #fff | 內容顏色。 |
cols | string | - | 12 lg:8 | 內容佔用的列數，默認爲：col-12 col-lg-8。 |
title | boolean/string | - | Page title | 橫幅的標題，支持 Markdown，false 則隱藏。 |
description | boolean/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}
