使用 Github 和 jsDelivr 轻松在网页中嵌入脚本

问题

你想要在网页中添加一个功能，但由于配置、更改和删除都太复杂，你不想修改页面上现有的脚本。 你只需要这个功能一段时间。

如果你有相同的需求，那么这里有一个我认为你应该采用的简单解决方案。

解决方案

• 在 Github 上托管你的 script（也可以包含 style）。

只需在 Github 上创建一个公开仓库，将你的脚本和样式 push 到那里。 （记得将其设为公开，这样才能被嵌入。）

• 使用 jsDelivr 作为你脚本的 CDN。

jsDelivr 是一个简单的工具，可以用作任何 npm 包、Github 仓库或 WordPress 插件的 CDN。

使用说明可在 jsDelivr 的主页上找到。以下是如何将其与 Github 仓库一起使用：

https://cdn.jsdelivr.net/gh/{user}/{repo}/{directory}/{file}

这是通过 jsDelivr 托管的 Github 文件的 script/style URL 结构：

• {user}: 你的 Github 用户名或组织名
• {repo}: 仓库名称
• {directory}: 文件夹名称（可选），因为你的文件可以放在仓库的根目录下
• {file}: 文件名，*.js 或 *.css

举个例子：

这是我的一个公开仓库：lab。 我在这个仓库中托管了 2 个文件，1 个 Javascript 文件和 1 个 CSS 文件。

所以这 2 个文件通过 jsDelivr 托管后的 URL 将会是：

https://cdn.jsdelivr.net/gh/yuanjingteam/lab/style-v1.css

and:

https://cdn.jsdelivr.net/gh/yuanjingteam/lab/fireworks.js

现在只需要使用 link 标签将它们嵌入到你的页面中：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yuanjingteam/lab/style-v1.css" />

and the script tag:

<script src="https://cdn.jsdelivr.net/gh/yuanjingteam/lab/fireworks.js" async></script>

现在这两个托管在 Github 上的文件已经在你的页面上运行了。

小贴士

• 我们可以在文件名中加入了版本号，比如 fireworks-v2.js 为什么需要添加这个版本号呢？ 这是因为 jsDelivr 会缓存你的资源。 这对于加快资源加载速度是有好处的，但是当你做出修改时，缓存不会立即清除，导致仍然加载旧的代码。 要清除缓存，你需要给 jsDelivr 发送邮件，这相当不方便。 所以我的简单解决方案是直接在文件名中加入版本号。 当你做出修改时，创建一个包含新版本号的新文件。例如：fireworks-v3.js， 然后修改嵌入链接，你就可以立即获得新代码，而无需等待缓存清除。 - 压缩 如果你的代码没有被压缩，只需在文件的 URL 中添加 .min，jsDelivr 就会为你的原始文件生成一个压缩版本。 举个例子：

<script src="https://cdn.jsdelivr.net/gh/yuanjingteam/lab/fireworks-v3.min.js" async></script>

总结

希望这个教程对你有帮助！

Happy sharing