标签页

支持通过标签页语法展示内容的插件。

https://www.npmjs.com/package/vitepress-plugin-tabs
https://github.com/sapphi-red/vitepress-plugins

安装

npm

npm install -D vitepress-plugin-tabs

yarn

yarn add -D vitepress-plugin-tabs

pnpm

pnpm add -D vitepress-plugin-tabs

bun

bun add -D vitepress-plugin-tabs

配置

App Config

// .vitepress/config.mts
import { defineConfig } from 'vitepress';

import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'; 

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(tabsMarkdownPlugin); 
    },
  },
});

Theme Config

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';

import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'; 

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {

    });
  },
  enhanceApp({ app, router, siteData }) {
    enhanceAppWithTabs(app); 
  },
} satisfies Theme;

使用

::: tabs
== 春晓
春眠不觉晓，处处闻啼鸟。  
夜来风雨声，花落知多少。
== 静夜思
床前明月光，疑是地上霜。  
举头望明月，低头思故乡。
:::

春眠不觉晓，处处闻啼鸟。
夜来风雨声，花落知多少。