Memos添加评论及样式美化
这个标题的文章,估计在网上一搜一大把,之所以要写,只是为了日后自己再折腾时方便一些,不用再去找了,没办法,谁叫俺懒呀(从另一方面来讲,我这也是为我的博客水了一篇,计数器上又可以加1了),开始为博客除草了……
- 为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版本上测试没问题,高版本的不一定都好用,还需自个测试哈。
应该说只适用于0.18,哈哈,再上的版本说实话真的是无语
是的,还是留在老版本好,新版本的调来调去,烦透了