解决 Cloudflare Pages 上 CSS 样式丢失问题（Integrity 属性）

当将 Hugo 网站（特别是使用 Blowfish 主题时）部署到 Cloudflare Pages 时，你可能会遇到网站加载后没有任何样式（CSS 丢失）的问题。浏览器控制台通常会显示与 子资源完整性 (SRI) 校验失败相关的错误。

问题现象

#

网站显示“乱码”或没有样式。检查浏览器开发者控制台 (F12) 会发现类似以下的错误：

Failed to find a valid digest in the ‘integrity’ attribute for resource ‘…’ with computed SHA-512 integrity ‘…’. The resource has been blocked. (无法在资源 ‘…’ 的 ‘integrity’ 属性中找到有效的摘要，计算出的 SHA-512 完整性为 ‘…’。资源已被拦截。)

问题原因

#

这是由于 Cloudflare 的自动压缩 (Auto Minify) 功能导致的。

1. Hugo 生成 CSS/JS 文件并计算其加密哈希值 (SRI)，将其添加到 HTML 的 integrity 属性中。
2. Cloudflare Pages（如果启用了自动压缩）会修改这些文件以减小体积。
3. 浏览器 下载修改后的文件，计算其哈希值，并与 HTML 中的哈希值进行比较。由于文件内容变了，哈希值不匹配，浏览器出于安全原因拦截了该资源。

解决方案

#

由于 Cloudflare 已于 2024 年 8 月弃用了 Auto Minify (自动压缩) 功能，之前建议禁用该功能的方案已不再适用。

现在的主要解决方案是移除 Hugo 模板中的 integrity 属性。这可以防止浏览器因 Cloudflare 边缘优化或压缩导致的哈希不匹配而拦截资源。

移除 Integrity 属性

#

你需要覆盖主题的模板，移除 CSS 和 JS 标签中的 integrity 属性。

步骤：

1. 复制模板文件： 将主题的 head.html 局部模板复制到你的项目布局文件夹中： themes/blowfish/layouts/partials/head.html -> layouts/partials/head.html

2. 编辑文件： 打开新复制的 layouts/partials/head.html 文件。

3. 移除 Integrity 属性： 找到所有包含 integrity 属性的 <link> 和 <script> 标签，并删除 integrity="{{ ... }}" 部分。

   示例 (CSS):

   将：

   <link
     type="text/css"
     rel="stylesheet"
     href="{{ $bundleCSS.RelPermalink }}"
     integrity="{{ $bundleCSS.Data.Integrity }}">
   

   改为：

   <link
     type="text/css"
     rel="stylesheet"
     href="{{ $bundleCSS.RelPermalink }}">
   

   示例 (JS):

   将：

   <script
     src="{{ $js.RelPermalink }}"
     integrity="{{ $js.Data.Integrity }}"></script>
   

   改为：

   <script
     src="{{ $js.RelPermalink }}"></script>
   

4. 重新构建： 重新构建你的网站。资源将不再进行完整性校验，从而彻底解决样式丢失的问题。