mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
130 lines
3.0 KiB
Markdown
130 lines
3.0 KiB
Markdown
---
|
|
title: Plot Text
|
|
createTime: 2025/10/08 14:45:35
|
|
icon: weui:eyes-off-outlined
|
|
permalink: /en/guide/markdown/plot/
|
|
---
|
|
|
|
## Overview
|
|
|
|
Sometimes, you may not want to display text content completely unreservedly, preferring to maintain some secrecy.
|
|
This could be to pique readers' curiosity or simply to add a bit of reading difficulty, making the article more interesting.
|
|
|
|
To satisfy this playful intention, the theme provides a fun little feature called **"plot" text**. It looks like this:
|
|
|
|
:::window
|
|
Did you know that !!Lu Xun!! once said: "!!I never said this!!!" It was an enlightening revelation that deeply
|
|
inspired me, filling me with unparalleled strength! So, !!I turned over in bed!!!
|
|
:::
|
|
|
|
Readers cannot directly read the complete content - parts of it are "covered up" and require hovering the
|
|
mouse over the content to see what's hidden.
|
|
|
|
## Configuration
|
|
|
|
This feature is disabled by default. You need to enable it in the `theme` configuration.
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
markdown: {
|
|
plot: true, // [!code ++]
|
|
}
|
|
})
|
|
})
|
|
```
|
|
|
|
`markdownPower.plot` accepts either `boolean | PlotOptions` type, which controls the default behavior of this feature.
|
|
|
|
```ts
|
|
interface PlotOptions {
|
|
/**
|
|
* Trigger method
|
|
*
|
|
* @default 'hover'
|
|
*/
|
|
trigger?: 'hover' | 'click'
|
|
|
|
/**
|
|
* Mask layer effect
|
|
*
|
|
* @default 'mask'
|
|
*/
|
|
effect?: 'mask' | 'blur'
|
|
}
|
|
```
|
|
|
|
## Syntax
|
|
|
|
```md
|
|
!!hidden content!!
|
|
```
|
|
|
|
You can also control behavior through attribute syntax:
|
|
|
|
```md
|
|
!!hidden content!!{.click}
|
|
!!hidden content!!{.hover}
|
|
|
|
!!hidden content!!{.mask}
|
|
!!hidden content!!{.blur}
|
|
|
|
!!hidden content!!{.blur .click}
|
|
```
|
|
|
|
- `.click` - Trigger on click
|
|
- `.hover` - Trigger on mouse hover
|
|
- `.mask` - Mask layer effect
|
|
- `.blur` - Text blur effect
|
|
|
|
::: info You can also use the [`<Plot />`](../components/plot.md) component as an alternative.
|
|
:::
|
|
|
|
## Frontmatter
|
|
|
|
Use the `plot` option in Frontmatter to control the default behavior of this feature on the current page:
|
|
|
|
```
|
|
---
|
|
plot:
|
|
trigger: hover
|
|
effect: blur
|
|
---
|
|
```
|
|
|
|
## Examples
|
|
|
|
**Input**:
|
|
|
|
```md
|
|
Did you know that !!Lu Xun!! once said: "!!I never said this!!!" It was an enlightening revelation that deeply inspired me, filling me with unparalleled strength! So, !!I turned over in bed!!!!
|
|
```
|
|
|
|
**Output**:
|
|
|
|
:::window
|
|
Did you know that !!Lu Xun!! once said: "!!I never said this!!!" It was an enlightening revelation that
|
|
deeply inspired me, filling me with unparalleled strength! So, !!I turned over in bed!!!!
|
|
:::
|
|
|
|
**Input**:
|
|
|
|
```md
|
|
Mask effect + hover: !!Hover to see me!!{.mask .hover}
|
|
Mask effect + click: !!Click to see me!!{.mask .click}
|
|
Blur effect + hover: !!Hover to see me!!{.blur .hover}
|
|
Blur effect + click: !!Click to see me!!{.blur .click}
|
|
```
|
|
|
|
**Output**:
|
|
|
|
:::window
|
|
Mask effect + hover: !!Hover to see me!!{.mask .hover}
|
|
|
|
Mask effect + click: !!Click to see me!!{.mask .click}
|
|
|
|
Blur effect + hover: !!Hover to see me!!{.blur .hover}
|
|
|
|
Blur effect + click: !!Click to see me!!{.blur .click}
|
|
:::
|