在逛别人的博客的时候,发现了有一种叫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

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

修改index.js

为了方便,我们这边直接在线修改:打开https://github.com/[你的Github用户名]/go-jumper/edit/master/js/index.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
29
30
31
32
document.getElementsByClassName("loading-text")[0].innerHTML = "参数错误,将跳转至pai233の小窝<dot>...</dot>"//修改为你自己的提示
setTimeout(()=>{
window.location.href = "https://blog.pai233.top/"//修改为你自己的主页
},5000)
```
```js
if(/*referrer[referrer.length-3]+"."+ 二级域名可选*/referrer[referrer.length-2]+'.'+referrer[referrer.length-1]!="pai233.top"/*修改为你的博客的根/二级域名,二级域名需要去掉前面的注释*/ || document.referrer===""){
swal.fire({
title: "确定访问?",
text: "该网址不属于咕咕小站,你确定要打开"+link+"吗?",//修改为你自己的提示
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "确定",
cancelButtonText: "取消",
}).then(function(isConfirm){
console.log(isConfirm)
if (isConfirm) {
console.log('setTimeout')
setTimeout(function(){
window.location.href = link
},3000)
}
else {
window.opener=null;
window.open('','_self');
window.close();
/* 微信浏览器关闭 */
WeixinJSBridge.call('closeWindow');
}
})
}

然后直接commit,现在,你可以通过https://[你的Go Jumper部署地址]#[跳转网页的base64编码]来测试一下。

博客动态修改

这里以博主使用的Hexo+NexT主题为例,新建[主题根目录]/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
29
30
31
32
33
34
35
36
$(document).ready(function(){
checkLink();
});
// 若博客启用了Pjax请去掉注释。
// $(document).on('pjax:complete', function () {
// checkLink();
// });
async function checkLink(){
let link = document.getElementsByTagName('a');
for(var i=0;i<link.length;i++){
//如果你的博客添加了Gitter聊天窗,请去掉下方注释
if(link[i].href==="" /*|| link[i].className==="gitter-open-chat-button"*/)continue;
if(!await checkLocalSite(link[i].href)){
link[i].href = "[你的Go Jumper的部署地址]#"+window.btoa(link[i].href)
//console.log("edit.")
}
}
}
async function checkLocalSite(url){
try{
//console.log("check:",url)
let reg = new RegExp(/\/\/(.*)\//g)
let domain = reg.exec(url)[1].split('/')[0].split('.')
//console.log(domain,domain[domain.length-2]+'.'+domain[domain.length-1])
domain = {
//二级域名请去除下一行的注释
check: (/*domain[domain.length-3]+'.'+*/domain[domain.length-2]+'.'+domain[domain.length-1]).split('/')[0],
original: domain
}
//console.log(domain)
if(domain.check==="pai233.top" || domain.original[0].split('/')[0]==="localhost:4000")return true;//将domain.check修改为根或二级域名,domain.original[0].split('/')[0]修改为本地测试页面
return false;
}catch(err){
return true;
}
}

最后到[主题根目录]/layout/_layout.swig中,在</head>标签前加入以下内容:

1
2
3
4
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/js/link-checker.js"></script>
<script src="https://blog.pai233.top/js/sweetalert.js"></script>
<link rel="stylesheet" href="https://blog.pai233.top/css/sweetalert.css">

这样,当博客加载完毕的时候,博客的全部外链就会被加上二级跳转,但是源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>

广告

我的博客即将同步至腾讯云+社区,邀请大家一同入驻:点击这里