记得之前还在Wordpress的时候,曾经捣鼓了一个跳转页(原文章链接),后来换成Typecho后,用的是姜先森的主题,也就直接用着他的跳转方式。回到Wordpress(后简称WP)后,就一直没弄,刚好中午闲逛,又让我看到了其它博主的跳转页,感觉不错,那就赶紧“作业抄起来”。
这个跳转页参照了空白大佬的,太多技术性的咱就不说了,都是抄作业,下面就细说一下步骤:
- 在网站根目录下新建一个文件夹,例如
mygo
,再在里面新建几个文件如:go.js
、go.html
、go.css
,跳转页的图片自己抠一下吧。 - 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 标签类名 window.addEventListener('load', () => { document.body.addEventListener('click', function (e) { let target = e.target; // 确保点击的目标是 <a> 标签 while (target && target.nodeName !== 'A') { target = target.parentNode; } // 如果是 <a> 标签并且满足以下条件才触发跳转逻辑 if (target && target.nodeName === 'A' && target.href && // 确保有 href 属性 target.href !== '#' && // 排除返回顶部链接 !checkParent(target, excludedClasses) && // 排除特定类名 !target.href.startsWith('javascript:') && // 排除 javascript: 链接 !target.href.includes('zfei.net') && // 排除特定域名 !target.href.includes('057000.xyz') && target.hostname !== window.location.hostname) { // 仅针对外部链接 e.preventDefault(); // Base64 编码目标链接 let encodedUrl = btoa(target.href); 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>
- 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; }
- 最后在主题的
footer.php
中添加一段代码:<script src="/mygo/go.js"></script>
其实,对于我们浏览体验来说,这样子操作等于多了一步跳转,体验上总归是不好,但为了愉快的玩耍博客,稳妥一点还是需要的。如果觉得跳转中间页很烦人,浏览器可以装个 Skip Redirect 插件,告别所有网站的中间页跳转,直接抵达目标地址。 哈哈,跳转功能只运行了几个小时让我撤掉了,正如Jeffer.Z大佬说的:
有备案加是对的,如果不需要备案就无所谓了,我反正是不加,影响大家跳转流畅度感觉
所以说作为一个没有备案的网站,这种影响大家畅游网络的事宜,确实就不需要了,如果是备案网站的话,建议还是加一个跳转,虽然不太友好,但碍于现实也没什么好办法。
羡慕技术性大佬,想怎么搞就怎么搞!
技术大佬可不是俺,俺都是抄作业的,哈哈
你这个评论框,电子邮件地址放在昵称前,也挺反常的。🤪
主题默认的,倒是没去注意过
之前还有人用知乎等第三方检测后?的跳转,还有复制那个脚本。影响就是有的得点,和增加等待时间的感觉。
类似于知乎那种样式的很多人在用,不过不管是定时跳转还是手动点击跳转,感觉或多或少都会影响使用,有备案的还是建议加一个,像我们这咱的加上去意义不大
加个自动读秒跳转也挺好的。
确实是好主意,不过想想我这没备案的,也没啥好担忧的,索性就取消了吧
有备案加是对的,如果不需要备案就无所谓了,我反正是不加,影响大家跳转流畅度感觉。我觉得这玩意挺反人类的,正常跳转居然需要停留到一个页面,然后看到一个免责声明,完全是某国家特色了。
也就加一个玩一下,说不定哪天就拿掉了