docsify 文章加密-编程知识

docsify 文章加密

什么是docsify？

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

官网文档

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

加密需求

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

文档整体加密
部分内容加密

探索加密

文档整体加密

搜索各大网站只有别人写的问题整体加密，参考文章：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 parameterslet 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 validationreturn 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 contentfunction 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 || []);

效果展示

问题

在parsePwd方法中我添加图片标签和输入框和按钮，可以根据自己具体实际需求调整展示
提交按钮这里使用的路由模式是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); // 输出: 123console.log(aValue); // 输出: 1
}