如果没有木木老师的《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值传给触发的方法。
最终效果
效果如下
