PbootCMS网站修改CSS样式后实现自动更新缓存

在网站开发过程中，样式文件的修改常常因为浏览器缓存问题导致无法及时生效。即使进行了简单的刷新操作，也可能看不到最新的样式效果。为了解决这一问题，可以通过增加版本号的方式强制刷新缓存。

手动添加版本号是一种常见方法，例如：


<link rel="stylesheet" href="{pboot:sitetplpath}/css/common.css?v=1">

每次修改后需要手动更改?v=1中的数字，但这显然不够高效。那么，有没有一种自动更新版本号的方法呢？答案是肯定的。

以下是实现自动更新版本号的具体步骤：

1. 在网站通用方法文件中添加一个自动生成时间版本号的功能。找到apps/common/function.php文件，并在文件末尾添加以下代码：


// 自动更新时间版本号 @mk-ver
function ver($url){
    $ver = filemtime($_SERVER['DOCUMENT_ROOT'].$url);
    echo $url.'?v='.date("YmdHis",$ver);
}

该函数通过获取文件的最后修改时间生成动态版本号，确保只有当文件被修改时版本号才会变化。

2. 修改原有的样式链接调用方式。将原有的样式链接：


<link rel="stylesheet" href="{pboot:sitetplpath}/css/common.css">

替换为：


<link rel="stylesheet" href="{php}ver('/template/default/css/common.css');{/php}">

注意：路径部分必须为解析后的实际路径，可以在浏览器中按Ctrl+U查看源码并复制。

完成上述设置后，每当对common.css文件进行修改并保存时，页面刷新后即可看到带有时间戳的版本号附加在样式链接后面，从而确保样式能够即时生效。

此外，这种方法同样适用于JavaScript外部文件的处理。只需按照相同的逻辑进行配置即可。

如果你对这种方法有任何疑问或有更优的解决方案，欢迎在评论区留言交流！

推荐阅读