Twikoo添加中间页跳转 Sat, Aug 17, 2024

此折腾出自于老麦笔记，之前折腾的是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上传就行。