主题配置

介绍

@cat-kit/vitepress-theme 当前公开两类入口：

• 默认主题入口：直接作为 .vitepress/theme/index.ts 的 theme 导出
• 配置辅助入口：defineThemeConfig、demoContainer、mermaidPlugin、importExamples

快速使用

主题入口：

import theme from '@cat-kit/vitepress-theme'

export default theme

配置辅助：

import { defineConfig } from 'vitepress'
import { defineThemeConfig } from '@cat-kit/vitepress-theme/config'

export default defineConfig({
  ...defineThemeConfig({
    examplesDir: '/absolute/path/to/docs/examples'
  })
})

API参考

默认主题入口

import theme from '@cat-kit/vitepress-theme'

默认导出会：

• 继承 VitePress DefaultTheme
• 使用 CatKitLayout
• 注册 DemoContainer 和 Mermaid 组件
• 引入主题样式

根入口额外暴露：

export { CatKitLayout } from '@cat-kit/vitepress-theme'

defineThemeConfig、demoContainer、mermaidPlugin、importExamples 这些配置辅助函数走 @cat-kit/vitepress-theme/config。

defineThemeConfig

defineThemeConfig(options: { examplesDir: string }): Partial<UserConfig>

它会返回一段可直接合并进 VitePress 配置的片段，当前包含：

• markdown.lineNumbers = true
• demoContainer(md, { examplesDir })
• md.use(mermaidPlugin)
• vite.plugins = [importExamples({ examplesDir })]

其中 importExamples 会自动为 ::: demo 语法注入对应的 Vue 示例组件导入，同时保留 Markdown 文件顶部的 frontmatter，不会影响 title、description 等页面元信息解析。

按需导出

import {
  defineThemeConfig,
  demoContainer,
  mermaidPlugin,
  importExamples
} from '@cat-kit/vitepress-theme/config'

适合：

• 只想复用 Demo 容器能力
• 自己维护主题，但想复用 CatKit 的 Markdown / Vite 插件组合