写在前面

如果没有木木老师的《Memos x Twikoo》我是根本不会把这两个毫不相干的系统联系起来的，在给Memos添加了Twikoo评论系统之后，因为增加了社交属性，所以BB的时候，都更带劲了。而美中不足的就是如果需要评论，需要跳转到Memos的页面内，这对于用户体验来说，还是略有不足的。而就在前不久，拾月老师的一篇《单页 Memos 添加 Artalk 评论，无限接近微博》让评论系统嵌入Memos页面内，从而可以沉浸式边BB边吐槽，让Momos从一个记录工具成功变身微博、朋友圈，可玩性大增。只不过我看教程用的都是Artalk这个评论工具，作为用着Twikoo很顺手，并不想更换的我来说，只能自己根据大佬们提供的思路，自行折腾了。

评论数量

关于Memos页面的搭建，直接用木木老师的就好。木木老师开发的版本，代码逻辑清晰，功能完善，开箱即用。Twikoo评论数量的实现在官网有相应API。

批量获取文章评论数

twikoo.getCommentsCount({
  envId: '您的环境id', // 环境 ID
  // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
  urls: [ // 不包含协议、域名、参数的文章路径列表，必传参数
    '/2020/10/post-1.html',
    '/2020/11/post-2.html',
    '/2020/12/post-3.html'
  ],
  includeReply: false // 评论数是否包括回复，默认：false
}).then(function (res) {
  console.log(res);
  // 返回示例: [
  //   { url: '/2020/10/post-1.html', count: 10 },
  //   { url: '/2020/11/post-2.html', count: 0 },
  //   { url: '/2020/12/post-3.html', count: 20 }
  // ]
}).catch(function (err) {
  // 发生错误
  console.error(err);
});

请求中，需要一个评论URL的数组，所以我的思路是先通过Api获取Memos的数据。在遍历获取到的数据之后，拿到我所希望的由URL组成的数组。

直接在 getFirstList（） 方法中增加一个方法 updateTiwkoo()，并传值。

function getFirstList() {
  var bbUrl = memos + "api/memo?creatorId=" + bbMemo.creatorId + "&rowStatus=NORMAL&limit=" + limit;
  fetch(bbUrl).then(res => res.json()).then(resdata => {
    updateTiwkoo(resdata.data)
    var nowLength = resdata.data.length
    if (nowLength < limit) { //返回数据条数小于 limit 则直接移除“加载更多”按钮，中断预加载
      document.querySelector("button.button-load").remove()
      return
    }
    page++
    offset = limit * (page - 1)
    getNextList()
  });
}

function updateTiwkoo(data) {
  var twiID = data.map((item) => memos + "m/" + item.id);
  twikoo.getCommentsCount({
    envId: envId, // 环境 ID
    urls: twiID,
    includeReply: true // 评论数是否包括回复，默认：false
  }).then(function (res) {
    updateCount(res)
  }).catch(function (err) {
    console.error(err);
  });

  function updateCount(res) {
    var twiCount = res.map((item) => {
      return Object.assign({},{'count':item.count})
    });
    var bbTwikoo = data.map((item,index) => {
      return {...item, ...twiCount[index]};
    });
    updateHTMl(bbTwikoo)
  }
}

在获取到评论数的数据后，直接将两个数组合并。形成一个包含有评论数的新数组。

评论内容

主要是在 Memos 页面内增加一个 供 Twikoo 初始化的容器。并通过一系列触发操作显示渲染。详细如下：

首先，我们需要在页面内增加一个按钮，通过点击来触发评论加载。

<a onclick='loadTwikoo(memosId)'></a>

其次，我们需要一个容纳 Twikoo 评论的容器，未触发时该容器隐藏。

<div class='twikoo-body twikoo-memosId d-none'></div>

最后，我们需要一个点击事件，将评论初始化。

function loadTwikoo(memosId) {
  var twikooDom = document.querySelector('.twikoo-memosId');
  var twikooCon = "<div id='twikoo'></div>"
  if (twikooDom.classList.contains('d-none')) {
    document.querySelectorAll('.twikoo-body').forEach((item) => {item.classList.add('d-none');})
    if(document.getElementById("twikoo")){
      document.getElementById("twikoo").remove() //如果页面中已经有其他Twikoo初始化，则移除。
    }
    twikooDom.insertAdjacentHTML('beforeend', twikooCon); 
    twikooDom.classList.remove('d-none');
    twikoo.init({
      envId: envId,
      el: '#twikoo',
      path: memosPath + "/m/" + memosId 
    });
  }else{
    twikooDom.classList.add('d-none');
    document.getElementById("twikoo").remove()
  }
}

值得一提的是，需要将该 Twikoo 的ID值传给触发的方法。

最终效果

效果如下