Banner 配置
banner
首页 Banner 配置，位于首页顶部。
Banner 配置项全部支持在首页 index.md 的 frontmatter 配置，格式为 tk.banner.[key]。
提示
在首页 index.md 的 frontmatter 中，description 配置项除了 tk.banner.description 设置，也可以使用 tk.description 设置。
ts
// .vitepress/config.ts
import defineTeekConfig from "vitepress-theme-teek/config";
const teekConfig = defineTeekConfig({
banner: {
enabled: true,
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 时生效
};
});yaml
---
tk:
banner:
enabled: true,
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
---ts
interface TkThemeConfig {
/**
* 首页 Banner 配置，支持在首页 index.md 的 frontmatter 配置，格式为 tk.banner.[key]
*/
banner?: Banner;
}
export interface Banner {
/**
* 是否启用 Banner
*
* @default true
*/
enabled?: boolean;
/**
* 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 'bgStyle 为 pure 时为 #000000，其他为 #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;
}wallpaper
壁纸模式，在首页 最顶部 进入全屏后开启，仅当 banner.bgStyle = 'fullImg' 或 bodyBgImg.imgSrc 存在才生效，支持在首页 index.md 的 frontmatter 配置，格式为 tk.wallpaper.[key]。
壁纸模式下：
- 禁止通过快捷键打开开发者工具
- 禁止通过右键打开浏览器菜单
- 禁止鼠标滚动，页面滚动条会消失
除此之外，你可以通过配置额外隐藏一些元素。
ts
// .vitepress/config.ts
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' 生效
};
});yaml
---
tk:
wallpaper:
enabled: false
hideBanner: false
hideMask: false
hideWaves: false
---ts
interface TkThemeConfig {
/**
* 壁纸模式，在首页最顶部进入全屏后开启，仅当 banner.bgStyle = 'fullImg' 或 bodyBgImg.imgSrc 存在才生效
*/
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;
};
}壁纸模式下，会把 class="tk-wallpaper-outside" 的元素隐藏，因此在壁纸模式下需要隐藏自定义的元素，可以给 class 加上 tk-wallpaper-outside。