--- 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/) ## Partial Content Encryption ### Configuration Partial content encryption is implemented through the `::: encrypt` container. You need to configure the `markdown.encrypt` option: ```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ markdown: { encrypt: true, // [!code ++] } }) }) ``` You can also set a unified default password for the `::: encrypt` container: ```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ markdown: { encrypt: { password: 123456, // [!code ++] } } }) }) ``` ### Usage Use the `::: encrypt` container to wrap the content that needs to be encrypted. You can add `password` / `pwd` attribute to the container to set the password for that container. If no password is set, the default password will be used. You can also add a `hint` attribute to set a password hint. ```md /password="123456"/ ::: encrypt password="123456" hint="The password is 6 consecutive digits" This is encrypted content ::: ``` ::: info Only one password is effective; multiple passwords are not supported simultaneously. ::: ### Example **Input:** ```md ::: encrypt password="123456" This is encrypted content ::: ``` **Output:** ::: encrypt password="123456" This is encrypted content ::: **Input:** ```md ::: encrypt password="654321" hint="The password is 6 consecutive digits" This is encrypted content 2 ::: ``` **Output:** ::: encrypt password="654321" hint="The password is 6 consecutive digits" This is encrypted content 2 ::: ::: warning Usage Limitations **For encrypted content, you can use:** - All standard markdown syntax - Most extended syntax provided by the theme, except: - `@[demo]()` code examples imported from directories - `@[code]()` code snippets imported from directories - `@[code-tree]()` code trees imported from directories - Global Vue components provided by the theme - User-defined global Vue components - Encrypted content cannot contain executable scripts; for special interactions, please implement through components. **Network Environment Requirements:** Partial content encryption is implemented using [Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Crypto), therefore, it will not work properly in **non-HTTPS environments**. ::: ::: details If you are a technical developer, you may need to know The original markdown content is first rendered into HTML content, then encrypted; transmitted to the client, then decrypted and rendered. The decrypted content is wrapped as a dynamic Vue component, with HTML passed as the template to the dynamic component. This involves runtime template compilation. As a result, if partial content encryption is enabled, Vue needs to be switched to the `esm-bundler` version to support runtime compilation, which has slightly worse performance and larger size compared to the default `runtime-only` version. ::: ## 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', } } }) }) ```