memos的第三方评论--twikoo

memos的第三方评论--twikoo

晓暮
11月2日发布

memos本身自带评论功能,但只有注册用户可以使用。
对于访客评论则只能安装第三方评论模块,目前我设置了twikoo评论,允许访客直接在memos下评论。评论是需要点击某一个memos的评论按钮,进入单独一页,然后在独立页面就可以看到memos以及下面的历史评论和评论组件。
图片[1] - memos的第三方评论--twikoo - 晓暮部落格

目前设置了必须输入昵称和邮箱才能评论,当然邮箱不必真实。如果输入真实邮箱,则可以在评论收到回复时邮件提醒。
部署的细节如下
1、先部署一个twikoo服务,如果已经有了可以跳过;我选择使用docker-compose部署

version: '3'
services:
   twikoo:
     image: imaegoo/twikoo
     container_name: twikoo
     restart: unless-stopped
     ports:
       - 8083:8080 #自定义左侧端口
     environment:
       TWIKOO_THROTTLE: 1000
     volumes:
       - ./data:/app/data

启动服务后访问ip+端口(我这里是8083)出现以下信息表明正常运行
图片[2] - memos的第三方评论--twikoo - 晓暮部落格
另外,twikoo后台点击上图右下角的齿轮进入,初次设置密码一定记住哦

2、在memos中添加对应js代码,js代码如下(注意将https://twikoo的服务地址,ip+端口/改为真实的地址);另外还需注意将https://cdn.staticfile.org/twikoo/1.6.16/twikoo.all.min.js中的版本与自己部署的twikoo版本对应,否则会有其他bug

// Memos v0.16.1 单条页面插入 Twikoo 评论
var twikooENV = 'https://twikoo的服务地址,ip+端口/'
function addTwikooJS() { 
  var memosTwikoo = document.createElement("script");
  memosTwikoo.src = `https://cdn.staticfile.org/twikoo/1.6.39/twikoo.all.min.js`;
  var tws = document.getElementsByTagName("script")[0];
  tws.parentNode.insertBefore(memosTwikoo, tws);
};
function startTwikoo() {
  startTW = setInterval(function(){
    var nowHref = window.location.href;
    var twikooDom = document.querySelector('#twikoo') || '';
    if( nowHref.replace(/^.*\/(m)\/.*$/,'$1') == "m"){
      if(!twikooDom){
        addTwikooJS()
        setTimeout(function() {
          var memoTw = document.querySelector('.gap-2') || '';
          memoTw.insertAdjacentHTML('afterend', '<div id="mtcomment"></div>');
          twikoo.init({
            envId: twikooENV,
            el: '#mtcomment',
            path: nowHref.replace(/^.*=?(http.*\/m\/[0-9]+).*$/,'$1'),
            onCommentLoaded: function () {
              startTwikoo();
            }
          })
        }, 1500)
      }else{
        clearInterval(startTW)
      }
    }
  }, 2000)
}
startTwikoo();

3、参考资料木木老师

4、我的memos-demo
memos部署请点击docker部署memos

© 版权声明
THE END
喜欢就支持一下吧
点赞 1 分享 赞赏
评论 共2条
取消
  1. 头像
    路人甲
    Android · Google Chrome

    画图

    回复
    1. 头像
      晓暮 作者
      Windows 10 · Google Chrome
      @ 路人甲

      嘿嘿

      回复
易航博客