本来不想折腾的，但是没忍住。

前阶段搞那些地图、友圈时本来想顺便搞下的，不过大部分的wp外链跳转，都是针对文章内的链接跳转，没有评论者的网址链接跳转，试了几次都不尽如人意，原本都放弃了，正好浏览到 风未止博客 上有一篇文章，讲解通过js调用的方式来给整站的外链添加中转页的方法，于是在多次请教博主后，自己慢慢摸索出了方案。这个方案的好处是不挑系统，随便 wp 还是 zblog 或者 discuz 都可以。

先看看效果：

文章内部的链接跳转

再看看评论区：

评论区的网站链接跳转

基本上一网打尽，哈哈哈，当然友情链接不用跳转，那是可控的链接。这里把风未止的代码详细化下（他说的相对笼统，懂代码的人一眼能懂，我这种菜鸟就要仔细研究研究了）分享给大家，我的想法是 把 html、js、css和图片放在根目录的【mygo】文件夹里，方便管理。

新建 go.js 文件，代码如下：

  1. function checkParent(element, classNames) {
        while (element) {
            if (element.classList && classNames.some(cn => element.classList.contains(cn))) {
                return true;
            }
            element = element.parentElement;
        }
        return false;
    }
    var excludedClasses = ['card-link', 'friend-item', 'contact-item', 'footer-item']; // 添加需要排除的a标签类名class
    window.addEventListener('load', (event) => {
        document.body.addEventListener('click', function(e) {
            let target = e.target;
            while (target && target.nodeName !== 'A') {
                target = target.parentNode;
            }
            if (target && target.nodeName === 'A' &&
                !checkParent(target, excludedClasses) &&
                !target.href.includes('pwsz.com') &&
                !target.href.includes('shefu.cn') &&
                !target.href.includes('zswp.com') &&
                !target.href.includes('m80.cn') &&
                !target.href.includes('bksy.org') &&
                !target.href.includes('beian.miit.gov.cn') &&
                target.hostname !== window.location.hostname) {
                e.preventDefault();
                let encodedUrl = btoa(target.href); // Base64 encode the URL
                let url = '/mygo/go.html?target=' + encodedUrl;
                window.open(url, '_blank');
            }
        });
    });

新建一个 go.html 文件，代码如下：

  1. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="go.css">
        <title>即将离开品味苏州</title>
    </head>
    <body>
    <div class="tiaozhuan-all">
        <div class="tiaozhuan-nrong">
            <div class="tiaozhuan-title">您即将离开 『 品味苏州博客 』 ，跳转到以下外部链接</div>
            <div id="tiaozhuan-link"></div>
            <div class="tiaozhuan-info">请自行识别该链接是否安全，并保管好个人信息。</div>
            <div class="tiaozhuan-button"><a href='' id='direct-link'>继续访问</a></div>
        </div>
    </div>
    <script>
        const params = new URLSearchParams(window.location.search);
        const encodedTarget = params.get('target');
        const target = atob(encodedTarget); // 使用 atob 进行 Base64 解码
        if (target) {
            document.getElementById('direct-link').href = target;
            document.getElementById('tiaozhuan-link').textContent = '' + target; // 直接显示目标地址    
        } else {
            console.error('未指定重定向目标。');
        }
    </script>
    </body>
    </html>

其中引入的CSS文件，单独创建为 go.css ，代码如下：

  1. body {
        background: #ececec;
    }
    .tiaozhuan-all {
        position: relative;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -10px;
        border-radius: 10px;
        background-image: url('go.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: #666;
        word-break: break-all;
        max-width: 700px;
        height: 350px;
        text-align: center;
        font-size: 0.85rem;
        overflow: hidden;
        margin: 100px auto 0;
        @include breakpoint('small') {
            aspect-ratio: 2 / 1;
            height: auto;
        }
    }
    .tiaozhuan-nrong {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px 20px 30px 20px;
    }
    .tiaozhuan-title {
        font-size: 1.3rem;
        color: #222;
        line-height: 1.4;
        margin-bottom: 4px;
    }
    .tiaozhuan-info {
        margin-top: 6px;
    }
    .tiaozhuan-button {
        margin-top: 20px;
    }
    .tiaozhuan-button a {
        color: #fc9151;
        border-radius: 4px;
        padding: 10px 30px;
        font-size: .85rem;
        border: 0.5px solid #fc9151;
        display: inline-block;
        text-decoration: none;
    }

最后别忘记把背景图，也丢在这个目录中，最后在主题的 head.php 文件头部添加：

  1. <script src="/mygo/go.js"></script>

基本就完成了，其中目录地址和文件名，可修改为自己想要改的。做的时候也出现了一些问题，比如手机端的按钮和评论区的表情，都被转换到中间页，只要在JS文件里，添加相应的“需要排除的a标签类名class”即可。