1

这是 Processwire CMS 特有的一个问题，但实际上我不确定问题到底出在哪里

我刚刚开始了我的第一个 Processwire 项目，并根据自己的喜好设置了后端。在启动我的网站前端时，我遇到了一个非常奇怪的问题：CSS 文件没有更新。我开始了，很快问题就出现了。然后我简单地将 main.css 的内容复制到一个新的 main2.css 文件中，更改了模板文件中的代码，它又可以工作了。我认为这是一次性的事情，但没过多久，问题再次发生。本地文件已更改，并且我的项目的 html 代码正在正常更新，但是当我检查页面时，无处可见 CSS 文件中的更改。

我正在使用 MAMP 创建本地服务器，并使用 Koala 编译我的 SASS 代码。我是 processwire 的新手，在我的 web 开发人员职业生涯中还很早，尽管如此，我对正在发生的事情感到非常困惑，因为问题仅部分出现在 CSS 文件中，而不是 HTML（或 PHP）文件中。

有谁知道问题可能是什么？

提前致谢

4

2 回答 2

1

我正在使用一些 php 代码_init.php将版本号添加到 css 文件名。

如今，大多数浏览器都会将具有不同查询字符串的 URL 视为不同的文件并下载新副本。大多数 CDN 甚至都支持并推荐这一点。更多信息：css-tricks.com

这是PHP：

// Set path and url
$assets_path = $config->paths->templates . "your-folder/";
$assets_url = $config->urls->templates . "your-folder/";
$file_css = "app.css";

// Generate css version addon
// Check if file exists and get date of last change
if (file_exists($assets_path . $file_css)) {
  $css_version_addon = "?v" . date("His", filemtime($assets_path . 
  $file_css)); // Time of last change 23h 59m 59s in format 235959
} else {
  $css_version_addon = "?somethingWentWrong";
}

// Full url with css file and version addon
$css_with_version = $assets_url . $file_css . $css_version_addon;

您可以在模板中输出它

// In your template file
<link rel="stylesheet" href="<?php echo $css_with_version; ?>" />
// This will output to something like this
<link rel="stylesheet" href="/site/templates/your-folder/app.css?v101525" />

我在我所有的 ProcessWire 模板中都使用了它。正如@jmartsch 提到的，有很多策略，但这个最适合我。如何生成文件并不重要（我使用带有 gulp 的 scss 来生成 css）。脚本只检查文件是否被修改并输出更改时间。

于 2017-07-26T08:08:33.130 回答
1

这很可能是缓存的问题。例如，请阅读https://varvy.com/pagespeed/leverage-browser-caching.html，以了解什么是浏览器缓存以及它完成的任务。

在此页面的“常见缓存问题”下，您可以找到您的问题。

如果您使用的是 Chrome，请打开开发工具 (F12) 并在“网络”选项卡下选中“禁用缓存”。

在 Firefox 中打开 Firefox 工具箱（也是 F12）并在“设置”>“高级设置”下选中“如果工具箱打开，则禁用 HTTP 缓存”（我从德语 Firefox 翻译过来）。

之后在您的 CSS 文件中进行更改并重新加载页面。如果您的更改出现，那么您就知道您偶然发现了浏览器缓存的陷阱之一。

有很多策略来处理这个“问题”。查看https://css-tricks.com/strategies-for-cache-busting-css/了解一些解决方案。

于 2017-05-11T20:20:43.040 回答