於頁頭展現一幅圖片或一段視頻。
成為我們的資助者或贊助商,以支持我們的工作。
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}