为 CSS 和 JavaScript 文件添加版本号可以有效避免浏览器缓存文件，以确保用户在更新网站文件后能够正确地加载最新的版本。以下是一些为 CSS 和 JavaScript 文件添加版本号的方式：

一. 时间戳

使用时间戳是一种简单而有效的方式。可以使用当前时间戳作为文件的版本号，例如：

<link rel="stylesheet" href="/css/styles.css?ver=1620856587" />
<script src="/js/scripts.js?ver=1620856587"></script>
复制

每次更新文件时，只需要将版本号更新为当前时间戳即可。

1. Jekyll中使用时间戳

可以使用 Liquid 标签来获取文件的最后修改时间，例如：

<link rel="stylesheet" href="/css/style.css?{{ site.time | date: '%s' }}">
<script src="/js/script.js?{{ site.time | date: '%s' }}"></script>
复制

这样，在生成的 HTML 中，文件的 URL 就会带上一个形如 ?1619776226 的时间戳参数。

二. MD5Hash

使用文件内容的 MD5 哈希值作为文件版本号。可以使用文件内容的 MD5 哈希值作为版本号，例如：

<link rel="stylesheet" href="/css/styles.css?ver=dc6b3d43b3e03c07e18e45ec6a1c029d" />
<script src="/js/scripts.js?ver=9d0e7a71c9eb8f7c15aeb6b1d6c93a6d"></script>
复制

每次更新文件时，需要计算文件内容的 MD5 哈希值，并将其用作版本号。

1. Jekyll中使用MD5Hash

可以使用 Liquid 标签结合 Jekyll 自带的 md5 过滤器来获取文件内容的哈希值，例如：

<link rel="stylesheet" href="/css/style.{{ '/css/style.css' | relative_url | md5 }}.css">
<script src="/js/script.{{ '/js/script.js' | relative_url | md5 }}.js"></script>
复制

这样，在生成的 HTML 中，文件的 URL 就会带上一个形如 .5d41402abc4b2a76b9719d911017c592.css 的哈希值后缀。 需要注意的是，如果使用此种方法，修改了 CSS 或 JavaScript 文件后，需要手动更新 HTML 中的文件引用，否则文件名不会改变，浏览器就会使用缓存中的旧文件。

三. 自动化工具

可以使用一些自动化工具来为 CSS 和 JavaScript 文件添加版本号，例如 webpack 和 gulp。这些工具可以自动计算文件的版本号并将其添加到文件名中。例如，webpack 中可以使用 [contenthash] 占位符来为文件生成唯一的版本号，例如：

<link rel="stylesheet" href="/css/styles.239r92r23923r.css" />
<script src="/js/scripts.239r92r23923r.js"></script>
复制

每次更新文件时，webpack 将自动计算文件的内容哈希值，并将其添加到文件名中。这样可以确保每个文件都有唯一的版本号。