docsify 文章加密

docsify 文章加密

什么是docsify？

简单来说是一款便捷的文档网站

官网文档

docsify支持很多中部署方式，包括单独部署，Github部署，Gitee部署....对于没有前端能力固定样式非常友好

加密需求

对于部署上的文档在部分时候需要进行加密，加密方式有两种

1. 文档整体加密

2. 部分内容加密

探索加密

文档整体加密

搜索各大网站只有别人写的问题整体加密， 参考文章：docsify文档加密解密插件

需要文章整体加密的使用上面文档即可，写的很详细。

文档部分加密

针对文档部分加密并没有找到方案...实在忍不住只能自己写了。

思路开端：docsify会在加载md文件时会先转化为html，然后再加载到页面,思路来自于看到全文加密的源码中。

翻官方文档，在自定义插件中找到方法：

?hook.afterEach(function(html,?next)?{
????????//?解析成?html?后调用。
????????//?beforeEach?和?afterEach?支持处理异步逻辑
????????//?...
????????//?异步处理完成后调用?next(html)?返回结果
????????next(html);
??????});

思路

转换md文件到html后解析自定义标签，我这里使用的是标签，如果url上的pwd密码参数等于标签中的value属性则展示标签包含的加密内容，否则展示另一端提示的html。

代码

定义解析html方法

function?parsePwd(content)?{
??????//?Get?the?URL?parameters
??????let?currentURL?=?window.location.href;
??????const?hashParams?=?currentURL.split('?')[1];?//?获取问号后面的部分
??????var?urlParams?=?new?URLSearchParams(hashParams);
??????var?pwdParam?=?urlParams.get('pwd');

??????//?Replace?<pwd>?and?<tip>?tags?based?on?password?validation
??????return?content.replace(/<pwd\s+(.*?)>([\s\S]*?)<\/pwd>/g,?function?(match,?attributes,?pwdContent)?{
??????????//?匹配?pwd?标签中的各个属性
??????????const?regex?=?/(\w+)=['"](.*?)['"]/g;
??????????let?attrMatch;
??????????let?password?=?'';
??????????let?pwd?=?'';
??????????let?urlContent?=?'';

??????????//?提取属性值
??????????while?((attrMatch?=?regex.exec(attributes))?!==?null)?{
??????????????const?attrName?=?attrMatch[1];
??????????????const?attrValue?=?attrMatch[2];
??????????????if?(attrName?===?'value')?password?=?attrValue;
??????????????if?(attrName?===?'pwd')?pwd?=?attrValue;
??????????????if?(attrName?===?'url')?urlContent?=?attrValue;
??????????}

??????????if?(pwdParam?===?password)?{
??????????????return?pwdContent;?//?如果?URL?参数匹配，则显示?<pwd>?标签内容
??????????}?else?{
??????????????if?(pwdParam){
??????????????????alert("密码错误,请重新输入")
??????????????}
??????????????let?tipContent?=?'<p?style="text-align:?center;"><img?src="'?+?urlContent?+?'"?data-origin="http://niubility.cloud/image/rui.jpg"?alt=""></p><p?style="text-align:?center;"><strong>人机验证，扫码回复：'?+?pwd?+?'</strong></p><p?style="text-align:?center;"><input?id?="pwd"?/>?<button?onclick="addParamAndRefresh()">验证</button></p>';
??????????????return?tipContent;?//?否则显示提示内容
??????????}
??????});
??}

定义按钮点击提交密码方法

//?点击按钮时执行的函数
function?addParamAndRefresh()?{
????//?获取输入框元素
????let?inputElement?=?document.getElementById('pwd');
????//?获取输入框的值
????let?inputValue?=?inputElement.value;
????if?(!inputValue)?{
????????return
????}
????let?currentURL?=?window.location.href;
????const?hashParams?=?currentURL.split('?')[1];?//?获取问号后面的部分
????var?urlParams?=?new?URLSearchParams(hashParams);
????//?检查是否存在名为?'pwd'?的参数
????if?(urlParams.has('pwd'))?{
????????//?修改?'pwd'?参数的值为?'1'
????????urlParams.set('pwd',?inputValue);
????}?else?{
????????//?如果?'pwd'?参数不存在，则添加它
????????urlParams.append('pwd',?inputValue);
????}
????//?获取更新后的参数字符串
????var?newParams?=?urlParams.toString();

????//?更新当前页面URL中的参数部分
????if?(newParams)?{
????????currentURL?=?currentURL.split('?')[0]?+?'?'?+?newParams;
????}?else?{
????????currentURL?=?currentURL.split('?')[0];
????}

????//?刷新页面并跳转到新的URL
????//?改变?hash?路由
????//?使用?Docsify?提供的?router.go()?方法进行路由导航
????//window.$docsify.router.go(currentURL);
????window.location.href?=?currentURL;
}

注册到插件回调调用

???//?Parse?<pwd>?tags?in?the?page?content
????function?parseContent(content)?{
????????return?parsePwd(content);
????}

????const?afterEachHook?=?function?(hook,?vm)?{
????????hook.beforeEach(function?(html,?next)?{
????????????next(parseContent(html))
????????});
????}
????window.$docsify.plugins?=?[afterEachHook].concat(window.$docsify.plugins?||?[]);

效果展示

问题

1. 在parsePwd方法中我添加图片标签和输入框和按钮，可以根据自己具体实际需求调整展示

2. 提交按钮这里使用的路由模式是history,如果是使用的hash模式，获取参数代码我贴在下下面

window.$docsify?=?{
??????//通用设置
??????//?-----------------------------------------------------
??????//?加载自定义导航栏,需要目录下有_navbar.md文件
??????loadNavbar:?false,
??????//?路由模式
??????routerMode:?'history',
}

//不是路由模式获取参数代码
//?获取?URL?哈希部分
const?hash?=?window.location.hash;

//?如果哈希部分存在并且包含参数
if?(hash.includes('?'))?{
??const?hashParams?=?hash.split('?')[1];?//?获取问号后面的部分
??const?urlParams?=?new?URLSearchParams(hashParams);

??//?获取名为?pwd?的参数值
??const?pwdValue?=?urlParams.get('pwd');
??//?获取名为?a?的参数值
??const?aValue?=?urlParams.get('a');

??console.log(pwdValue);?//?输出:?123
??console.log(aValue);?//?输出:?1
}

完整代码获取

docsify文章加密http://niubility.cloud/record/docsify%E6%96%87%E7%AB%A0%E5%8A%A0%E5%AF%86