给博客加入链接安全跳转页(添加一个和CSDN一样的链接跳转页)

本文首发于青云工作室
原文链接为 https://qystudio.ltd/posts/25250.html

前言

或是出于优化 SEO，或是出于加强网站体验，很多博客都给文章中的外部链接加上了个二次跳转，本博客也不例外。

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

部署

点我fork此仓库，然后在vercel中部署

或使用他部署

修改

打开js/index.js修改个人信息

$(document).ready(()=>{

console.log("Running...")

    if(window.location.hash===""){

        document.getElementsByClassName("loading-text")[0].innerHTML = "参数错误，将跳转回青云工作室<dot>...</dot>"

        setTimeout(()=>{

            window.location.href = "https://qystudio.ltd/"/* 这里 */

        },5000)

        return;

    }

    let reg = new RegExp(/#(.*)/g);

    let base64 = reg.exec(window.location.hash)

    let link = window.atob(base64[1])

    let referrer = document.referrer.split('/')[2];

    referrer = referrer===undefined?"":referrer.split('.')

    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');

            }

        })

    }else{

        setTimeout(function(){

            window.location.href = link

        },3000)

    }

})

打开js/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==="qystudio.ltd" || domain.original[0].split('/')[0]==="localhost:4000")return true;//将domain.check修改为根或二级域名，domain.original[0].split('/')[0]修改为本地测试页面

        return false;

    }catch(err){

        return true;

    }

}

引入

最后在博客的_config.yml中引入

例如vlts的

import:

  script:

    - <script src="https://cdn.jsdelivr.net/gh/qystudio0/go-jumper/js/checker.js"></script>

如果你的主题不支持引入那么可以在head里添加

<script src="https://cdn.jsdelivr.net/gh/qystudio0/go-jumper/js/checker.js"></script>

结语

这样，当博客加载完毕的时候，博客的全部外链就会被加上二级跳转，但是源HTML里的外链不变。可以优化 SEO和加强网站体验