Banner 配置
banner
首页 Banner 配置，位于首页顶部。
提示
在首页 index.md 的 frontmatter 中，description 配置项除了 tk.banner.description 设置，也可以使用 tk.description 设置。
ts
// .vitepress/config.mts
import { defineTeekConfig } from "vitepress-theme-teek/config";
const teekConfig = defineTeekConfig({
banner: {
enabled: true,
name: "Teek", // Banner 标题，默认读取 vitepress 的 title 属性
bgStyle: "fullImg", // Banner 背景风格：pure 为纯色背景，partImg 为局部图片背景，fullImg 为全屏图片背景
pureBgColor: "#28282d", // Banner 背景色，bgStyle 为 pure 时生效
imgSrc: ["/img/bg1.jpg", "/img/bg2.png"], // Banner 图片链接。bgStyle 为 partImg 或 fullImg 时生效
imgInterval: 15000, // 当多张图片时（imgSrc 为数组），设置切换时间，单位：毫秒
imgShuffle: false, // 图片是否随机切换，为 false 时按顺序切换，bgStyle 为 partImg 或 fullImg 时生效
imgWaves: true, // 是否开启 Banner 图片波浪纹，bgStyle 为 fullImg 时生效
mask: true, // Banner 图片遮罩，bgStyle 为 partImg 或 fullImg 时生效
maskBg: "rgba(0, 0, 0, 0.4)", // Banner 遮罩颜色，如果为数字，则是 rgba(0, 0, 0, ${maskBg})，如果为字符串，则作为背景色。bgStyle 为 partImg 或 fullImg 且 mask 为 true 时生效
textColor: "#ffffff", // Banner 字体颜色，bgStyle 为 pure 时为 '#000000'，其他为 '#ffffff'
titleFontSize: "3.2rem", // 标题字体大小
descFontSize: "1.4rem", // 描述字体大小
descStyle: "types", // 描述信息风格：default 为纯文字渲染风格（如果 description 为数组，则取第一个），types 为文字打印风格，switch 为文字切换风格
description: ["故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt", "积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu"], // 描述信息
switchTime: 4000, // 描述信息切换间隔时间，单位：毫秒。descStyle 为 switch 时生效
switchShuffle: false, // 描述信息是否随机切换，为 false 时按顺序切换。descStyle 为 switch 时生效
typesInTime: 200, // 输出一个文字的时间，单位：毫秒。descStyle 为 types 时生效
typesOutTime: 100, // 删除一个文字的时间，单位：毫秒。descStyle 为 types 时生效
typesNextTime: 800, // 打字与删字的间隔时间，单位：毫秒。descStyle 为 types 时生效
typesShuffle: false, // 描述信息是否随机打字，为 false 时按顺序打字，descStyle 为 types 时生效
};
});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
yaml
---
tk:
banner:
enabled: true,
name: Teek,
bgStyle: "fullImg"
pureBgColor: "#28282d"
imgSrc:
- /img/bg1.jpg
- /img/bg2.jpg
imgInterval: 15000
imgShuffle: false
mask: true
maskBg: "rgba(0, 0, 0, 0.4)"
textColor: "#ffffff"
titleFontSize: "3.2rem"
descFontSize: "1.4rem"
descStyle: "types"
# description: # 也支持 tk.description
# - 故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt
# - 积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu
switchTime: 4000
switchShuffle: false
typesInTime: 200
typesOutTime: 100
typesNextTime: 800
typesShuffle: false
description:
- 故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt
- 积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu
---1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
ts
interface Banner {
/**
* 是否启用 Banner
*
* @default true
*/
enabled?: boolean;
/**
* Banner 标题
* @default 'vitepress 的 title 属性'
*/
name?: string;
/**
* Banner 背景风格：pure 为纯色背景，partImg 为局部图片背景，fullImg 为全屏图片背景
*
* @default 'default'
*/
bgStyle?: "pure" | "partImg" | "fullImg";
/**
* Banner 背景色。bgStyle 为 pure 时生效
*
* @default '#28282d'
*/
pureBgColor?: string;
/**
* Banner 图片链接。bgStyle 为 partImg 或 fullImg 时生效
*
* @default []
*/
imgSrc?: string | string[];
/**
* 当多张图片时（imgSrc 为数组），设置切换时间，单位：毫秒，bgStyle 为 partImg 或 fullImg 时生效
*
* @default 15000 (15秒)
*/
imgInterval?: number;
/**
* 图片是否随机切换，为 false 时按顺序切换，bgStyle 为 partImg 或 fullImg 时生效
*
* @default false
*/
imgShuffle?: boolean;
/**
* 是否开启 Banner 图片波浪纹，bgStyle 为 fullImg 时生效
*
* @default true
*/
imgWaves?: boolean;
/**
* Banner 图片遮罩，bgStyle 为 partImg 或 fullImg 时生效
*
* @default true
*/
mask?: boolean;
/**
* Banner 遮罩颜色，如果为数字，则是 rgba(0, 0, 0, ${maskBg})，如果为字符串，则作为背景色。bgStyle 为 partImg 或 fullImg 且 mask 为 true 时生效
*
* @default 'rgba(0, 0, 0, 0.4)'
*/
maskBg?: string | number;
/**
* Banner 字体颜色
*
* @default ' #ffffff'
*/
textColor?: string;
/**
* 标题字体大小
*
* @default '3.2rem'
*/
titleFontSize?: string;
/**
* 描述字体大小
*
* @default '1.4rem'
*/
descFontSize?: string;
/**
* 描述信息风格：default 为纯文字渲染风格（如果 description 为数组，则取第一个），types 为文字打印风格，switch 为文字切换风格
*
* @default 'default'
*/
descStyle?: "default" | "types" | "switch";
/**
* 描述信息，在首页 index.md 的 frontmatter 中，除了 tk.banner.description 设置，也可以使用 tk.description 设置
*
* @default ''
*/
description?: string | string[];
/**
* 描述信息切换间隔时间，单位：毫秒。descStyle 为 switch 时生效
*
* @default 4000 (4秒)
*/
switchTime?: number;
/**
* 描述信息是否随机切换，为 false 时按顺序切换。descStyle 为 switch 时生效
*
* @default false
*/
switchShuffle?: boolean;
/**
* 输出一个文字的时间，单位：毫秒。descStyle 为 types 时生效
*
* @default 200 (0.2秒)
*/
typesInTime?: number;
/**
* 删除一个文字的时间，单位：毫秒。descStyle 为 types 时生效
*
* @default 100 (0.1秒)
*/
typesOutTime?: number;
/**
* 打字与删字的间隔时间，单位：毫秒。descStyle 为 types 时生效
*
* @default 800 (0.8秒)
*/
typesNextTime?: number;
/**
* 描述信息是否随机打字，为 false 时按顺序打字，descStyle 为 types 时生效
*
* @default false
*/
typesShuffle?: boolean;
/**
* Banner 新特性列表
*/
features?: { title: string; description?: string; link?: string; imgUrl?: string }[];
/**
* feature 轮播间隔时间，单位：毫秒。仅在移动端生效（屏幕小于 719px）
*
* @default 4000
*/
featureCarousel?: number;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
wallpaper
壁纸模式，在首页 最顶部 进入全屏后开启，仅当 banner.bgStyle = 'fullImg' 或 bodyBgImg.imgSrc 存在才生效。
壁纸模式下：
- 禁止通过快捷键打开开发者工具
- 禁止通过右键打开浏览器菜单
- 禁止鼠标滚动，页面滚动条会消失
除此之外，你可以通过配置额外隐藏一些元素。
ts
// .vitepress/config.mts
import { defineTeekConfig } from "vitepress-theme-teek/config";
const teekConfig = defineTeekConfig({
wallpaper: {
enabled: false, // 是否启用壁纸模式
hideBanner: false, // 开启壁纸模式后，是否隐藏 Banner
hideMask: false, // 开启壁纸模式后，是否隐藏 Banner 或 bodyBgImage 的遮罩层，则确保 banner.mask 和 bodyBgImage.mask 为 true 才生效
hideWaves: false, // 开启壁纸模式后，是否隐藏 Banner 波浪组件，仅 banner.bgStyle = 'fullImg' 生效
};
});1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
yaml
---
tk:
wallpaper:
enabled: false
hideBanner: false
hideMask: false
hideWaves: false
---1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
ts
interface Wallpaper {
/**
* 是否启用壁纸模式
*
* @default false
*/
enabled?: boolean;
/**
* 开启壁纸模式后，是否隐藏 Banner 文字
*
* @default false
*/
hideBanner?: boolean;
/**
* 开启壁纸模式后，是否隐藏 Banner 或 bodyBgImage 的遮罩层，则确保 banner.mask 和 bodyBgImage.mask 为 true 才生效
*
* @default false
*/
hideMask?: boolean;
/**
* 开启壁纸模式后，是否隐藏 Banner 波浪组件，仅 banner.bgStyle = 'fullImg' 生效
*
* @default false
*/
hideWaves?: boolean;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
壁纸模式下，会把 class="tk-wallpaper-outside" 的元素隐藏，因此在壁纸模式下需要隐藏自定义的元素，可以给 class 加上 tk-wallpaper-outside。