使用 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

举个例子：

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

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

https://cdn.jsdelivr.net/gh/Insights-Labs/minimog-menu-badges/style-v1.css

and:

https://cdn.jsdelivr.net/gh/Insights-Labs/minimog-badges/main-v3.js

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

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/Insights-Labs/minimog-menu-badges/style-v1.css"
/>

and the script tag:

<script src="https://cdn.jsdelivr.net/gh/Insights-Labs/minimog-badges/main-v3.js" async></script>
现在这两个托管在 **Github** 上的文件已经在你的页面上运行了。<Twemoji emoji="party-popper" />
 
## 小贴士 - 缓存 如果你注意到了，我在文件名中加入了版本号 `main-v3.js` 和
`style-v1.css`。为什么需要添加这个**版本**号呢？ 这是因为 **jsDelivr** 会缓存你的资源。
这对于加快资源加载速度是有好处的，但是当你做出修改时，缓存不会立即清除，导致仍然加载旧的代码。
要清除缓存，你需要给 **jsDelivr** 发送邮件，这相当不方便。
所以我的简单解决方案是直接在文件名中加入版本号。
当你做出修改时，创建一个包含新版本号的新文件。例如：`main-v4.js` 或 `style-v2.css`，
然后修改嵌入链接，你就可以立即获得新代码，而无需等待缓存清除。 - 压缩
如果你的代码没有被压缩，只需在文件的 URL 中添加 `.min`，**jsDelivr**
就会为你的原始文件生成一个压缩版本。 举个例子： ```html
<script
  src="https://cdn.jsdelivr.net/gh/Insights-Labs/minimog-badges/main-v3.min.js"
  async
></script>

总结

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

Happy sharing