灵尘居

最近在折腾一个网站主题，网站使用了Cloudflare CDN，更新css样式后，网页没更新。现在把解决办法给共享出来，我是使用了css链接中添加查询参数的方法搞定的。

下面是一些常见原因及解决方法：

可能原因

1. Cloudflare 缓存未清除
Cloudflare 默认会缓存静态文件（如 CSS、JS、图片等），即使你更新了源服务器上的文件，客户端可能仍然加载的是旧的缓存版本。

2. 浏览器缓存
用户的浏览器可能缓存了旧的 CSS 文件，导致即使服务器返回了新文件，浏览器仍显示旧样式。

3. 文件名未改变
如果 CSS 文件名没有变化（例如仍是 `style.css`），Cloudflare 或浏览器可能认为文件没有更新，从而继续使用缓存版本。

4. Cloudflare 的缓存策略
默认的缓存级别或自定义的页面规则可能导致 CSS 文件被长时间缓存。

二、解决方法

1. 清除 Cloudflare 缓存
– 登录 Cloudflare 仪表盘。
– 转到“缓存”选项卡（Caching）。
– 点击“Purge Cache”（清除缓存），选择“Purge Everything”（清除全部）以确保所有缓存被移除。
– 等待几分钟，刷新页面检查效果。

2. 启用开发模式
– 在 Cloudflare 的“缓存”选项卡中，启用“开发模式”（Development Mode）。
– 这会暂时绕过缓存，方便你在更新文件时立即看到效果。开发模式持续时间有限，适合调试使用。

3. 更改 CSS 文件名或添加版本号
– 将 CSS 文件名改为 `style_v2.css`，或者在链接中添加查询参数，例如 `style.css?v=123`。
– 示例：

<link rel=”stylesheet” href=”/css/style.css?v=20250227″>

– 这样可以强制 Cloudflare 和浏览器加载新文件。

4. 检查浏览器缓存
– 在浏览器中打开开发者工具（F12），选择“Network”选项卡，勾选“Disable Cache”（禁用缓存），然后刷新页面。
– 或者直接清空浏览器缓存（Ctrl+Shift+Delete）。

5. 调整 Cloudflare 缓存规则
– 转到“页面规则”（Page Rules）设置。
– 创建一条规则，例如针对 `*.css` 文件的 URL，设置“Cache Level”为“Bypass”（绕过缓存）或“Edge Cache TTL”为较短时间。
– 示例规则：

example.com/*.css
Cache Level: Bypass

6. 验证源服务器更新
– 直接访问源服务器的 CSS 文件 URL（绕过 CDN），确认文件是否已正确更新。如果源文件未更新，可能是部署流程的问题。

—

推荐流程
– 先在源服务器确认 CSS 已更新。
– 清除 Cloudflare 缓存并启用开发模式。
– 在 CSS 链接中添加版本号，避免未来缓存问题。
– 测试网页，确保样式生效。