One

主题

2025-03-092025-06-26配置配置
1521
6.8m
Get...

插件配置 ​

vitePlugins ​

内置 Vite 插件配置。

Teek 内置的 Vite 插件详细介绍请看 Vite 插件。

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({vitePlugins:{sidebar:true,sidebarOption:{},permalink:true,permalinkOption:{},mdH1:true,catalogueOption:{},docAnalysis:true,docAnalysisOption:{},fileContentLoaderIgnore:[],autoFrontmatter:true,autoFrontmatterOption:{permalinkPrefix:"pages",categories:true,},},});
ts
importtype{PermalinkOption } from"vitepress-plugin-permalink";importtype{SidebarOption } from"vitepress-plugin-sidebar-resolve";importtype{CatalogueOption } from"vitepress-plugin-catalogue";importtype{DocAnalysisOption } from"vitepress-plugin-doc-analysis";importtype{AutoFrontmatterOption } from"plugins/vitepress-plugin-auto-frontmatter";interfacePlugins{sidebar?:boolean;sidebarOption?:SidebarOption;permalink?:boolean;permalinkOption?:PermalinkOption;mdH1?:boolean;catalogueOption?:CatalogueOption;docAnalysis?:boolean;docAnalysisOption?:DocAnalysisOption;fileContentLoaderIgnore?:string[];autoFrontmatter?:boolean;autoFrontmatterOption?:AutoFrontmatterOption&{permalinkPrefix?:string;categories?:boolean};}

markdown ​

您可以对 Teek 内置的 Markdown 容器进行一些配置。

Teek 内置的 Markdown 插件详细介绍请看 Markdown 拓展。

config ​

通过该 config函数来加载更多的 Markdown-it插件。

危险

请不要在使用 VitePress 提供 markdown.config函数来加载 Markdown-it插件，因为 VitePress 方式会覆盖主题内置的 Markdown-it插件。

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";importmyMdPlugin from"my-md-plugin";constteekConfig=defineTeekConfig({markdown:{config:md=>{md.use(myMdPlugin);},},});
ts
importtypeMarkdownIt from"markdown-it";Markdown {config?:(md:MarkdownIt) =>void;}

container ​

Teek 内置的 Markdown 容器配置，配置项如下：

ts
interfaceMarkdown{container?:{label?:{noteLabel?:string;};config?:() =>{type:string;useTitle?:boolean;defaultTitle?:string;className?:string;}[];};}

容器配置 ​

Note 容器默认的标题是 Note，您可以通过修改其默认值，这在国际化环境下很有帮助：

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";importmyMdPlugin from"my-md-plugin";constteekConfig=defineTeekConfig({markdown:{container:{label:{noteLabel:"笔记",},},},});

自定义容器 ​

Teek 支持自定义 Markdown容器配置。

通过 markdown.container.config函数可以快速创建出类似于 Teek 内置的 center和 right容器或 VitePress 的 info、tip、warning、danger容器。

先看例子：

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({markdown:{container:{config:() =>[{type:"demo1",useTitle:true,defaultTitle:"demo1",className:"demo1-container"},{type:"demo2",useTitle:false,className:"demo2-container"},],},},});

示例中，我们创建了两个容器，其中第一个容器 demo1通过 useTitle:true来支持输入标题，如果不输入标题，则使用默认标题 demo1。

容器使用如下：

markdown
:::demo1测试 demo1 容器::::::demo1 容器标题测试 demo1 容器::::::demo2测试 demo2 容器:::

生成的 HTML 结构如下：

html
<divclass="demo1 demo1-container"><pclass="title demo1-title demo1-container-title">demo1</p><p>测试 demo1 容器</p></div<divclass="demo1 demo1-container"><pclass="title demo1-title demo1-container-title">容器标题</p><p>测试 demo1 容器</p></div<divclass="demo2 demo2-container"><p>测试 demo2 容器</p></div

HTML 模板如下：

html
<divclass="${type} ${className}"><pclass="title ${type}-title ${className}-title">${defaultTitle ||传入标题}</p><p>${输入的内容}</p></div
html
<divclass="${type} ${className}"><p>${输入的内容}</p></div

虽然 Teek 按照 HTML 模板进行渲染，但是并没有提供 CSS 样式，您需要对 class来自定义样式，如：

scss
.demo1-container{font-size:16px;.title{font-size:18px;}}.demo2-container{font-size:12px;}

然后引入样式文件：

ts
importTeek from"vitepress-theme-teek";import"vitepress-theme-teek/index.css";import"./style/container.scss";exportdefault{extends:Teek,};

demo ​

markdown.demo用于配置 Demo 容器，如果您不了解什么是 Demo 容器，请看 Demo 容器。

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({markdown:{demo:{playgroundUrl:"",playgroundMainFileName:"App.vue",githubUrl:"",playgroundButtonTip:"在 Playground 中编辑",githubButtonTip:"在 Github 中编辑",copyButtonTip:"复制代码",collapseSourceButtonTip:"查看源代码",expandSourceButtonTip:"隐藏源代码",},},});
ts
interfaceMarkdown{demo?:{disabled?:boolean;playgroundUrl?:string;playgroundMainFileName?:string;githubUrl?:string;playgroundButtonTip?:string;githubButtonTip?:string;copyButtonTip?:string;collapseSourceButtonTip?:string;expandSourceButtonTip?:string;};}

Demo 容器的按钮组默认有 4 个按钮：

  • 查看/隐藏源代码
  • 复制源代码
  • 去 Github编辑
  • 去 Playground编辑

如果您想自定义一些按钮，可以在 .vitepress/theme/index.ts下使用如下插槽：

  • teek-demo-code-button-left：按钮组最左边插槽
  • teek-demo-code-button-right：按钮组最右边插槽

如：

ts
importTeek from"vitepress-theme-teek";import"vitepress-theme-teek/index.css";import{h } from"vue";importMyButton from"./components/MyButton.vue";exportdefault{extends:Teek,Layout() {returnh(Teek.Layout,null,{"teek-demo-code-button-left":() =>h(MyButton),});},};
最近更新