问题

在上篇文章中，我尝试使用Cloudflare优化博客的访问速度，可是发现了一个新问题，在一些版本较老的浏览器中CSS加载异常，F12观察具体报错如下：

Failed to find a valid digest in the 'integrity' attribute for resource 
'https://ffoo.cc/assets/css/stylesheet.b61814a257ce353cf79c7df04cbd11656e6b46cd9ff8eb7896ae9e46e264cce4.css' with computed SHA-256 integrity '3lEqKoNn/YtimF4fTOuBEhdSE8SZMUxUo3bygRBd+Sg='. The resource has been blocked.@Sh1zuku #51 Failed to find a valid digest in the 'integrity' attribute for resource 'https://ffoo.cc/assets/css/stylesheet.b61814a257ce353cf79c7df04cbd11656e6b46cd9ff8eb7896ae9e46e264cce4.css' with computed SHA-256 integrity '3lEqKoNn/YtimF4fTOuBEhdSE8SZMUxUo3bygRBd+Sg='. The resource has been blocked.

可以看到PaperMod主题的CSS资源SHA-256完整性的检查不通过，在这里有几种解决方法：

  1. 在Cloudflare中关闭Auto Minify，如果开启该选项，Cloudflare会自动压缩CSS资源，可是主题文件中显然是定义了校验值Cloudflare的压缩会修改内容 校验值会变，导致校验不通过。

  2. 在Hugo主题中删除校验值，具体做法是在Hugo文件夹下的layouts文件夹中新建一个partials文件夹，比如我这里：

    image-20231222200721417

在partials中新建一个head.html文件，并将PaperMod主题文件夹中的\layouts\partials的 head.html文件复制过去，在这个html文件中搜索 integrity="{{ $stylesheet.Data.Integrity }}" 这么一句代码，把它改为 integrity="" 然后重新发布

参考