配置简介 推荐
提示
Teek 提供了非常丰富的功能,但是很多功能默认是不开启的,需要通过配置项来选择开启或者关闭。
所有 Teek 配置项不会影响 VitePress 本身的配置,两者是独立生效的。
VitePress 的配置通常添加在 .vitepress/config.mts 文件中(没有请创建),而为了区分 Teek 的配置项,我们需要在 config.mts 同级创建 teekConfig.mts 文件,即路径为 .vitepress/teekConfig.mts。
ts
// .vitepress/teekConfig.mts
import { defineTeekConfig } from "vitepress-theme-teek/config";
// Teek 主题配置,所有 Teek 配置都放到 ... 中
export const teekConfig = defineTeekConfig({
// ...
});ts
// .vitepress/config.mts
import { defineConfig } from "vitepress";
import { teekConfig } from "./teekConfig";
// VitePress 配置
export default defineConfig({
extends: teekConfig, // 注册 Teek 主题配置
// ...
});第一个代码块介绍如何添加 Teek 配置项,第二个代码块介绍在 VitePress 配置中通过 extends 可以将主题配置合并到 VitePress 配置里,这两步必不可少。
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
// .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);
},
}),
};yaml
---
tk:
author:
name: Teeker
---yaml
---
author:
name: Teeker
---ts
// .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 文件。
侧边栏的主题配置专题已经按照模块进行划分,如:
- 全局配置讲述对全局生效的配置说明
- Banner 配置讲述对博客风格首页 Banner 模块配置
- 文章列表配置讲述对博客风格首页的文章列表模块配置
- ...
接下来请在侧边栏选择自己要配置的模块文章进行阅读。
提示
如果您不想通过多个文章来了解一堆配置项,您可以直接看 配置模板,该文件内容涵盖 Teek 95% 的配置项介绍,您可以根据需要复制到 .vitepress/teekConfig.mts 文件中,进行配置。