【Butterfly主题】添加二级跳转页

pai233

发布于 2022-05-04 03:14:20

1.3K00

代码可运行

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

运行总次数：0

代码可运行

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

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

修改配置

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

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

修改完成后保存。

动态修改

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

$(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项：

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

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