Memos添加评论及样式美化

·
IT网络 Memos

这个标题的文章，估计在网上一搜一大把，之所以要写，只是为了日后自己再折腾时方便一些，不用再去找了，没办法，谁叫俺懒呀（从另一方面来讲，我这也是为我的博客水了一篇，计数器上又可以加1了），开始为博客除草了……

memos.webp

  • 为Memos加上Bing随机壁纸、顺便换个字体，这个只要在“设置”--“系统”--“自定义样式”和“自定义脚本”加入相应的代码就可以了，先在“自定义样式”加入：
.status-text{font-size:10px !important;border:none;color:rgb(156,163,175) !important;}
.tag-span,.dark .tag-span{border: 1px solid;border-radius:6px;padding:0px 6px;color:rgb(22,163,74) !important;font-size:12px !important;-webkit-transform: scale(calc(10 / 12));transform-origin: left center;}
.memo-content-text .link{color:rgb(22,163,74) !important;margin-right:-6px;}
header .bg-blue-600{display:none !important;}
.text-lg {font-size: 1rem !important;}
.header-wrapper,.sidebar-wrapper{width: 11rem !important;}
.filter-query-container{padding-bottom:0.5rem;}
html{background-image:url('https://bing.immmmm.com/img/bing?region=zh-CN&type=image');width:100%;height:100vh;background-position:center;background-size:cover;background-attachment:fixed;}
.w-full.bg-zinc-100,.bg-white,.hover\:bg-white:hover,.dark .dark\:bg-zinc-700,.dark .dark\:hover\:bg-zinc-700:hover,.memo-wrapper,.bg-gray-200,.dark .memo-wrapper,.memo-editor-container{--tw-bg-opacity:0.66 !important;}
.dark header.dark\:bg-zinc-800,aside.dark\:bg-zinc-800,.bg-gray-100,.dark html,.dark body{--tw-bg-opacity:0 !important;}
.memo-editor-container>.memo-editor{background-color: transparent !important;}

然后在“自定义脚本”加入相关脚本：

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreen.min.css';
link.media = 'print';
link.onload = function() {
  this.media = 'all';
};
var style = document.createElement('style');
style.innerHTML = '* { font-family: -apple-system,BlinkMacSystemFont,"LXGW WenKai Screen",PingFang SC,Noto Sans,Noto Sans CJK SC,Microsoft YaHei UI,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif,Segoe UI,Roboto,Helvetica Neue,Arial,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"; }';
var head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(link);
head.appendChild(style);
  • 为Memos添加Twikoo评论，这会只要在“自定义脚本”加入相关脚本：
// Memos插入 Twikoo 评论
var twikooENV = 'https://twikoo.057000.xyz/'  // Twikoo 评论地址
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();

至此Memos样式改了，评论也添加好了，水水一篇到手。其实之前也有折腾过Artalk评论，不过最新版本的Artalk版本，不过怎么折腾，就是加载不出来，再后来看到有些博主反映说是最新版有些问题，那好吧，我就不折腾了，直接用Twikoo，反正不就是一个评论嘛，用啥不是用呀。

最后说明一下，这个添加评论及样式美化，在0.18.1和0.18.0版本上测试没问题，高版本的不一定都好用，还需自个测试哈。

说点什么？