配置简介 推荐
提示
Teek 内置了大量的主题配置,但不会影响 vitepress 原来的配置,两者是独立生效的。
主题的配置通常添加在 .vitepress/config.mts
文件中。
如下是一份简单的模板:
ts
import{defineConfig } from"vitepress";import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({});exportdefaultdefineConfig({extends:teekConfig,});
在 VitePress 配置中通过 extends
可以将主题配置合并到 VitePress 配置里,也就是说完全可以在主题配置里添加 VitePress 的 themeConfig
配置项,但是不能反过来,如:
ts
import{defineConfig } from"vitepress";import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({teekTheme:true,});exportdefaultdefineConfig({extends:teekConfig,themeConfig:{logo:"/teek-logo-mini.svg",},});
ts
import{defineConfig } from"vitepress";import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({teekTheme:true,logo:"/teek-logo-mini.svg",});exportdefaultdefineConfig({extends:teekConfig,});
Teek 的所有主题配置支持 4 种方式:
provide
:在.vitepress/theme/index.ts
通过 provide 函数注入配置项frontmatter.tk
:在 Markdown 文档的frontmatter
配置frontmatter
:在 Markdown 文档的frontmatter
配置config
:在.vitepress/config.mts
配置
警告
函数式和 Node 环境的配置项无法在 frontmatter
中配置。
优先级依次从高到低排列,如 frontmatter
的配置会覆盖 config
的配置,因此您可以在 config
全局配置,然后在部分 Markdown 文档的 frontmatter
进行局部配置覆盖。
frontmatter.tk
和 frontmatter
配置的区别
frontmatter.tk
建议在首页index.md
配置,目的是为防止和 VitePress 的冲突,而文章页建议使用frontmatter
配置。- 如果部分配置项与第三方插件的配置有冲突,也可以使用
frontmatter.tk
配置。
举个例子:
ts
importTeek,{teekConfigContext } from"vitepress-theme-teek";import"vitepress-theme-teek/index.css";import{defineComponent,h,provide } from"vue";exportdefault{extends:Teek,Layout:defineComponent({name:"TeekProvider",setup() {provide(teekConfigContext,{author:{name:"Teeker"} });return() =>h(Teek.Layout);},}),};
yaml
---tk:author:name:Teeker---
yaml
---author:name:Teeker---
ts
import{defineConfig } from"vitepress";import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({author:{name:"Teeker",},});exportdefaultdefineConfig({extends:teekConfig,});
Teek 支持的主题配置请阅读 Types文件。