Plot

隐文遮罩插件，通过点击或悬停来显示隐藏的文本内容。

安装

pnpm

pnpm add vitepress-plugin-plot

npm

npm install vitepress-plugin-plot

bun

bun add vitepress-plugin-plot

deno

deno add vitepress-plugin-plot

yarn

yarn add vitepress-plugin-plot

使用

vitepress-tuck 模式 推荐

.vitepress/config.ts

import { defineConfig } from 'vitepress-tuck'
import plot from 'vitepress-plugin-plot'

export default defineConfig({
  plugins: [
    plot({
      trigger: 'hover',  // 'hover' | 'click'，默认 'hover'
      effect: 'mask',    // 'mask' | 'blur'，默认 'mask'
    }),
  ],
})

查看 vitepress-tuck 了解更多

传统模式

.vitepress/config.ts

import { defineConfig } from 'vitepress'
import { plotMarkdownPlugin } from 'vitepress-plugin-plot'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(plotMarkdownPlugin, {
        trigger: 'hover',
        effect: 'mask',
      })
    },
  },
})

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import { enhanceAppWithPlot } from 'vitepress-plugin-plot/client'
import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    enhanceAppWithPlot(ctx) 
  },
} satisfies Theme

语法

使用 !! 包裹隐藏文本：

答案是 !!plot!!

使用 classname 设置交互行为：

!!plot!!{.click .blur}

支持以下 classname

• .click / .hover：点击显示 / 鼠标悬停显示
• .blur / .mask：模糊效果 / 遮罩效果

配置

interface PlotOptions {
  /**
   * 触发方式
   * - 'hover': 鼠标悬停显示
   * - 'click': 点击显示
   * @default 'hover'
   */
  trigger?: 'hover' | 'click'

  /**
   * 隐藏效果
   * - 'mask': 遮罩效果（默认）
   * - 'blur': 模糊效果
   * @default 'mask'
   */
  effect?: 'mask' | 'blur'
}

示例

鲁迅说过：“!!我没说这段话!!”

鲁迅说过：“我没说这段话”

书山有路勤为径，!!学海无涯苦作舟!!{.click .blur}。

书山有路勤为径，学海无涯苦作舟。