Banner 配置
Banner 配置
banner
首页 Banner 配置，位于首页顶部。
Banner 配置项全部支持在首页 index.md 的 frontmatter 配置，格式为 tk.banner.[key]。
提示
在首页 index.md 的 frontmatter 中，description 配置项除了 tk.banner.description 设置，也可以使用 tk.description 设置。
ts
const tkConfig = tkThemeConfig({
banner: {
enabled: true,
bgStyle: "bigImg", // Banner 背景风格：default 为纯色背景，bigImg 为大图背景，grid 为网格背景
imgSrc: ["/img/bg1.jpg", "/img/bg2.png"], // Banner 大图链接。bgStyle 为 bigImg 时生效
descStyle: "types", // 描述信息风格：default 为纯文字渲染风格（如果 description 为数组，则取第一个），types 为文字打印风格，switch 为文字切换风格
description: ["故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt", "积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu"], // 描述信息
};
});yaml
---
tk:
banner:
enabled: true,
bgStyle: "bigImg"
imgSrc:
- /img/bg1.jpg
- /img/bg2.jpg
descStyle: "types"
# description:
# - 故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt
# - 积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu
description:
- 故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt
- 积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu
---ts
interface TkThemeConfig {
/**
* 首页 Banner 配置，支持在首页 index.md 的 frontmatter 配置，格式为 tk.banner.[key]
*/
banner?: Banner;
}
interface Banner {
/**
* 是否启用 Banner
*
* @default true
*/
enabled?: boolean;
/**
* Banner 背景风格：default 为纯色背景，bigImg 为大图背景，grid 为网格背景
*
* @default 'default'
*/
bgStyle?: "default" | "bigImg" | "grid";
/**
* Banner 背景色。bgStyle 为 default 时生效
*
* @default '#e5e5e5'
*/
defaultBgColor?: string;
/**
* Banner 大图链接。bgStyle 为 bigImg 时生效
*
* @default []
*/
imgSrc?: string | string[];
/**
* 当多张大图时（imgSrc 为数组），设置切换时间，单位：毫秒
*
* @default 15000 (15秒)
*/
imgInterval?: number;
/**
* Banner 大图遮罩，bgStyle 为 bigImg 时生效
*
* @default true
*/
mask?: boolean;
/**
* Banner 遮罩颜色，如果为数字，则是 rgba(0, 0, 0, ${maskBg})，如果为字符串，则作为背景色。bgStyle 为 bigImg 且 mask 为 true 时生效
*
* @default 'rgba(0, 0, 0, 0.4)'
*/
maskBg?: string | number;
/**
* Banner 字体颜色
*
* @default bgStyle 为 default 时为 '#000000'，其他为 '#ffffff'
*/
textColor?: string;
/**
* Banner 功能列表
*/
features?: { title: string; description?: string; link?: string; imgUrl?: 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;
/**
* 输出一个文字的时间，单位：毫秒。descStyle 为 types 时生效
*
* @default 200 (0.2秒)
*/
typesInTime?: number;
/**
* 删除一个文字的时间，单位：毫秒。descStyle 为 types 时生效
*
* @default 100 (0.1秒)
*/
typesOutTime?: number;
/**
* 打字与删字的间隔时间，单位：毫秒。descStyle 为 types 时生效
*
* @default 800 (0.8秒)
*/
typesNextTime?: number;
}wallpaper
壁纸模式，在首页最顶部进入全屏后开启，仅当 (banner.bgStyle = 'bigImg' && banner.imgSrc 不存在) 或 bodyBgImg.imgSrc 存在才生效，支持在首页 index.md 的 frontmatter 配置，格式为 tk.wallpaper.[key]。
壁纸模式下：
- 禁止通过快捷键打开开发者工具
- 禁止通过右键打开浏览器菜单
- 禁止鼠标滚动，页面滚动条会消失
ts
const tkConfig = tkThemeConfig({
wallpaper: {
enabled: false, // 是否启用壁纸模式
hideBanner: false, // 开启壁纸模式后，是否隐藏 Banner
hideMask: false, // 开启壁纸模式后，是否隐藏 Banner 或 bodyBgImage 的遮罩层，则确保 banner.mask 和 bodyBgImage.mask 为 true 才生效
hideWaves: false, // 开启壁纸模式后，是否隐藏 Banner 波浪组件，仅 banner.bgStyle = 'bigImg' 生效
};
});yaml
---
tk:
wallpaper:
enabled: false
hideBanner: false
hideMask: false
hideWaves: false
---ts
interface TkThemeConfig {
/**
* 壁纸模式，在首页最顶部进入全屏后开启，仅当 (banner.bgStyle = 'bigImg' && banner.imgSrc 不存在) 或 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 = 'bigImg' 生效
*
* @default false
*/
hideWaves?: boolean;
};
}提示
壁纸模式下，会把 class="tk-wallpaper-outside" 的元素隐藏，因此在壁纸模式下需要隐藏自定义的元素，可以给 class 加上 tk-wallpaper-outside。