登录
Memos添加评论及样式美化
2024年10月20日 05:20
这个标题的文章，估计在网上一搜一大把，之所以要写，只是为了日后自己再折腾时方便一些，不用再去找了，没办法，谁叫俺懒呀（从另一方面来讲，我这也是为我的博客水了一篇，计数器上又可以加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版本上测试没问题，高版本的不一定都好用，还需自个测试哈。
