Memos轻量级笔记工具整合Twikoo评论系统

我已经使用Memos有一段时间了。它是一个轻量级的笔记工具，而且可以私有部署。我将它用来记录宝宝的成长以及日常的随笔。我计划长期使用这个工具，因为我深信若干年后再回顾这些记录，一定会给我带来很多珍贵的回忆和纪念。

想法

我感觉这个工具缺少个评论，总感觉怪怪的，所以准备整一个，现有资源了解到可以整合artalk和twikoo这两个，正好我博客使用的就是twikoo，果断选择了twikoo

感谢：
林木木twikoo方案：Memos x Twikoo
云晓晨artalk方案：WordPress 借助 Memos 搭建博客空间

我的魔改

我选用了两者方案的结合，同时对部分js细节做了优化和调整

1. 登录Memos后台
2. 进入：设置->系统，在自定义样式和自定义脚本添加如下内容
3. 自定义样式

   a.time-text:after { content: ' 评论 💬 '; }
   a.time-text:hover::after {
   display: inline;
   cursor: pointer;
   }
   #twikoo{padding: 1rem;background-color: rgb(63,63,70);margin: 1rem 0;border-radius: .5rem;color: #fff !important;}
   .twicon{position: absolute;right: 1rem;}
   .btns-container.space-x-2{margin-right:1.5rem;}
   .action-button-container{color: #e5e7eb;}
   .action-button-container a{display:none !important;}

4. 自定义脚本

   var twikooENV = 'https://twikoo.xx.xx/'//twikoo部署地址
   function addTwikooJS() { 
   var memosTwikoo = document.createElement("script");
   memosTwikoo.src = https://blog.lovelu.top/plugin/twikoo.all.min.js;
   var tws = document.getElementsByTagName("script")[0];
   tws.parentNode.insertBefore(memosTwikoo, tws);
   };
   function addComIcon(){
   var memoTwIcons = document.querySelectorAll('.time-text') || '';
   if(memoTwIcons){
   for(var i=0;i < memoTwIcons.length;i++){
       memoTwIcons[i].insertAdjacentHTML('afterbegin', '<div class="twicon"><svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M896 138.667H128c-38.4 0-64 25.6-64 64v544c0 38.4 25.6 64 64 64h128v128c83.2 0 166.4-44.8 256-128h384c38.4 0 64-25.6 64-64v-544c0-38.4-25.6-64-64-64zm0 608H486.4l-19.2 19.2c-51.2 51.2-102.4 83.2-147.2 96v-115.2H128v-544h768v544z" fill="#8a8a8a"/><path d="M256 477.867a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM448 477.867a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM640 477.867a64 64 0 1 0 128 0 64 64 0 1 0-128 0z" fill="#8a8a8a"/></svg></div>');
   }
   }
   };
   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('.memo-wrapper') || '';
         memoTw.insertAdjacentHTML('afterend', '<div id="mtcomment"></div>');
         twikoo.init({
           envId: twikooENV,
           el: '#mtcomment',
           path: nowHref.replace(/^.*=?(http.*\/m\/[0-9]+).*$/,'$1'),
           onCommentLoaded: function () {
             startTwikoo()
           }
         })
       }, 500)
     }else{
       clearInterval(startTW)
     }
   }
   if(nowHref.replace(/^.*\/(explore).*$/,'$1') == "explore" || nowHref.replace(/^.*\/(u).*$/,'$1') == "u"){
     var memoTwIcons = document.querySelectorAll('.time-text .twicon') || '';
     memoTwIcons.forEach(memoTwIcon => {memoTwIcon.remove();});
     addComIcon()
   }
   }, 1000)
   }
   startTwikoo();

写在最后

整个过程还是很简单的，直接复制，修改评论的地址就可以了，前提是twikoo和artalk都需要私有部署

最后看看大概效果吧

感谢您的来访，获取更多精彩文章请收藏本站。