在逛别人的博客的时候,发现了有一种叫go.php的东西,可以经过自己站点的网页再跳转出去,方便SEO优化。但是像Hexo这类静态博客,想要从源HTML修改链接难度有点大,这里我们采用JavaScript动态修改。

部署Go Jumper到Github Pages

博主根据这个大佬的博客里的二次跳转,魔改了一个静态版:Go Jumper
image.png

所以,现在登陆你的Github账号,Fork这个仓库,选择你的个人账户。
image.png

Fork完毕后,点击Settings->Pages,将原分支从none修改为master,目录保持为/(root),然后Save。
image.png

这样,你自己的Go Jumper就成功部署在https://[你的Github用户名].github.io/go-jumper/了。
image.png

当然,你也可以绑定自己的域名,或者部署到其他的平台,这里不展开赘述。

修改配置

为了方便,我们这边直接在线修改:打开https://github.com/[你的Github用户名]/go-jumper/edit/master/config.json,修改以下内容:

1
2
3
4
5
6
7
8
9
10
{
"sitename":"pai233の小站", //修改为你的站点名
"allowlist": [
"pai233.top" //允许的来源
],
"backTo": { //来源不合法、解析失败时的返回页面
"url": "https://blog.pai233.top/",
"sitename": "pai233の小窝"
}
}

修改完成后保存。

动态修改

新建[主题根目录]/source/js/link-checker.js,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(document).ready(function(){
checkLink();
});
$(document).on('pjax:complete', function () {
checkLink();
});
async function checkLink(){
console.log("Running...")
let link = document.getElementsByTagName('a');
//console.log(link)
for(var i=0;i<link.length;i++){
if(link[i].href==="" || link[i].className==="gitter-open-chat-button")continue;//去除Gitter聊天框的影响
if(!await checkLocalSite(link[i].href)){
link[i].href = "https://[你的Go Jumper部署地址]/#"+window.btoa(link[i].href)
console.log("edit.")
}
}
}
async function checkLocalSite(url){
try{
console.log("check:",url)
let domain = url.split("/")[2];
if(domain.endsWith("[你的博客域名]")||domain.endsWith("[本地测试域名]"))return true;
return false;
}catch(err){
return true;
}
}

然后,我们要将代码注入到主题中,在主题_config.yml中找到inject项:

1
2
3
4
5
6
7
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
- <script src="/js/link-checker.js"></script>
bottom:
# - <script src="xxxx"></script>

这样,当博客加载完毕的时候,博客的全部外链就会被加上二级跳转,但是源HTML里的外链不变。

注意

index.html中,博主插入了广告代码,有需要的可自行删除:

1
2
3
4
5
6
7
8
9
10
11
<div id="google-ads">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-1820088263747150"
data-ad-slot="3739765077"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>