IT网络 18 6

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

    1. 段先森

      2024-10-28 22:46

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

        1. Feng

          2024-10-28 23:39
          @段先森

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

    2. klcdm

      2024-11-01 22:27

      老版本路过

        1. Feng

          2024-11-03 05:41
          @klcdm

          确实还是老版本好使

    3. 老何

      2024-11-12 00:33

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

        1. Feng

          2024-11-12 23:55
          @老何

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