One

主题

2025-03-09配置配置
1583
6.7m
Get...

Banner 配置 ​

首页 Banner 配置，位于首页顶部。

提示

在首页 index.md的 frontmatter中，description配置项除了 tk.banner.description设置，也可以使用 tk.description设置。

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({banner:{enabled:true,name:"Teek",bgStyle:"fullImg",pureBgColor:"#28282d",imgSrc:["/img/bg1.jpg","/img/bg2.png"],imgInterval:15000,imgShuffle:false,imgWaves:true,mask:true,maskBg:"rgba(0,0,0,0.4)",textColor:"#ffffff",titleFontSize:"3.2rem",descFontSize:"1.4rem",descStyle:"types",description:["故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt","积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu"],switchTime:4000,switchShuffle:false,typesInTime:200,typesOutTime:100,typesNextTime:800,typesShuffle:false,};});
yaml
---tk:banner:enabled:true,name:Teek,bgStyle:"fullImg"pureBgColor:"#28282d"imgSrc:- /img/bg1.jpg- /img/bg2.jpgimgInterval:15000imgShuffle:falsemask:truemaskBg:"rgba(0,0,0,0.4)"textColor:"#ffffff"titleFontSize:"3.2rem"descFontSize:"1.4rem"descStyle:"types"# description:# 也支持 tk.description# - 故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt# - 积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan XuswitchTime:4000switchShuffle:falsetypesInTime:200typesOutTime:100typesNextTime:800typesShuffle:falsedescription:- 故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt- 积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu---
ts
interfaceBanner{enabled?:boolean;name?:string;bgStyle?:"pure"|"partImg"|"fullImg";pureBgColor?:string;imgSrc?:string|string[];imgInterval?:number;imgShuffle?:boolean;imgWaves?:boolean;mask?:boolean;maskBg?:string|number;textColor?:string;titleFontSize?:string;descFontSize?:string;descStyle?:"default"|"types"|"switch";description?:string|string[];switchTime?:number;switchShuffle?:boolean;typesInTime?:number;typesOutTime?:number;typesNextTime?:number;typesShuffle?:boolean;features?:{title:string;description?:string;link?:string;imgUrl?:string}[];featureCarousel?:number;}

wallpaper ​

壁纸模式，在首页 最顶部进入全屏后开启，仅当 banner.bgStyle ='fullImg'或 bodyBgImg.imgSrc存在才生效。

壁纸模式下：

  • 禁止通过快捷键打开开发者工具
  • 禁止通过右键打开浏览器菜单
  • 禁止鼠标滚动，页面滚动条会消失

除此之外，你可以通过配置额外隐藏一些元素。

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({wallpaper:{enabled:false,hideBanner:false,hideMask:false,hideWaves:false,};});
yaml
---tk:wallpaper:enabled:falsehideBanner:falsehideMask:falsehideWaves:false---
ts
interfaceWallpaper{enabled?:boolean;hideBanner?:boolean;hideMask?:boolean;hideWaves?:boolean;}

壁纸模式下，会把 class="tk-wallpaper-outside"的元素隐藏，因此在壁纸模式下需要隐藏自定义的元素，可以给 class加上 tk-wallpaper-outside。

最近更新