主题增强
Teek 内置了 4 种布局模式、8 种主题风格可供切换,请将鼠标移到右上角的主题增强面板进行体验。
布局模式
4 种布局模式分别为:
fullWidth
:全部展开,使侧边栏和内容区域占据整个屏幕的全部宽度sidebarWidthAdjustableOnly
:全部展开,侧边栏宽度可调,但内容区域宽度不变,调整后的侧边栏将可以占据整个屏幕的最大宽度bothWidthAdjustable
:全部展开,侧边栏和内容区域宽度均可调,调整后的侧边栏和内容区域将可以占据整个屏幕的最大宽度original
:原始的 VitePress 默认布局宽度
可以通过主题配置的 themeEnhance.layoutSwitch.defaultMode
来覆盖默认值,默认为 original
。
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{layoutSwitch:{defaultMode:"bothWidthAdjustable",},},});
当处于 bothWidthAdjustable
布局模式下,您可以控制默认的页面最大宽度和内容最大宽度。
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{layoutSwitch:{defaultMode:"bothWidthAdjustable",defaultDocMaxWidth:90,defaultPageMaxWidth:90,},},});
提示
defaultDocMaxWidth
和 defaultPageMaxWidth
的值仅限 0-100。
如果希望隐藏布局模式切换功能(不允许用户手动切换),可以设置 themeEnhance.layoutSwitch.disabled
为 true
:
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{layoutSwitch:{disabled:true,},},});
主题风格
8 种主题风格分别为 vp-default
、vp-green
、vp-yellow
、vp-red
、ep-blue
、ep-green
、ep-yellow
、ep-red
。
其中 vp-
开头的使用 VitePress 内置的颜色,ep-
开头的使用 ElementPlus 的颜色。
可以通过主题配置的 themeEnhance.themeColor.defaultColor
来覆盖默认值,默认为 vp-default
。
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{themeColor:{defaultColor:"ep-blue",},},});
如果希望隐藏主题风格切换功能(不允许用户手动切换),可以设置 themeEnhance.themeColor.disabled
为 true
:
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{themeColor:{disabled:true,},},});
聚光灯 v1.1.0
可以通过主题配置的 themeEnhance.spotlight.defaultValue
来覆盖默认值,默认为 true
。
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{spotlight:{defaultValue:true,},},});
如果希望隐藏聚光灯功能(不允许用户手动切换),可以设置 themeEnhance.spotlight.disabled
为 true
:
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({themeEnhance:{spotlight:{disabled:true,},},});
文档单独配置
Teek 支持在 Markdown 的 frontmatter
单独进行如下配置来覆盖全局的设置。
---layoutMode:bothWidthAdjustablethemeColor:ep-bluespotlight:false---