仅引入 js 实现博客 cdn 加速

博客 cdn 加速网上有很多的教程, 其中免备案, 最好用的就是 Jsdelivr 了, 我也写过一篇用 Jsdelivr 加速的文章, 但是似乎很多人一开始都看不懂如何用 Jsdelivr 加速… 这篇文章的原理也是基于 Jsdelivr 加速博文图片, 但是保留了原来的相对路径. 并且能够仅引入一个 JS 实现 Jsdelivr 加速 .

本文的方法只能实现博文内图片加速, 其余页面的图片无法加速 (为了避免与友链图片等冲突, 并且像文章封面这种图片难以只用 JS 实现替换为 Jsdelivr 链接) .
本文能够成功的前提是使用文章的同名文件夹存放图片并且用相对路径引用, 同时博客部署在 Github 上.
本文的方法可能和懒加载有冲突, 因此建议关闭懒加载 (实际上使用了 Jsdelivr 后加载是飞速的, 根本不需要懒加载) .
除 Butterfly 主题外, 其他主题的 JS 代码并没有经过严格的测试, 因此可能出现 Bug , 请及时留言.
由于主题版本的原因, JS 代码可能会出错或者失效, 请及时留言.

为了方便小白, 这里把部分主题 JS 代码写法都写出来了 (什么? 没有你的主题? 那就留言, 我看到有时间就会加上的) .

Butterfly

var name = "yunwanjia-cloud"; var repository = "blog"; if(document.domain != 'localhost'){ if(document.getElementById("post")){ for (var key in document.getElementById("article-container").getElementsByTagName('img')){ if (isNaN(key)){ break; } document.getElementById("article-container").getElementsByTagName('img')[key].src = document.getElementById("article-container").getElementsByTagName('img')[key].src.replace(document.domain,"cdn.jsdelivr.net/gh/" + name + "/" + repository) } } }

Matery

var name = "yunwanjia-cloud"; var repository = "blog"; if(document.domain != 'localhost'){ for (var key in document.getElementById("articleContent").getElementsByTagName('img')){ if (isNaN(key)){ break; } document.getElementById("articleContent").getElementsByTagName('img')[key].src = document.getElementById("articleContent").getElementsByTagName('img')[key].src.replace(document.domain,"cdn.jsdelivr.net/gh/" + name + "/" + repository) } }

Icarus

var name = "yunwanjia-cloud"; var repository = "blog"; if(document.domain != 'localhost'){ if(document.getElementsByClassName("post-copyright")[0] || document.URL == "https://" + document.domain + '/'){ for (var key in document.getElementsByClassName("card-content article")[0].getElementsByTagName('img')){ if (isNaN(key)){ break; } document.getElementsByClassName("card-content article")[0].getElementsByTagName('img')[key].src = document.getElementsByClassName("card-content article")[0].getElementsByTagName('img')[key].src.replace(document.domain,"cdn.jsdelivr.net/gh/" + name + "/" + repository) } } }

var name = "yunwanjia-cloud"; var repository = "blog"; if(document.domain != 'localhost'){ for (var key in document.getElementById("posts").getElementsByTagName('img')){ if (isNaN(key)){ break; } document.getElementById("posts").getElementsByTagName('img')[key].src = document.getElementById("posts").getElementsByTagName('img')[key].src.replace(document.domain,"cdn.jsdelivr.net/gh/" + name + "/" + repository) } }

将 JS 代码中 name 变量换成你自己的 Github 用户名, repository 变量换成你自己的存放博客的 Github 仓库. 如果以上主题是你使用的主题, 那么改完之后就可以引入这个 JS 开始使用了 (最好放在 Html 的 body 处引用, 因为 Html 的加载是从上至下的), 什么?! 你连引用 JS 都不会?! 好吧, 那接下来说得再详细一点.

首先根据你的主题, 将对应的 JS 代码保存为 jsdelivr.js 文件保存在主题的 source 文件夹. 如果你的主题支持 _config.yml 中添加 JS 代码 (进入你的主题搜索 JS 关键字可能就可以搜到, 比如 Butterfly 就支持)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HKw3WxFr-1588140172373)(/media/cloud/work/%E6%96%87%E7%AB%A0/%E4%BB%85%E5%BC%95%E5%85%A5%20js%20%E5%AE%9E%E7%8E%B0%E5%8D%9A%E5%AE%A2%20cdn%20%E5%8A%A0%E9%80%9F/1.png)]

那就直接加 /jsdelivr.js 上去就好了 (为什么我这里写的是 /js/jsdelivr.js ? 因为我把这个 JS 放在 source 文件夹下的 js 文件夹里了, 鉴于某些主题可能没有该文件夹, 因此放在 source 文件夹并且写 /jsdeliv.js 是最保险的) .

如果没有, 那就需要更改源文件了.

<script src="/jsdelivr.js"></script>

将以上代码放入 ejs 源文件的 body 标签里 (就是被 <body> 和 </body> 包围的区域, 你可以查找关键字 <body> 然后放到这个标签的下面).

将 article-container 改成你自己主题的文章内容的 Html 标签 id , 而 post 改成你自己主题 Post 文章特有的 id (就是说这个 id page 是没有的, 用于判断该页是 Post 还是 Page) .

原文链接：https://blog.csdn.net/qq_42579187/article/details/105831977?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918471416782350874924%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918471416782350874924&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-25-105831977-null-null.nonecase&utm_term=%E5%85%8D%E5%A4%87%E6%A1%88cdn

原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/3096