给静态博客加入链接安全跳转页

pai233

发布于 2022-01-12 15:05:15

8900

发布于 2022-01-12 15:05:15

文章被收录于专栏：pai233的专栏pai233的专栏

在逛别人的博客的时候，发现了有一种叫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，修改以下内容：

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，内容如下：

$(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>标签前加入以下内容：

<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中，博主插入了广告代码，有需要的可自行删除：

<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>