English | ็ฎไฝไธญๆ
vuepress-plugin-posts-encrypt
A
vuepress plugin
to addaccess verification
to your blog.
yarn add vuepress-plugin-posts-encrypt
// .vuepress/config.js
module.exports = {
// other options...
plugins: [
[
'posts-encrypt',
{
route: '/auth',
passwd: 123456,
encryptInDev: true,
expires: 1000 * 60,
// version >= 0.1.0
checkAll: true
}
]
}
๐All configuration items can be seen at Configs
part๐
// .vuepress/config.js
module.exports = {
plugins: [
[
'posts-encrypt',
{
// Here!!!
checkAll: true, // version >= 0.1.0
passwd: 123456
// ...
}
]
}
HINT: If set checkAll: true
, the password set separately for each article will be invalidated at the same time.
secret: true
in the article Front Matter---
title: A Private Post
date: 2021-09-03
categories:
- Profile
tags:
- resume
secret: true
---
passwd
field for each article---
title: A Private Post
date: 2021-09-03
categories:
- Profile
tags:
- resume
secret: true
passwd: 1233211234567
---
Thats it!
๐๐๐
BTW: Under dev mode encryptInDev: true
also needs to be configured
Execute the following command to start the development service
vuepress dev docs
Click to enter a page that needs to verify the password, you can see the following effects:
In the custom template scenario, the plugin needs to inject some logic into your template file, such as the logic related to password verification
. So you need to provide a mark to inject this part of the code in the template.
The following marks except <%crypto_inject_tag%>
& <%validate_js_tag%>
are required, the others are optional. You are free to choose:
BTW: The following marks are inserted into the template from top to bottom, so you need to pay attention to the writing position of the mark
The position markers for content injection in the template include the following
<%iview_css_tag%>
[Optional
]
iView
Component library's CSS injection location mark.
iview: true
in the injectConfig
configuration<%animate_css_tag%>
[Optional
]
Animate.css
injection location mark.
animate: true
in the injectConfig
configuration<%iview_js_tag%>
[Optional
]
iView
Component library's JS injection location mark.
iview: true
in the injectConfig
configuration<%minified_css_tag%>
[Optional
]Injection location marker for compiled external 'less' files
css
in the template, this configuration allows you to separate the style files that need to be used in the template into the less
file. The plugin will help you compile and insert
to the corresponding location. You only need Specify the absolute path of the style file in the less
setting of injectConfig
<%crypto_inject_tag%>
[Required
]CryptoJS
Script file insertion position<%validate_js_tag%>
[Required
]Password verification and Verified routing storage injection location mark of related logic
By default, if the verified route is on the same device and the same browser and the user does not clear the local cache, there is no need to verify again next time you come in, because it is stored in localstorage
If you don't want this, you can set expires
for the password, the unit is milliseconds (ms)
. This expiration time is for each route, not all routes.
BTW: Do not set the expiration time too short, otherwise it may cause an endless loop of routing
interface InjectConfig {
// The address of the less file for custom template outreach
less?: string
// Whether to inject the IView component library, the default is false
iview?: boolean
// Whether to inject anmitecss animation library, the default is false
animate?: boolean
}
interface Options {
// The route of the authentication page, the default is `/auth`
route?: string
// Basic password
passwd: string
// Custom password verification template file address
template?: string
// Whether the development environment is encrypted, the default is false
encryptInDev?: boolean
// Password expiration time, which is permanently valid by default, unit: ms
expires?: number
// Determine whether to inject other resources during template customization
injectConfig?: InjectConfig
// Enable all routing validation or not
checkAll?: boolean // version >= 0.1.0
}
// The default options
const options: Options = {
route: '/auth',
passwd: 'hello world',
template: '',
encryptInDev: false,
expires: 0,
checkAll: false, // version >= 0.1.0
injectConfig: {
less: '',
iview: false,
animate: false
}
}
๐๐ One key triple connection ๐๐