本来不想折腾的,但是没忍住。
前阶段搞那些地图、友圈时本来想顺便搞下的,不过大部分的wp外链跳转,都是针对文章内的链接跳转,没有评论者的网址链接跳转,试了几次都不尽如人意,原本都放弃了,正好浏览到 风未止博客 上有一篇文章,讲解通过js调用的方式来给整站的外链添加中转页的方法,于是在多次请教博主后,自己慢慢摸索出了方案。这个方案的好处是不挑系统,随便 wp 还是 zblog 或者 discuz 都可以。
先看看效果:
文章内部的链接跳转
再看看评论区:
评论区的网站链接跳转
基本上一网打尽,哈哈哈,当然友情链接不用跳转,那是可控的链接。这里把风未止的代码详细化下(他说的相对笼统,懂代码的人一眼能懂,我这种菜鸟就要仔细研究研究了)分享给大家,我的想法是 把 html、js、css和图片放在根目录的【mygo】文件夹里,方便管理。
新建 go.js 文件,代码如下:
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 文件,代码如下:
<!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 ,代码如下:
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 文件头部添加:
<script src="/mygo/go.js"></script>
基本就完成了,其中目录地址和文件名,可修改为自己想要改的。做的时候也出现了一些问题,比如手机端的按钮和评论区的表情,都被转换到中间页,只要在JS文件里,添加相应的“需要排除的a标签类名class”即可。
好耶,自己动手,丰衣足食
我还没有加这类中间跳转页,总觉得感官不好
主要是发现,十多年前留言的朋友,很多博客都关闭了,域名也早就没续费,可我这里链接还在,可能存在一些风险,你懂的。。。
是的,有些域名没有付费,可能会变成颜色网。我以前的一个域名就是这样….. 有时间我研究一下也加上这个跳转功能。
回头我试试把评论区的搞上
那你要加很多很多的 class 标签
再加个倒计时,比如 5 秒后自动跳转,省的多点一下那个继续访问了。
这个可以有
这功能很不错啊!
这个功能用起来就高大上了,你这个主题英文字体是啥
老赵的 island 主题,至于字体啥的,你要用他了,他给啥我用啥