加密
约 1469 字大约 5 分钟
2024-03-04
加密
在本主题中,支持 全站加密 、 部分页面加密 和 部分内容加密 等多种灵活的加密方式。
提示
由于 vuepress 是静态站点,其自身限制的原因,加密 仅仅只是 看起来 看不到内容, 并且在 编译时,不再将 内容 预渲染到 html 中,但实际上 还是能够从 站点源文件 中获取到内容。 因此,不建议将 加密 功能 认为是 安全可靠的。
请尽量避免将 加密功能 应用于需要 严格保密 的内容 中。
已解锁的文章,仅在当前会话中可见。
启用加密功能
在 主题配置中,添加 encrypt 选项。
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
encrypt: {
// more options...
}
})
})全站加密
有些情况下,你可能 需要对 全站进行加密。 因此,你可以通过 encrypt.global 选项配置全站加密。 然后,通过配置 encrypt.admin 选项,设置一个或多个密码。
export default defineUserConfig({
theme: plumeTheme({
encrypt: {
global: true,
admin: ['123456'],
}
})
})部分页面加密
大多数情况下,你可能只需需要 加密 某一篇文章、某一个目录 等。 因此,你可以通过 encrypt.rules 选项配置部分加密。
export default defineUserConfig({
theme: plumeTheme({
encrypt: {
rules: {
// 可以是 md 文件的相对路径,对该文件加密
'前端/基础.md': '123456',
// 可以是 文件夹的路径,对该目录下所有文章加密
'/notes/vuepress-theme-plume/': '123456',
// 可以是 访问地址的请求路径,对该访问路径下所有文章加密
'/vuepress-theme-plume/': '123456',
// 可以是 具体的某个页面的请求路径,对该页面加密
'/article/f8dnci3/': '123456',
// 如果是 `^` 开头,则匹配该正则表达式的页面也会加密
'^/(a|b)/': '123456',
}
}
})
})encrypt.rules 的 键 将作为 匹配规则,值 将作为 该规则对应的密码,可以设置 一个或多个密码。
说明
- 密码 必须是 普通的字符串。
- 如果是 加密的是 整个目录,解锁时也是解锁整个目录,而不是解锁该目录下的某个文章。
encrypt.admin也可用于解锁 部分加密 的页面。- 使用
encrypt.admin解锁后,被认为是管理员访问,其它未解锁页面也默认解锁。
Frontmatter
在 Markdown 文件的 Frontmatter 中,可以使用 password 设置文章的密码。
---
title: 加密的文章
password: 123456
---还可以添加 passwordHint 选项,用于设置密码提示信息。
---
title: 加密的文章
password: 123456
passwordHint: 密码是 123456
---示例
点击访问 加密文章,密码:123456
部分内容加密
配置
部分内容加密通过 ::: encrypt 容器实现,需要配置 markdown.encrypt 选项:
export default defineUserConfig({
theme: plumeTheme({
markdown: {
encrypt: true,
}
})
})还可以给 ::: encrypt 容器设置统一的默认密码:
export default defineUserConfig({
theme: plumeTheme({
markdown: {
encrypt: {
password: 123456,
}
}
})
})使用
使用 ::: encrypt 容器,将需要加密的内容包裹起来。 可以在容器中添加 password / pwd 属性,设置该容器的密码。 如果没有设置密码,将使用默认密码。
还可以在容器上添加 hint 属性,设置密码提示信息。
::: encrypt password="123456" hint="密码是连续的 6 位数"
这是加密的内容
:::密码仅有一个生效,不支持同时设置多个密码。
示例
输入:
::: encrypt password="123456"
这是加密的内容
:::输出:
输入:
::: encrypt password="654321" hint="密码是连续的 6 位数"
这是加密的内容2
:::输出:
使用限制
对于被加密的内容,可以使用:
- 所有标准的 markdown 语法
- 主题提供的 大多数扩展语法,但不包括:
@[demo]()从目录中引入的代码示例@[code]()从目录中引入的代码片段@[code-tree]()从目录中引入的代码树
- 主题提供的 全局 vue 组件
- 用户自定义的 全局 vue 组件
- 被加密的内容,不能包含可执行的脚本,如有特殊交互,请通过组件实现。
网络环境要求: 部分内容加密采用 Crypto API 实现, 因此,在 非 HTTPS 环境 下,将无法正常工作。
如果你是技术开发者,你可能需要知道的内容
原始 markdown 内容首先进过 markdown 渲染为 HTML 内容后,再进行加密;传输到客户端,再进行解密渲染。 解密后的内容会被包装为一个动态的 vue 组件,html 作为 template 传给该动态组件,因此,涉及到运行时编译 template 的内容。这导致了如果启用部分内容加密功能,那么就需要将 vue 切换到 esm-bundler 版本,以支持运行时编译, 这会比默认的 runtime-only 版本性能差一些,体积也会增加。
相关配置
以下配置支持在 多语言配置 中使用。
encryptGlobalText
类型:
string默认值:
'Only password can access this site'说明:
全站加密时,提示信息。支持 HTML。如果你期望为访客提供获取密码的联系方式,你可能会需要这个配置。
encryptPageText
类型:
string默认值:
'Only password can access this page'说明:
部分加密时,提示信息。支持 HTML。如果你期望为访客提供获取密码的联系方式,你可能会需要这个配置。
encryptButtonText
- 类型:
string - 默认值:
'Confirm' - 说明: 确认按钮的文本
encryptPlaceholder
- 类型:
string - 默认值:
'Enter password' - 说明: 密码输入框的占位符
示例
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',
}
}
})
})贡献者
更新日志
b1f99-feat(plugin-md-power): add::: encryptcontainer, close #815 (#831)于4d236-feat(theme)!: add collections support (#704)于08652-feat(theme): addpasswordsupport for post frontmatter (#689)于0fd6c-refactor(theme): improve types and flat config (#524)于0c53b-docs: improve docs (#332)于f6949-docs: update docs于822d8-docs: lint fix md于2fb3d-docs: update theme docs于920d3-docs: update docs于ca097-docs: lint fix于
