mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
b1f996cb0e
* feat(plugin-md-power): add `::: encrypt` container * chore: tweak * chore: tweak * chore: tweak
169 lines
4.6 KiB
Markdown
169 lines
4.6 KiB
Markdown
---
|
|
title: Encryption
|
|
icon: mdi:encryption-outline
|
|
createTime: 2025/10/08 15:58:48
|
|
permalink: /en/guide/features/encryption/
|
|
---
|
|
|
|
## Encryption
|
|
|
|
In this topic, various flexible encryption methods such as **full-site encryption** and **partial encryption** are supported.
|
|
|
|
::: warning Note
|
|
Due to the limitations of `vuepress` as a static site, **encryption** only makes the content *appear* invisible.
|
|
During compilation, the content is not pre-rendered into the `html`,
|
|
but it can still be retrieved from the site's source files.
|
|
Therefore, the **encryption** feature should not be considered as completely secure or reliable.
|
|
|
|
Avoid using the **encryption feature** for content that requires **strict confidentiality**.
|
|
:::
|
|
|
|
**Unlocked articles are only visible during the current session.**
|
|
|
|
## Enabling Encryption
|
|
|
|
Add the `encrypt` option in the theme configuration.
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
import { defineUserConfig } from 'vuepress'
|
|
import { plumeTheme } from 'vuepress-theme-plume'
|
|
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
encrypt: {
|
|
// more options...
|
|
}
|
|
})
|
|
})
|
|
```
|
|
|
|
## Full-Site Encryption
|
|
|
|
In some cases, you may need to encrypt the entire site.
|
|
You can configure full-site encryption using the `encrypt.global` option and set one or more passwords with `encrypt.admin`.
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
encrypt: {
|
|
global: true,
|
|
admin: ['123456'],
|
|
}
|
|
})
|
|
})
|
|
```
|
|
|
|
## Partial Encryption
|
|
|
|
In most cases, you may only need to encrypt a specific article, directory, etc.
|
|
You can configure partial encryption using the `encrypt.rules` option.
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
encrypt: {
|
|
rules: {
|
|
// Can be the relative path of an MD file to encrypt that file
|
|
'前端/基础.md': '123456',
|
|
// Can be a directory path to encrypt all articles under that directory
|
|
'/notes/vuepress-theme-plume/': '123456',
|
|
// Can be a request path to encrypt all articles under that path
|
|
'/vuepress-theme-plume/': '123456',
|
|
// Can be a specific page's request path to encrypt that page
|
|
'/article/f8dnci3/': '123456',
|
|
// If prefixed with `^`, pages matching the regex will also be encrypted
|
|
'^/(a|b)/': '123456',
|
|
}
|
|
}
|
|
})
|
|
})
|
|
```
|
|
|
|
The **key** in `encrypt.rules` serves as the matching rule,
|
|
and the **value** is the corresponding password (or multiple passwords) for that rule.
|
|
|
|
:::tip Notes
|
|
|
|
- Passwords must be plain strings.
|
|
- If encrypting an entire directory, unlocking applies to the entire directory, not individual articles within it.
|
|
- `encrypt.admin` can also be used to unlock **partially encrypted** pages.
|
|
- After unlocking with `encrypt.admin`, the user is considered an admin, and all other locked pages are unlocked by default.
|
|
:::
|
|
|
|
### Frontmatter
|
|
|
|
In the `Frontmatter` of a Markdown file, you can set the article's password using the `password` field.
|
|
|
|
```md
|
|
---
|
|
title: Encrypted Article
|
|
password: 123456
|
|
---
|
|
```
|
|
|
|
You can also add the `passwordHint` option to provide a password hint.
|
|
|
|
```md
|
|
---
|
|
title: Encrypted Article
|
|
password: 123456
|
|
passwordHint: The password is 123456
|
|
---
|
|
```
|
|
|
|
## Example
|
|
|
|
Click to visit [Encrypted Article, Password: 123456](/article/enx7c9s/)
|
|
|
|
## Related Configurations
|
|
|
|
The following configurations can be used in [multilingual settings](../../config/locales.md).
|
|
|
|
### encryptGlobalText
|
|
|
|
- **Type**: `string`
|
|
- **Default**: `'Only password can access this site'`
|
|
- **Description**:
|
|
|
|
The prompt message for full-site encryption. Supports HTML. Useful if you want to provide contact information for visitors to obtain the password.
|
|
|
|
### encryptPageText
|
|
|
|
- **Type**: `string`
|
|
- **Default**: `'Only password can access this page'`
|
|
- **Description**:
|
|
|
|
The prompt message for partial encryption. Supports HTML. Useful if you want to provide contact information for visitors to obtain the password.
|
|
|
|
### encryptButtonText
|
|
|
|
- **Type**: `string`
|
|
- **Default**: `'Confirm'`
|
|
- **Description**: The text for the confirmation button.
|
|
|
|
### encryptPlaceholder
|
|
|
|
- **Type**: `string`
|
|
- **Default**: `'Enter password'`
|
|
- **Description**: The placeholder text for the password input field.
|
|
|
|
### Example
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
import { defineUserConfig } from 'vuepress'
|
|
import { plumeTheme } from 'vuepress-theme-plume'
|
|
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
locales: {
|
|
'/': {
|
|
encryptButtonText: 'Confirm',
|
|
encryptPlaceholder: 'Enter password',
|
|
encryptGlobalText: 'Only password can access this site',
|
|
encryptPageText: 'Only password can access this page',
|
|
}
|
|
}
|
|
})
|
|
})
|
|
```
|