Вкладки

Пусть файл Markdown на вкладках поддержки вашего сайта VuePress.

Конфиг

TS

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        tabs: true,
      },
    },
  }),
});

JS

// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        tabs: true,
      },
    },
  }),
};

Использование

Вам нужно обернуть вкладки в контейнер tabs.

Вы можете добавить суффикс идентификатора в контейнер tabs, который будет использоваться как ID вкладки. Все вкладки с одинаковым идентификатором будут иметь одно и то же событие переключения.

::: tabs#fruit

<!-- here, fruit will be used as id, it's optional -->

<!-- tabs content -->

:::

Внутри этого контейнера вы должны использовать маркер @tab, чтобы пометить и разделить содержимое вкладки.

За маркером @tab вы можете добавить текст :active, чтобы активировать вкладку по умолчанию, и текст будет разрешен как заголовок вкладки.

::: tabs

@tab title 1

<!-- tab 1 content -->

@tab title 2

<!-- tab 2 content -->

@tab:active title 3

<!-- tab 3 will be activated by default -->

<!-- tab 3 content -->

:::

По умолчанию заголовок будет использоваться как значение вкладки, но вы можете переопределить его, используя суффикс идентификатора.

::: tabs

@tab title 1

<!-- here, tab 1's title "title 1" will be used as value. -->

<!-- tab 1 content -->

@tab title 2#value2

<!-- here, tab 2's title will be "title 2", but it will bind a value with "value2" -->

<!-- tab 2 content -->

:::

Переключение вместе и постоянный выбор

Если вы хотите, чтобы некоторые группы вкладок переключались вместе, вы можете использовать один и тот же идентификатор вкладки для их привязки. Вот пример:

Кроме того, ваш выбор с этим идентификатором вкладки будет сохранен и сохранен.

Выберите менеджер пакетов:

npm

npm должен быть установлен вместе с Node.js.

pnpm

Если вы используете Node.js v16+, вы можете использовать corepack для включения pnpm:

corepack prepare pnpm@7.28.0 --activated

В противном случае вы можете установить его с помощью npm:

npm i -g pnpm

Установка vuepress-plugin-md-enhance:

Использование npm

npm i -D vuepress-plugin-md-enhance

Использование pnpm

pnpm add -D vuepress-plugin-md-enhance

Демо

Вкладка фруктов:

apple

Apple

banana

Banana

::: tabs#fruit

@tab apple#apple

Apple

@tab banana#banana

Banana

:::

Еще одна вкладка фруктов:

apple

Apple

banana

Banana

orange

Orange

::: tabs#fruit

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::

Вкладка фруктов без id:

apple

Apple

banana

Banana

orange

Orange

::: tabs

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::