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 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 || []);

效果展示

问题

在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); // 输出: 123
console.log(aValue); // 输出: 1
}

完整代码获取

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