【butterfly】增加评论热评轮播功能

此功能需关闭评论的懒加载 _config.butterfly.yml –> comments: –> lazyload: false，否则需等页面活动至评论区才会加载。

comments:
  # Up to two comments system, the first will be shown as default(最多两条评论系统，第一条将显示为默认)
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: Twikoo # Valine,Disqus
  text: true # Display the comment name next to the button(显示评论的名字旁边的按钮)
  # lazyload: The comment system will be load when comment element enters the browser's viewport.(LazyLoad：当评论元素进入浏览器的视区时，评论系统将被加载。)
  # If you set it to true, the comment count will be invalid(如果将其设置为True，则评论计数将无效)
  lazyload: false
  count: true # Display comment count in post's top_img(在文章的top_img中显示评论计数)
  card_post_count: true # Display comment count in Home Page(在主页中显示评论计数)

修改 twikoo.pug

打开\themes\butterfly\layout\includes\third-party\comments\twikoo.pug，添加以下内容。

- const { envId, region, option } = theme.twikoo
- const { use, lazyload, count } = theme.comments

script.
  (()=>{
    const init = () => {
      twikoo.init(Object.assign({
        el: '#twikoo-wrap',
        envId: '!{envId}',
        region: '!{region}',
        onCommentLoaded: function () {
          btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
+          setTimeout(function(){
+            let tk_comment = document.querySelectorAll('.tk-comments-container .tk-comment')
+            if (tk_comment.length > 0) {
+              let html = `<div class="swiper-wrapper">`
+              for (let i = 0; i < tk_comment.length; i++) {
+                let tk_id = tk_comment[i].getAttribute('id') || ''
+                let tk_nick = tk_comment[i].querySelector('.tk-nick')?.innerText || ''
+                let tk_href = tk_comment[i].querySelector('.tk-nick')?.href || ''
+                let tk_avatar = tk_comment[i].querySelector('.tk-avatar-img')?.src || ''
+                let tk_time = tk_comment[i].querySelector('.tk-time')?.innerText || ''
+                let tk_city = tk_comment[i].querySelector('.tk-extras .tk-extra:first-child span:last-child')?.innerText || ''
+                let tk_content = tk_comment[i].querySelector('.tk-content>span:last-child')?.innerHTML || ''
+                tk_content = tk_content.replace(/\n/g, '') // replace \n
+                tk_content = tk_content.replace(/<blockquote>.*?<\/blockquote>/gi, '') // replace blockquote
+                tk_content = tk_content.replace(/<pre.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+                html += `
+                  <div class="swiper-slide">
+                    <div class="comment-barrage-item">
+                      <div class="barrage-info">
+                        <a class="barrage-title" title="跳转至评论区" href="#post-comment">热评</a>
+                        <a href="${tk_href ? tk_href + '" target="_blank" rel="noopener noreferrer" title="访问 '+ tk_nick +'"' : 'javascript:void(0);"'}>
+                          <img class="barrage-avatar" src="${tk_avatar}">
+                        </a>
+                        <span class="barrage-nick">${tk_nick}</span>
+                        <span class="barrage-city">${tk_city}</span>
+                        <span class="barrage-time">${tk_time}</span>
+                        <a class="barrage-close" onclick="eurkon.switchCommentBarrage()" title="隐藏热评"><i class="fa-solid fa-xmark"></i></a>
+                      </div>
+                      <div class="barrage-content">
+                        <a title="跳转至该评论" href="#${tk_id}">${tk_content}</a>
+                      </div>
+                    </div>
+                  </div>`
+              }
+              html += '</div>'
+              let barrageContainer = document.getElementById('comment-barrage') || document.createElement('div')
+              barrageContainer.id = 'comment-barrage'
+              barrageContainer.innerHTML = html
+              barrageContainer.style.display = window.localStorage.getItem('commentBarrageDisplay') === 'false' ? 'none' : 'block'
+              document.getElementById('post-comment').appendChild(barrageContainer)
+              var barrageSwiper = new Swiper('#comment-barrage', {
+                direction: 'vertical',
+                loop: true,
+                mousewheel: true,
+                autoplay: {
+                  delay: 3000,
+                  disableOnInteraction: true,
+                }
+              })
+              barrageContainer.onmouseenter = function () {
+                barrageSwiper.autoplay.stop()
+              };
+              barrageContainer.onmouseleave = function () {
+                barrageSwiper.autoplay.start()
+              };
+            }
+          }, 1000)
        }
      }, !{JSON.stringify(option)}))
    }

    const getCount = () => {
      const countELement = document.getElementById('twikoo-count')
      if(!countELement) return
      twikoo.getCommentsCount({
        envId: '!{envId}',
        region: '!{region}',
        urls: [window.location.pathname],
        includeReply: false
      }).then(function (res) {
        countELement.innerText = res[0].count
      }).catch(function (err) {
        console.error(err);
      });
    }

    const runFn = () => {
      init()
      !{count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : ''}
    }

    const loadTwikoo = () => {
      if (typeof twikoo === 'object') {
        setTimeout(runFn,0)
        return
      } 
      getScript('!{url_for(theme.asset.twikoo)}').then(runFn)
    }

    if ('!{use[0]}' === 'Twikoo' || !!{lazyload}) {
      if (!{lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
      else loadTwikoo()
    } else {
      window.loadOtherComment = () => {
        loadTwikoo()
      }
    }
  })()

直接删除+号，已对齐缩进，否则导致报错。

增加自定义样式

在自定义scss文件中添加以下代码：

// 热评start
#comment-barrage {
  display: block;
  position: fixed;
  z-index: 1;
  font-size: 15px;
  bottom: 1rem;
  right: 3rem;
  width: 20rem;
  height: 10rem;
  overflow: hidden;
  .comment-barrage-item {
    opacity: 0;
    width: 98%;
    height: fit-content;
    max-height: 10rem;
    padding: .5rem;
    position: absolute;
    margin: 0 3px;
    bottom: 5px;
    background: var(--white);
    border: var(--border);
    border-radius: 8px;
    box-shadow: var(--card-box-shadow);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }
  .swiper-slide-active .comment-barrage-item {
    opacity: 1;
    &:hover {
      background-color: var(--backcolor);
    }
    // 头部
    .barrage-info {
      overflow: hidden;
      font-size: 90%;
      height: 35px;
      span {
        margin: 0 .2em;
        vertical-align: middle;
      }
      .barrage-title {
        font-weight: bold;
        padding: .3em 0.5em;
        background: var(--forecolor);
        color: var(--white);
        margin-right: .5em;
        border-radius: .5em;
        vertical-align: middle;
      }
      // 头像
      .barrage-avatar {
        height: 2em;
        width: 2em;
        border-radius: 50%;
        vertical-align: middle;
      }
      // 昵称
      .barrage-nick {
        font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
        font-weight: bold;
      }
      // 关闭按钮
      .barrage-close {
        position: absolute;
        top: 0;
        right: 10px;
      }
    }
    // 正文
    .barrage-content {
      padding-top: 5px;
      max-height: 95px;
      height: fit-content;
      overflow-y: scroll;
      text-align: justify;
      word-break: break-all;
      a {
        color: var(--font-color);
        &:hover {
          color: var(--theme-color);
        }
      }
      p {
        margin: 0;
      }
      img {
        width: 3em;
      }
    }
  }
}
// 热评end

增加隐藏/显示热评 js

在自定义js文件中加入以下代码：

// 切换热评start
function switchCommentBarrage() {
    let flag = window.localStorage.getItem('commentBarrageDisplay') // undefined || false
    document.getElementById('comment-barrage').style.display = flag === 'false' ? 'block' : 'none'
    // 本地缓存一天，刷新或切换页面时仍 隐藏或显示 热评。
    window.localStorage.setItem('commentBarrageDisplay', flag === 'false' ? 'undefined' : 'false', 86400000)
}
// 切换热评end

引入 swiper 轮播功能

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # 轮播
    - <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css">
    # 轮播
    - <script data-pjax src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.js"></script>