快速开始

什么是 vitepress-tuck？

vitepress-tuck 为 VitePress 提供了简单灵活、低门槛的插件开发与接入能力。 它通过包装 VitePress 的 defineConfig，提供额外的 plugins 选项，将插件接入的复杂度转移到插件内部，用户只需在 plugins 数组中添加插件。

安装

pnpm

pnpm add vitepress vitepress-tuck

npm

npm install vitepress vitepress-tuck

bun

bun add vitepress vitepress-tuck

deno

deno add vitepress vitepress-tuck

yarn

yarn add vitepress vitepress-tuck

在 VitePress 站点中使用

• 替换配置文件

  将 .vitepress/config.ts 中的 defineConfig 替换为 vitepress-tuck 的 defineConfig：

  .vitepress/config.ts

  import { defineConfig } from 'vitepress'
  import { defineConfig } from 'vitepress-tuck'
  
  export default defineConfig({
    plugins: [
      // 在这里添加插件
    ],
    // 其他 VitePress 配置项 ...
  })

• 配置客户端入口

  在 .vitepress/theme/index.ts 中引入 virtual:enhance-app：

  .vitepress/theme/index.ts

  import type { Theme } from 'vitepress'
  import enhanceApp from 'virtual:enhance-app'
  import DefaultTheme from 'vitepress/theme'
  
  export default {
    extends: DefaultTheme,
    enhanceApp(ctx) {
      enhanceApp(ctx) 
    },
  } satisfies Theme

  virtual:enhance-app 是一个虚拟模块，vitepress-tuck 会自动将插件的客户端代码注入其中，无需手动配置。

• TypeScript 支持

  如果项目使用 TypeScript，在 tsconfig.json 中添加类型引用：

  {
    "compilerOptions": {
      "types": ["vitepress-tuck/client-types"]
    }
  }

使用插件

插件使用非常简单，只需在 plugins 中导入并调用即可：

.vitepress/config.ts

import { defineConfig } from 'vitepress-tuck'
import steps from 'vitepress-plugin-steps'
import mermaid from 'vitepress-plugin-mermaid-tuck'

export default defineConfig({
  plugins: [
    steps(),
    mermaid({
      // 可以传入插件配置项
    }),
  ],
})

每个插件的配置项请参考对应的插件文档。