问题
在上篇文章中,我尝试使用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完整性的检查不通过,在这里有几种解决方法:
在Cloudflare中关闭
Auto Minify
,如果开启该选项,Cloudflare会自动压缩CSS资源,可是主题文件中显然是定义了校验值Cloudflare的压缩会修改内容 校验值会变,导致校验不通过。在Hugo主题中删除校验值,具体做法是在Hugo文件夹下的
layouts
文件夹中新建一个partials
文件夹,比如我这里:
在partials中新建一个head.html
文件,并将PaperMod主题文件夹中的\layouts\partials
的 head.html
文件复制过去,在这个html文件中搜索 integrity="{{ $stylesheet.Data.Integrity }}"
这么一句代码,把它改为 integrity=""
然后重新发布