AI摘要:本文介绍了如何给Memos添加第三方评论系统Twikoo和Artalk的代码。对于Twikoo评论系统,需要在Memos的单条页面插入相应的脚本,并设置相关参数。而对于Artalk评论系统,需要插入相应的JS代码,并设置页面元素和样式。通过这两种评论系统,可以为Memos添加评论功能,并实现自定义样式和功能。
代码来源@木木老师
给Memos添加Twikoo评论
2023.10.23更新脚本以适用于memos v0.16.1
// Memos v0.16.1 单条页面插入 Twikoo 评论
var twikooENV = 'https://你的.com/'
function addTwikooJS() {
var memosTwikoo = document.createElement("script");
memosTwikoo.src = `https://cdn.staticfile.org/twikoo/1.6.22/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评论
自定义样式
隐藏评论数
.text-sm.text-gray-500.ml-1{display:none !important;}
自定义代码
// 用 JS 向页面中插入 JS
function addArtalkJS() {
var memosArtalk = document.createElement("script");
memosArtalk.src = `https://unpkg.com/artalk/dist/Artalk.js`;
var artakPos = document.getElementsByTagName("script")[0];
artakPos.parentNode.insertBefore(memosArtalk, artakPos);
};
// div
function startArtalk() {
start = setInterval(function(){
var artalkDom = document.getElementById('Comments') || '';
var memoAt = document.querySelector('.resource-wrapper') || '';
var memoLoading = document.querySelector('.action-button-container') || '';
var memoLoadingA = document.querySelector('.action-button-container a') || '';
if(window.location.href.replace(/^.*\/(m)\/.*$/,'$1') == "m" && memoLoadingA){
memoLoading.innerHTML = "评论加载中……"
}
if(window.location.href.replace(/^.*\/(m)\/.*$/,'$1') == "m" && !artalkDom){
addArtalkJS()
if(memoAt){
clearInterval(start)
var cssLink = document.createElement("link");
cssLink.rel = "stylesheet";
cssLink.href = "https://unpkg.com/artalk/dist/Artalk.css";
document.head.appendChild(cssLink);
memoAt.insertAdjacentHTML('afterend', '<div id="Comments"></div>');
setTimeout(function() {
Artalk.init({
el: '#Comments',
pageKey: location.pathname,
pageTitle: document.title,
server: 'https://artalk.loliko.cn',
site: 'memos',
darkMode: 'auto'
});
Artalk.on('list-loaded', function() {
// console.log('评论加载完成');
memoLoading.innerHTML = ''
startArtalk();
});
}, 1000);
}
}
//console.log(window.location.href);
}, 1000)
}
startArtalk();
0.20 似乎用不了了
你用的是twikoo还是artalk ?
artalk的话需要注意版本与js版本是否一致
都是最新版,里面引用的js地址改了,然后控制台发现会无限加载js,且页面上评论框出不来,
建议使用twikoo ,artalk升级2.8.2之后问题挺多的