Twikoo添加中间页跳转
此折腾出自于老麦笔记,之前折腾的是zhihu跳转,没有使用自己的中间页跳转,而老麦的是使用自己的页面跳转,我觉得不错,近期花了一天时间研究,原来是这样,我属于照搬照抄,步骤如下。
第一步,在“主题\static\go”里面添加一个“index.html”,内容如下
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="robots" content="noindex"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <title>页面跳转 - 大峰笔记</title> <style> body, h1, p { margin: 0; padding: 0; } a { text-decoration: none; } button { padding: 0; font-family: inherit; background: none; border: none; outline: none; cursor: pointer; } html { width: 100%; height: 100%; background-color: #eff2f5; } body { padding-top: 100px; color: #222; font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.5; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @media (max-width: 620px) { body { font-size: 15px; } } .button { display: inline-block; padding: 10px 16px; color: #fff; font-size: 14px; line-height: 1; background-color: #0077d9; border-radius: 3px; } @media (max-width: 620px) { .button { font-size: 16px; } } .button:hover { background-color: #0070cd; } .button:active { background-color: #0077d9; } .link-button { color: #105cb6; font-size: 13px; } @media (max-width: 620px) { .link-button { font-size: 15px; } } .logo, .wrapper { margin: auto; padding-left: 30px; padding-right: 30px; max-width: 540px; } .wrapper { padding-top: 25px; padding-bottom: 25px; background-color: #f7f7f7; border: 1px solid #babbbc; border-radius: 5px; } @media (max-width: 620px) { .logo, .wrapper { margin: 0 10px; } } h1 { margin-bottom: 12px; font-size: 16px; font-weight: 700; line-height: 1; } @media (max-width: 620px) { h1 { font-size: 18px; } } .warning { color: #c33; } .link { margin-top: 12px; word-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .link.is-expanded { word-wrap: break-word; white-space: normal; } .actions { margin-top: 15px; padding-top: 30px; text-align: right; border-top: 1px solid #d8d8d8; } .actions .link-button+.link-button { margin-left: 30px; } </style> </head> <body> <div class="logo"> <a href="/"></a> </div> <div class="wrapper"> <div class="content"> <h1>即将离开大峰笔记</h1> <p class="info">您即将进行页面跳转,请注意您的帐号和财产安全。</p> <p class="link"></p> </div> <div class="actions"> <a class="button">继续访问</a> </div> </div> <script> // 获取url参数 const urlParams = new URLSearchParams(window.location.search); const redirectUrl = urlParams.get('url'); if (redirectUrl) { // 设置链接文本和链接地址 const linkElement = document.querySelector('.link'); linkElement.textContent = redirectUrl; // linkElement.href = redirectUrl; // 设置按钮链接地址 const continueLinkElement = document.querySelector('.button'); continueLinkElement.href = redirectUrl; } </script> </body> </html>
第二步,在所需添加twikoo的地方,如“single.html”里面的合适位置,添加如下
<div id="tcomment"></div> <script src="https://cdn.staticfile.org/twikoo/1.6.39/twikoo.min.js"></script> <script>twikoo.init({ envId: '你的twikoo地址', el: '#tcomment' , onCommentLoaded: function () { console.log('评论加载完成'); document.querySelectorAll('.tk-comments-container a').forEach(function(aEl){ if(!aEl.href.startsWith(window.location.origin)){ aEl.href='/go/?url='+encodeURI(aEl.href); } }); } })</script>
最后hugo / hugo server上传就行。
我就是直接搬知乎的。
最近发现`twikoo.all.min.js`应该去掉.all,官方文档上有说明。不是使用tcb部署的话,前端不用全部加载,减少几十KB加载也是很不错的。
还有就是应该是添加一个https://dafeng.xyz/go/index.html这个形式的页面,不应该让其跳转一次404,好久没接触过Hugo了,不知有没有说错。
我已经把.all去掉了。现在感觉爆赞。其实我这个404,跳转页面https://网址/go/?url=网址,里面的“go”替换成随便输什么都会跳到中间页,/go/index.html这个形式我哪天再试试去
我知道这样同样会跳转,虽然结果是一样的,但是这样子做会有一个不好的地方,就是当其他地方需要真正的404页面时也会进入这个跳转页面,这样子做我认为是不妥的。因此我认为只需要在/static/go/这个目录里新建一个index.html即可,这样子无需经过404,也能正确使用https://dafeng.xyz/go/来打开跳转页面。
有道理,我再改一下👌
这个HUGO链接跳转和知乎的一模一样,不错 好看
我直接抄袭,哈哈