前提

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

  • 本文的方法只能实现博文内图片加速, 其余页面的图片无法加速 (为了避免与友链图片等冲突, 并且像文章封面这种图片难以只用 JS 实现替换为 Jsdelivr 链接) .

  • 本文能够成功的前提是图片在原文中用相对路径引用, 同时博客部署在 Github 上.

  • 本文的方法可能和懒加载有冲突, 因此建议关闭懒加载 (实际上使用了 Jsdelivr 后加载是飞速的, 根本不需要懒加载) .
  • 除 Butterfly 主题外, 其他主题的 JS 代码并没有经过严格的测试, 因此可能出现 Bug , 请及时留言.
  • 由于主题版本的原因, JS 代码可能会出错或者失效, 请及时留言.

JS 代码

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

Butterfly

1
2
3
4
5
6
7
8
9
10
11
12
var name = "cnyist";
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

1
2
3
4
5
6
7
8
9
10
var name = "cnyist";
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

1
2
3
4
5
6
7
8
9
10
11
12
var name = "cnyist";
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)
        }
    }
}

Next

1
2
3
4
5
6
7
8
9
10
var name = "cnyist";
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)
    }
}

Volantis

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var name = "cnyist";
var repository = "blog";
if(document.domain != 'localhost'){
    if(document.getElementById("post")){
        for (var key in document.getElementById("post").getElementsByTagName('img')){
            if (isNaN(key)){
                break;
            }
            document.getElementById("post").getElementsByTagName('img')[key].src = document.getElementById("post").getElementsByTagName('img')[key].src.replace(document.domain,"cdn.jsdelivr.net/gh/" + name + "/" + repository)
        }
    }
    if(document.getElementsByClassName("post-list")[0]){
        for (var key in document.getElementsByClassName("post-list")[0].getElementsByTagName('img')){
            if (isNaN(key)){
                break;
            }
            document.getElementsByClassName("post-list")[0].getElementsByTagName('img')[key].src = document.getElementsByClassName("post-list")[0].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/js 文件夹. 如果你的主题支持 _config.yml 中添加 JS 代码 (进入你的主题搜索 JS 关键字可能就可以搜到, 比如 Butterfly 就支持)

Butterfly _conifg.yml

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

当然部分主题的添加 JS 代码的方式可能不同, 有些是添加链接就好 (比如上面的例子), 有些是要写标签 (比如新版 Butterfly), 如果是写标签的话. 就将 <script src="/jsdelivr.js"></script> 写进去就好了 (注意 yml 文件语法) .

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

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

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

如果以上 js 代码没有你的主题, 你又不好意思留言 (或者不想等太久) , 那么就需要你自己更改以上 js 代码.以 Butterfly 主题的 js 代码为例, 将 article-container 改成你自己主题的文章内容的 Html 标签 id , 而 post 改成你自己主题 Post 文章特有的 id (就是说这个 id page 是没有的, 用于判断该页是 Post 还是 Page) .