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版本上测试没问题,高版本的不一定都好用,还需自个测试哈。


已有 6 条评论
  1. 老何

    我在努力回忆你的博客原来的样子,感觉内容很熟悉,就是有点记不清。

    老何 2024年11月11日 16:33回复
    1. Feng

      估计是我域名换的勤了些,哈哈

      Feng 2024年11月12日 15:55回复
  2. klcdm

    老版本路过

    klcdm 2024年11月1日 14:27回复
    1. Feng

      确实还是老版本好使

      Feng 2024年11月2日 21:41回复
  3. 段先森

    应该说只适用于0.18,哈哈,再上的版本说实话真的是无语

    段先森 2024年10月28日 14:46回复
    1. Feng

      是的,还是留在老版本好,新版本的调来调去,烦透了

      Feng 2024年10月28日 15:39回复

说点什么?