「运维记录」网站主题切换为Panda Pro，适配相关插件-Eswlnk Blog
智能摘要 AI
由于Alright主题加载速度较慢，切换回旧主题并适配了ToolBox问答中心，记录了初始化代码和XMLHttpRequest劫持代码，用于处理验证码验证和请求拦截。

之前的Alright主题的优化确实不太友好，一个普通的页面加载都需要接近1秒，对用户十分不友好，最终还是选择切换回到之前的主题。

「运维记录」网站主题切换为Panda Pro，适配相关插件-Eswlnk Blog

顺便也把之前的ToolBox适配了问答中心，记录一下调试的代码：

初始化代码

jQuery(document).ready(function ($) {
  var globalCaptchaObj; // 全局变量用于保存验证码对象
  var verifySuccess = false; // 标志位，默认验证码未通过

  function insertVerifyText(text) {
    // 判断是否存在 id 为 "verify_text" 的元素
    if ($('#verify_text').length) {
      // 如果存在，则只更改文字内容
      $('#verify_text').text(text);
    } else {
      // 如果不存在，则插入新的 div 元素
      $('#' + comment_verify.buttonId).after(
        '<div id="verify_text" style="color: red;">' + text + '</div>'
      );
    }
  }

  // 初始化 GeeTest 验证码
  initGeetest4(
    {
      captchaId: comment_verify.captchaId,
      product: 'bind', // 绑定模式
    },
    initGeetestCallback
  );

  // 初始化 GeeTest 回调函数
  function initGeetestCallback(captchaObj) {
    globalCaptchaObj = captchaObj;

    globalCaptchaObj.onSuccess(function () {
      var captcha = {
        captcha: globalCaptchaObj.getValidate(),
      };
      window.verify_captcha = captcha;

      if (window.comment_verify.is_ajax_comment == 0) {
        var form = $('#' + comment_verify.formId);

        // 遍历 captcha 对象的属性，并添加到隐藏的 input 元素中
        for (var key in verify_captcha.captcha) {
          if (verify_captcha.captcha.hasOwnProperty(key)) {
            form.append(
              '<input type="hidden" name="captcha[' +
                key +
                ']" value="' +
                verify_captcha.captcha[key] +
                '">'
            );
          }
        }

        HTMLFormElement.prototype.submit.call(
          document.getElementById(comment_verify.formId)
        );
      } else {
        $('#' + comment_verify.formId).submit();
      }

      verifySuccess = true; // 设置标志位为真，表示验证通过

      // 手动触发 answer-submit 按钮的点击事件
      const targetButton = document.querySelector('.answer-submit');
      if (targetButton) {
        targetButton.click(); // 手动触发 Vue 的逻辑
      }

      globalCaptchaObj.reset(); // 重置验证码
      verifySuccess = false; // 验证码重置后将标志位重置为 false
    });

    globalCaptchaObj.onError(function () {
      insertVerifyText('验证码加载问题，请刷新页面后重试');
      return false;
    });

    globalCaptchaObj.onClose(function () {
      insertVerifyText('需通过验证才能进行评论');
      globalCaptchaObj.reset(); // 重置验证码
      verifySuccess = false; // 重置标志位为 false
      return false;
    });
  }

  // 在点击 comment_verify 按钮时触发验证码的弹出
  $(document).on('click', '#' + comment_verify.buttonId, function (event) {
    var shouldShowCaptcha = true; // 示例条件，根据实际需求修改

    if (shouldShowCaptcha) {
      event.preventDefault(); // 阻止默认提交行为
      globalCaptchaObj.showCaptcha(); // 显示验证码
    }
  });

  // 注入 answer-submit 按钮的逻辑
  (function () {
    $(document).ready(function () {
      const targetButton = document.querySelector('.answer-submit');
      if (targetButton) {
        // 在捕获阶段绑定事件，确保在 Vue 逻辑之前执行
        targetButton.addEventListener(
          'click',
          function (event) {
            if (!verifySuccess) {
              event.preventDefault(); // 阻止默认行为
              event.stopPropagation(); // 阻止事件冒泡
              event.stopImmediatePropagation(); // 立即停止其他事件处理器

              globalCaptchaObj.showCaptcha(); // 显示验证码
            }
          },
          true // 使用捕获阶段，确保在 Vue 的事件处理器之前执行
        );
      }
    });
  })();
});

XMLHttpRequest 劫持VUE底层请求

(function () {
  // 保存原生的 XMLHttpRequest 构造函数
  const originalXMLHttpRequest = window.XMLHttpRequest;

  // 创建一个拦截后的 XMLHttpRequest 构造函数
  function InterceptedXMLHttpRequest() {
    const xhr = new originalXMLHttpRequest();

    xhr.open = (function (originalOpen) {
      return function (method, url, async, user, password) {
        // 检查是否是目标请求
        if (url.includes('/wp-json/v1/qaservice/comments/create')) {
          console.log('拦截到 /wp-json/v1/qaservice/comments/create 请求');

          // 在请求头或其他地方添加验证码信息
          const additionalParams = jQuery.param(window.verify_captcha || {});
          url += (url.includes('?') ? '&' : '?') + additionalParams;
        }
        originalOpen.call(this, method, url, async, user, password);
      };
    })(xhr.open);

    return xhr;
  }

  // 将 window.XMLHttpRequest 替换为拦截后的版本
  window.XMLHttpRequest = InterceptedXMLHttpRequest;
})();