全局配置
全局配置是影响范围较广的配置。
teekTheme
- 类型：
boolean - 默认值：
true
是否启用主题，如果为 false，则不会启用主题的 99% 功能，只保留如下功能：
- 自动添加侧边栏
- 自动添加一级标题
- 自动添加永久链接
- 文档内容分析（作者、创建时间、文章字数、预计阅读时间等信息）
- 锚点滚动
- 深色/浅色模式过渡动画
提示
如果您仍然想要关闭这些部分功能，Teek 也提供了相关配置项来关闭。
配置如下：
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({teekTheme:true,});提示
如果想全部清除 Teek 的功能，那么在 .vitepress/theme/index.ts文件里去掉 Teek 引用。
teekHome
- 类型：
boolean - 默认值：
true
是否启用 Teek 的首页风格，如果为 false，则还原到 VitePress 的默认首页，其他功能不变。
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({teekHome:true,});yaml
---tk:teekHome:true---vpHome
- 类型：
boolean - 默认值：
true
是否启用 VitePress 首页风格，支持 teekHome和 vpHome同时存在。
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({vpHome:true,});yaml
---tk:vpHome:true---homeCardListPosition v1.2.0
- 类型：
left|right - 默认值：
right
首页卡片栏列表位置，当为 left则在文章列表左侧，当为 right则在文章列表右侧。
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({homeCardListPosition:"right",});anchorScroll
- 类型：
boolean - 默认值：
true
是否启用锚点滚动功能，即阅读文章时，自动将 h1 ~h6标题添加到地址栏 #后面。
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({anchorScroll:true,});viewTransition
- 类型：
boolean - 默认值：
true
深色、浅色模式切换时是否开启过渡动画。
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({viewTransition:true,});themeSize
- 类型：
small|default|large|wide - 默认值：
default
配置主题尺寸。只影响 Teek 主题首页和功能页，不影响 VitePress 默认主题。
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeSize:"large",});backTopDone
- 类型：
(TkMessage:Message) =>void
右下角回到顶部按钮的回调，可以利用 TkMessage的方法如 TkMessage.success("返回顶部成功")进行提示。
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({backTopDone:TkMessage=>TkMessage.success("返回顶部成功"),});toCommentDone
- 类型：
(TkMessage:Message) =>void
右下角滚动到评论按钮的回调，使用方式于 backTopDone一样。
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({toCommentDone:TkMessage=>TkMessage.success("已抵达评论区"),});codeBlock
新版代码块配置，在 details容器下恢复为默认代码块风格。
提示
Teek 文档使用的是新版代码块。
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({codeBlock:{disabled:false,collapseHeight:700,copiedDone:(TkMessage:Message) =>TkMessage.success("复制成功！"),},});yaml
---codeBlock:disabled:falsecollapseHeight:700---ts
interfaceCodeBlock{disabled?:boolean;collapseHeight?:number|boolean;copiedDone?:(TkMessage:Message) =>void;}新版代码块的语言默认为大写，如果希望为小写或者首字母大写，通过修改 css var的 tk-code-block-lang-transform来达成目标。
提示
tk-code-block-lang-transform的值等于 CSS 中 text-transform的值。
先定义一个 css文件：
css
:root{tk-code-block-lang-transform:lowercase;}在 .vitepress/theme/index.ts文件引入该 css文件：
ts
importTeek from"vitepress-theme-teek";import"vitepress-theme-teek/index.css";import"./style/tk-code-style.css";exportdefault{extends:Teek,};bodyBgImg
body 背景图片配置，将整个网站的背景色改为图片。
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({bodyBgImg:{imgSrc:["/img/bg1.jpg","/img/bg2.png"],imgOpacity:1,imgInterval:15000,imgShuffle:false,mask:false,maskBg:"rgba(0,0,0,0.2)",};});yaml
---bodyBgImg:imgSrc:- /img/bg1.jpg- /img/bg2.pngimgOpacity:1imgInterval:15000imgShuffle:falsemask:falsemaskBg:"rgba(0,0,0,0.2)"---ts
interfaceBodyBgImg{imgSrc?:string|string[];imgOpacity?:0.1|0.2|0.3|0.4|0.5|0.6|0.7|0.8|0.9|1;imgInterval?:number;imgShuffle?:boolean;mask?:boolean;maskBg?:string|number;}提示
bodyBgImg设置了 imgSrc后，banner的图片风格会失效。
themeEnhance v1.1.0
主题增强配置，当开启后，右上角将有主题增强面板出现。
关于如何使用请看 主题增强，关于如何拓展自定义主题请看 主题增强拓展。
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{position:"top",layoutSwitch:{disabled:false,defaultMode:"original"},themeColor:{disabled:false,defaultColor:"vp-default",defaultSpread:false},spotlight:{disabled:false,defaultStyle:"aside",defaultValue:true}};});ts
importtype{ThemeColor,LayoutMode,SpotlightStyle } from"vitepress-theme-teek";interfaceThemeEnhance{position?:"top"|"bottom";layoutSwitch?:{disabled?:boolean;defaultMode?:LayoutMode|"fullWidth"|"sidebarWidthAdjustableOnly"|"bothWidthAdjustable"|"original";switchModeDone?:(mode:LayoutMode|"fullWidth"|"sidebarWidthAdjustableOnly"|"bothWidthAdjustable"|"original") =>void;disableHelp?:boolean;disableAnimation?:boolean;defaultDocMaxWidth?:number;disableDocMaxWidthHelp?:boolean;defaultPageMaxWidth?:number;disablePageMaxWidthHelp?:boolean;};themeColor?:{disabled?:boolean;defaultColor?:|ThemeColor|"vp-default"|"vp-green"|"vp-yellow"|"vp-red"|"ep-blue"|"ep-green"|"ep-yellow"|"ep-red";switchColorDone?:(color:string) =>void;defaultSpread?:boolean;disableHelp?:boolean;disabledInMobile?:boolean;append?:{label:string;tip?:string;options:{label:string;value:string;}[];}[];};spotlight?:{disabled?:boolean;defaultStyle?:SpotlightStyle|"aside"|"under";disableHelp?:boolean;defaultValue?:boolean;};}author
文章默认的作者信息。
在首页的文章列表和文章页使用该功能。
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({author:{name:"Teeker",link:"https:};});yaml
---author:name:"Teeker"link:"https:---ts
interfaceAuthor{name:string;link?:string;}notice
公告配置。
公告组件只提供基础功能，不提供任何内容的渲染，需要您自定义组件，然后在 .vitepress/theme/index.ts中通过 teek-notice-content插槽传进来。
使用如下：
ts
importTeek from"vitepress-theme-teek";import"vitepress-theme-teek/index.css";importMyNoticeContent from"./components/MyNoticeContent.vue";import{h } from"vue";exportdefault{extends:Teek,Layout() {returnh(Teek.Layout,null,{"teek-notice-content":() =>h(MyNoticeContent),});},};配置如下：
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({notice:{enabled:true,title:"公告",initOpen:true,duration:0,mobileMinify:false,reopen:true,useStorage:true,twinkle:false,position:"top",},});yaml
---notice:enabled:truetitle:"公告"initOpen:trueduration:0mobileMinify:falsereopen:trueuseStorage:truetwinkle:falseposition:"top"---ts
importtype{Route } from"vitepress";importtype{IconProps } from"vitepress-theme-teek";interfaceNotice{enabled?:boolean;noticeStyle?:string;iconStyle?:Record<string,any>;popoverStyle?:Record<string,any>;title?:string|((localeIndex:string) =>string);initOpen?:boolean;duration?:number;mobileMinify?:boolean;reopen?:boolean;useStorage?:boolean;twinkle?:boolean;position?:"top"|"center";noticeIcon?:IconProps["icon"];closeIcon?:IconProps["icon"];onAfterRouteChange?:(to:Route,noticeShow:boolean,showPopover:boolean) =>void;}siteAnalytics
站点分析配置，目前集成了三种常见的站点统计工具：
- 百度分析
Baidu Analytics - 谷歌分析
Google Analytics Umami分析
具体使用说明请看 站点统计。
使用如下：
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({siteAnalytics:[{provider:"google",options:{id:"******",},},{provider:"baidu",options:{id:"******",},},{provider:"umami",options:{id:"******",src:"**",},},],});ts
importtype{BaiduAnalyticsOptions,GoogleAnalyticsOptions,UmamiAnalyticsOptions } from"vitepress-theme-teek";typeSiteAnalytics<TextendskeyofSiteAnalyticsProvider="">={provider:T;options?:SiteAnalyticsProvider[T];};typeSiteAnalyticsProvider={"":object;baidu:BaiduAnalyticsOptions;google:GoogleAnalyticsOptions;umami:UmamiAnalyticsOptions;};