A working example is here: https://immmmm.com/talk/

This setup focuses on two changes: customizing the Twikoo frontend, and pulling its content onto the homepage to replace the previous bber-style stream.

One note first: the styles and behavior below are based on Twikoo v1.6.4.

Frontend customization

The main idea is to hide the input box together with the “admin panel” button. In Twikoo’s settings, you first define a secret phrase. Only when that phrase matches on the frontend will the input area appear.

So the JavaScript checks whether the management ⚙️ icon exists. If there are two tk-icon elements, it means an administrator is logged in, and the default comment box is shown. Otherwise, it is removed.

<script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/twikoo.all.min.js"></script>
<script>
  twikoo.init({
    envId: 'https://xxxxxx.com',
    el: '#tcomment',
    onCommentLoaded: function () {
      var myShow = document.getElementsByClassName('tk-icon'),mySubmit = document.querySelector('.tk-submit')
      var myLength= 1;
      for (i = 0; i < myShow.length;i++) {myLength += myLength + i};
      if(myLength > 1){mySubmit.style.setProperty('display','block','important')}else{mySubmit.remove}
      var tkMain = document.getElementsByClassName('tk-main'),tkReplies = document.getElementsByClassName('tk-replies');
      for (var i=0;i<tkMain.length;i++){
        tkMain[i].index=i;tkMain[i].onclick = function () {tkReplies[this.index].classList.add("tk-replies-height");}
      }
    }
  })
</script>

At the same time, the interface is trimmed down to show less clutter and keep the page cleaner. The complete style block is below; if there are newer tweaks, checking the live page source is the most direct way to see them.

<style>
  .tk-comments .tk-submit,.tk-comments-count span:nth-child(2),.tk-comments-container .tk-comment .tk-avatar,.tk-comments-container .tk-comment .tk-nick,.tk-comments-container .tk-replies .tk-comment .tk-time,.tk-extra-text,.tk-replies .tk-meta,.tk-replies .tk-extra,.tk-extras .tk-extra:nth-child(2){display:none !important;}
  .tk-comment .tk-submit,.tk-comments-container .tk-replies .tk-comment .tk-avatar{display:block !important;}
  .tk-comments-container .tk-replies .tk-comment .tk-nick{display:inline-block !important;}
  .tk-comments-count{font-size:15px;}
  .tk-comments-count::before {content:"共 ";}
  .tk-comments-count::after {content:" 条";}
  .tk-time{color: #fafafa;font-size: 0.75em;font-style: italic;background-color: #3b3d42;display: inline-block;padding:0.25em 1em 0.2em 1em;}
  .tk-comment{margin:1em 0 4em !important;}
  .tk-replies .tk-comment{margin:0.5em 0 0!important;height:200px;}
  .tk-content{margin:1em 0 0.5em!important;}
  .tk-content blockquote:before{content:""}
  .tk-replies{max-height:0px !important;}
  .tk-replies .tk-action{position: absolute;right:0;top:20px;}
  .tk-replies.tk-replies-expand{max-height:none !important;}
  .tk-replies.tk-replies-expand.tk-replies-height .tk-comment{max-height:none !important;height: auto !important;}
  .tk-expand{margin:-25px 0 0;font-size:1em;font-weight:600;float: right;width:80px !important;}
  .tk-expand._collapse{margin:0 0 0;}
  .tk-extras{display: flex !important;}
  .tk-replies .tk-avatar{margin:1em 0.5rem 0 0;}
  .tk-avatar.tk-has-avatar{border-radius:50%;}
  .tk-replies .tk-main{font-size:14px !important;position:relative;}
  .tk-replies .tk-content{font-size:1em !important;}
  .tk-row{border-bottom: 1px solid #3b3d42;}
  .tk-submit{margin-bottom:3em;}
  .tk-replies .tk-row,.tk-submit .tk-row{border-bottom:none;}
  .dark-theme .tk-time{color: #aaa;}
  .tk-row.actions{margin-left:0 !important;}
</style>

Pulling it onto the homepage

The old workaround for homepage snippets had run its course, so the simpler option was to call Twikoo’s recent comments API directly. Then, on the frontend, JavaScript filters the results by url and nick so only the intended entries appear in the homepage carousel.

The logic looks like this. The full version can be inspected from the homepage source.

  twikoo.getRecentComments({
    ……
  }).then(function (res) {
    var bberHtml = ''
      $.each(res, function(i, item){
        if(item.url == '/talk/' && item.nick == '林木木'){ //只留下 url 为 talk，昵称为 林木木 的评论
          dataTime = '<span class="datatime">'+item.relativeTime+'</span>'
          bberHtml += '<li class="item item-'+(i+1)+'">'+dataTime+'： <a href="https://immmmm.com/talk/">'+urlToLink(item.commentText.substring(0,200))+'</a></li>'
        }
      });
    ……

In other words, only comments posted on /talk/ under the nickname 林木木 are kept. Their relative time is displayed, and the first 200 characters of the comment are turned into a homepage item linking back to the talk page.

Having a dedicated place to say something feels really good.