在逛别人的博客的时候,发现了有一种叫go.php
的东西,可以经过自己站点的网页再跳转出去,方便SEO优化。但是像Hexo这类静态博客,想要从源HTML修改链接难度有点大,这里我们采用JavaScript动态修改。
部署Go Jumper到Github Pages
博主根据这个大佬的博客里的二次跳转,魔改了一个静态版:Go Jumper
所以,现在登陆你的Github账号,Fork这个仓库,选择你的个人账户。
Fork完毕后,点击Settings->Pages,将原分支从none
修改为master
,目录保持为/(root)
,然后Save。
这样,你自己的Go Jumper就成功部署在https://[你的Github用户名].github.io/go-jumper/
了。
当然,你也可以绑定自己的域名,或者部署到其他的平台,这里不展开赘述。
修改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-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(); });
async function checkLink(){ let link = document.getElementsByTagName('a'); for(var i=0;i<link.length;i++){ if(link[i].href==="" )continue; if(!await checkLocalSite(link[i].href)){ link[i].href = "[你的Go Jumper的部署地址]#"+window.btoa(link[i].href) } } } async function checkLocalSite(url){ try{ let reg = new RegExp(/\/\/(.*)\//g) let domain = reg.exec(url)[1].split('/')[0].split('.') domain = { check: (domain[domain.length-2]+'.'+domain[domain.length-1]).split('/')[0], original: domain } if(domain.check==="pai233.top" || domain.original[0].split('/')[0]==="localhost:4000")return true; 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>
|
广告
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:点击这里