配置简介

提示

Teek 内置了大量的主题配置，但不会影响 vitepress 原来的配置，两者是独立生效的。

主题的配置通常添加在 .vitepress/config.mts 文件中。

如下是一份简单的模板：

// .vitepress/config.mts
import { defineConfig } from 'vitepress'
import { defineTeekConfig } from 'vitepress-theme-teek/config'

// Teek 主题配置
const teekConfig = defineTeekConfig({
  // ...
})

// VitePress 配置
export default defineConfig({
  extends: teekConfig,
  // ...
})

在 VitePress 配置中通过 extends 可以将主题配置合并到 VitePress 配置里，也就是说完全可以在主题配置里添加 VitePress 的 themeConfig 配置项，但是不能反过来，如：

各自配置

// .vitepress/config.mts
import { defineConfig } from 'vitepress'
import { defineTeekConfig } from 'vitepress-theme-teek/config'

// Teek 主题配置
const teekConfig = defineTeekConfig({
  teekTheme: true,
})

// VitePress 配置
export default defineConfig({
  extends: teekConfig,
  themeConfig: {
    logo: '/teek-logo-mini.svg',
  },
})

统一配置

// .vitepress/config.mts
import { defineConfig } from 'vitepress'
import { defineTeekConfig } from 'vitepress-theme-teek/config'

// Teek 主题配置 + VitePress 的 themeConfig 配置
const teekConfig = defineTeekConfig({
  teekTheme: true,
  logo: '/teek-logo-mini.svg',
})

export default defineConfig({
  extends: teekConfig,
})

Teek 的所有主题配置支持 4 种方式：

1. provide：在 .vitepress/theme/index.ts 通过 provide 函数注入配置项
2. frontmatter.tk：在 Markdown 文档的 frontmatter 配置
3. frontmatter：在 Markdown 文档的 frontmatter 配置
4. config：在 .vitepress/config.mts 配置

警告

函数式和 Node 环境的配置项无法在 frontmatter 中配置。

优先级依次从高到低排列，如 frontmatter 的配置会覆盖 config 的配置，因此您可以在 config 全局配置，然后在部分 Markdown 文档的 frontmatter 进行局部配置覆盖。

frontmatter.tk 和 frontmatter 配置的区别

• frontmatter.tk 建议在首页 index.md 配置，目的是为防止和 VitePress 的冲突，而文章页建议使用 frontmatter 配置。
• 如果部分配置项与第三方插件的配置有冲突，也可以使用 frontmatter.tk 配置。

举个例子：

provide

// .vitepress/theme/index.ts
import Teek, { teekConfigContext } from 'vitepress-theme-teek'
import 'vitepress-theme-teek/index.css'
import { defineComponent, h, provide } from 'vue'

export default {
  extends: Teek,
  Layout: defineComponent({
    name: 'TeekProvider',
    setup() {
      provide(teekConfigContext, { author: { name: 'Teeker' } })
      return () => h(Teek.Layout)
    },
  }),
}

frontmatter.tk

---
tk:
  author:
    name: Teeker
---

frontmatter

---
author:
  name: Teeker
---

config

// .vitepress/config.mts
import { defineConfig } from 'vitepress'
import { defineTeekConfig } from 'vitepress-theme-teek/config'

const teekConfig = defineTeekConfig({
  author: {
    name: 'Teeker',
  },
})

export default defineConfig({
  extends: teekConfig,
})

Teek 支持的主题配置请阅读 Types 文件。