在Memos共享页面中集成Artalk评论系统

By xpgo on April 21, 2023

主题图片

用Memos有一阵子了，功能确实不错，除了能记零碎笔记，还替代了其它几个应用：书签收藏、稍后阅读、小米便签、笔记收集。

Memos另一个比较好的是可以通过网页方便地分享一些笔记，有点像微博了，但要替代微博还需要一个评论功能，幸运的是Memos留了一个自定义CSS和JS的口，很容易添加一些小功能，包括评论。

看到@林木木在@Damon的基础上添加了评论功能，觉得方案简单，效果也不错，索性也试着集成了一下（虽然没多大用处）。不过我采用的评论系统是自建的Artalk，对JS不太熟悉，于是依葫芦画瓢实现了一下，具体步骤是这样子的：

用管理员账号登录到Memos页面，在设置-系统-自定义脚本那里，填写以下的代码，里面有两个地方需要替换一下

把YOUR-ARTALK-SERVER-URL替换成你的Artalk服务器地址
把SITE-NAME-IN-ARTALK替换成网站地址
如果你的memso版本早于0.13，下面代码中的.memo-wrapper要修改为.memo-container

// artalk comments
// css
document.head.innerHTML += '<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/artalk/2.5.4/Artalk.css" type="text/css"/>';
// js
function addArtalkJS() { 
    var memosArtalk = document.createElement("script");
    memosArtalk.src = `https://cdn.bootcdn.net/ajax/libs/artalk/2.5.4/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('.memo-wrapper') || '';
		if(window.location.href.replace(/^.*\/(m)\/.*$/,'$1') == "m" && !artalkDom){
			addArtalkJS()
			if(memoAt){
				clearInterval(start)
				memoAt.insertAdjacentHTML('afterend', '<div id="Comments"></div>');
				setTimeout(function() {
					Artalk.init({
					    el: '#Comments',
					    pageKey: location.pathname,
					    pageTitle: document.title,
					    server: 'YOUR-ARTALK-SERVER-URL',
					    site: 'SITE-NAME-IN-ARTALK'
					});
					Artalk.on('list-loaded', function() {
						// console.log('评论加载完成');
						startArtalk();
					});
				}, 600);
			}
		}
		//console.log(window.location.href);
	}, 600)
}
startArtalk();

效果是这样子的：

当然，也可以通过在设置-系统-自定义样式那里，对评论系统的显示效果进行修改，比如我用下面的CSS代码去掉了Artalk的脚标：

a.time-text:after { content: ' 💬 '; }
.atk-main-editor { margin-top: 20px; }
.atk-list-no-comment { display: none; }
.artalk>.atk-list>.atk-list-footer { display: none; }

上面样式代码的第一行，是表示在Memos的“探索”页面中，对所有笔记的标题栏那里加上一个评论图标“💬”，表示可以点击这里，跳到单条笔记页面进行评论。如果要在其它位置添加评论入口，可以参考 Memos x Twikoo中的方式，最后的效果是这样子的（具体可见Memos）：