Skip to content

主题增强

Teek 内置了 4 种布局模式、8 种主题风格可供切换,请将鼠标移到右上角的主题增强面板进行体验。

布局模式

4 种布局模式分别为:

  • fullWidth:全部展开,使侧边栏和内容区域占据整个屏幕的全部宽度
  • sidebarWidthAdjustableOnly:全部展开,侧边栏宽度可调,但内容区域宽度不变,调整后的侧边栏将可以占据整个屏幕的最大宽度
  • bothWidthAdjustable:全部展开,侧边栏和内容区域宽度均可调,调整后的侧边栏和内容区域将可以占据整个屏幕的最大宽度
  • original:原始的 VitePress 默认布局宽度

可以通过主题配置的 themeEnhance.layoutSwitch.defaultMode来覆盖默认值,默认为 original

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{layoutSwitch:{defaultMode:"bothWidthAdjustable",},},});

当处于 bothWidthAdjustable布局模式下,您可以控制默认的页面最大宽度和内容最大宽度。

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{layoutSwitch:{defaultMode:"bothWidthAdjustable",defaultDocMaxWidth:90,defaultPageMaxWidth:90,},},});

提示

defaultDocMaxWidthdefaultPageMaxWidth的值仅限 0-100。

如果希望隐藏布局模式切换功能(不允许用户手动切换),可以设置 themeEnhance.layoutSwitch.disabledtrue

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{layoutSwitch:{disabled:true,},},});

主题风格

8 种主题风格分别为 vp-defaultvp-greenvp-yellowvp-redep-blueep-greenep-yellowep-red

其中 vp-开头的使用 VitePress 内置的颜色,ep-开头的使用 ElementPlus 的颜色。

可以通过主题配置的 themeEnhance.themeColor.defaultColor来覆盖默认值,默认为 vp-default

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{themeColor:{defaultColor:"ep-blue",},},});

如果希望隐藏主题风格切换功能(不允许用户手动切换),可以设置 themeEnhance.themeColor.disabledtrue

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{themeColor:{disabled:true,},},});

聚光灯 v1.1.0

可以通过主题配置的 themeEnhance.spotlight.defaultValue来覆盖默认值,默认为 true

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{spotlight:{defaultValue:true,},},});

如果希望隐藏聚光灯功能(不允许用户手动切换),可以设置 themeEnhance.spotlight.disabledtrue

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{spotlight:{disabled:true,},},});

文档单独配置

Teek 支持在 Markdown 的 frontmatter单独进行如下配置来覆盖全局的设置。

yaml
---layoutMode:bothWidthAdjustablethemeColor:ep-bluespotlight:false---

功能参考

最近更新