解决 solo 博客 nexmoe 主题图片不加载 403 错误

今天打开博客一看, wtf

发现有些地方的图片就能正常加载, 抓包看看,,,

• 不能加载的图片
  
• 能加载的图片
  

偶, 这不是那啥防盗链嘛...

• 我再打开控制台看看...
  
• 偶, 你美, 这是什么...
  

什么乱七八糟的, 于是掏出 jQuery,还在学 js 基础, jQuery 不熟... 写了如下代码加入页面:
方法一:

$(document).ready(function () {
  $("#pjax img").attr("referrerpolicy","origin");
  $('#pjax').on('DOMNodeInserted', function(){
    $("#pjax img").attr("referrerpolicy","origin");
  });
}

于是就正常了:

想了想, 这种方法好像性能好像有点低, 而且有的浏览器不兼容, 于是换了种思路...

方法二
直接用 js, 在 script 中加入:

document.getElementById('pjax').addEventListener('error', throttle(referrerPolicy), true);

/*修改请求图片的属性*/
function referrerPolicy() {
  var imgs = this.getElementsByTagName('img');
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].setAttribute("referrerpolicy", "origin");
  }
}

/*稀释时间段内调用方法次数*/
function throttle(fn) {
  let canRun = true;
  return function () {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, 500);
  };
}

哈哈这样好像也可以(不过检查元素发现属性并没有改变, 但是图片能加载, 唉??woc)...

方法三:

最简单的方法, 釜底抽薪改 ftl 模板, cxk 你美的, 哈哈感觉自己像个 zz...

改成 referrerpolicy="origin"

此时基本上图片能正常加载, 但是还有 bug, 就是翻页的时候第二页图片不能正常显示, 还需要改页脚的翻页按钮(猜测是有一个默认设置的原因):

也是在 article-list.ftl 里面, 加上 referrer="origin":

基本就完成了, 折腾一时爽, 一直掉头发一直爽

改模板好像需要改好几处...用 idea 的全局搜索(ctrl+shift+r)改效果比较好...