Artalk评论嵌入Memos,完美接近朋友圈、微博!暨宝塔面板Docker部署artalk评论系统

Auth:老张       Date:2023/06/1       Cat:电脑网络       Word:共2592字

◷2023/06/1   👁浏览:2.4K   🗨24条评论
文章目录 「隐藏」
  1. 1.拉取artalk镜像
  2. 2.创建Artalk容器。
  3. 3.创建管理员账户
  4. 4.对Artalk进行设置
  5. 5.Memos设置

前段时间在《无需代码,宝塔面板Docker部署便签工具Memos》里和大家一起部署了Memos,Memos的可玩性极高,不仅可以做为便签工具,还有很多大佬都做朋友圈或微博来使用。但是Memos本身不带评论功能,而做朋友圈或是微博来使用的话,那评论功能是必不可少的。那我们可以把Artalk这个评论系统嵌入到Memos里,以使Memos达到微博、朋友圈的功能。

Artalk的官方地址是https://artalk.js.org/,其实上面有部署教程,但是他的官方教程可能是因为没有急时更新,所以感觉是挖了几个坑让大家踩,结果也就是因为这几个坑而浪费了大量的时间。

1.拉取artalk镜像

在宝塔面板的Docker下,直接输入artalk/artalk-go,摘取Artalk镜像。

Artalk评论嵌入Memos,完美接近朋友圈、微博!暨宝塔面板Docker部署artalk评论系统 - 第1张图片

2.创建Artalk容器。

添加容器,容器名为artalk

容器端口填23366,服务器端口随意填,填个你好记的,只要不冲突即可。

将容器目录/data挂载到服务器/data/artalk上,这个就是数据库目录,以后通过计划任务定期进行备份。

Artalk评论嵌入Memos,完美接近朋友圈、微博!暨宝塔面板Docker部署artalk评论系统 - 第2张图片

3.创建管理员账户

通过下面命令来创建管理员账户,根据操作要求填入用户名、邮箱、密码即可。

docker exec -it artalk artalk admin

4.对Artalk进行设置

通过以上3个步骤之后,Artalk算是部署好了,但是必须要进行相关设置。这个时候如果按官方教程来的话,你将会踩到官方给你挖好的坑。

按常理,部署好之后就可以直接用IP地址加上我们刚才映射的端口号就可以直接访问Artalk的后台了,就在这个时候,我们就掉到官方挖的坑里了。如果用IP加端口来访问Artalk后台,直接报错 "Request Header Fields Too Large”,必须要解析域名之后,用域名进行后台访问才可以。这是第一个坑。

完成以上操作之后,官方教程来句“祝贺!你已成功完成 Artalk 部署 ?”。你是部署好了,但是后台配置呢?后台配置没有教程,所以大家到这里就认为搞定了,结果远远不行。这是官方给你挖的第二个坑。

必须要在Artalk的后台管理里,将你的Memos域名添加到“信任域名”里,必须,必须,必须。

5.Memos设置

在Memos设置里,将下面这段代码添加到自定义脚本里

// 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') || ''; // 0.12.x的版本请将.memo-wrapper替换为.memo-container
        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)
                memoAt.insertAdjacentHTML('afterend', '<div id="Comments"></div>');
                setTimeout(function() {
                    Artalk.init({
                        el: '#Comments',
                        pageKey: location.pathname,
                        pageTitle: document.title,
                        server: '你的Artalk后台地址',
                        site: '你的Memos名称',
                        darkMode: 'auto'
                    });
                    Artalk.on('list-loaded', function() {
                        // console.log('评论加载完成');
                        memoLoading.innerHTML = ''
                        startArtalk();
                    });
                }, 1000);
            }
        }
        //console.log(window.location.href);
    }, 1000)
}
startArtalk();

对于Css和JS,可以用自己的,也可以用官方提供的。不要忘了把Artalk的后台管理地址和博客名换成你自己的。

在自定义样式里添加以下代码:

a.time-text:after { content: ' 评论 ? '; }
.atk-main-editor { margin-top: 20px; }

OK了,全部完成,这个时候你就会看到每篇Memo上都会有“评论”和小图标了,点击就是出来单独的Memo界面和评论框了!

原本就是个把小时的事情,就是因为Artalk官方在教程上给你挖了两个坑,让你掉到坑里折腾,结果我折腾了五六个小时又请教拾月博主才搞定。

写篇文章记录下,让大家避开官方挖的坑!

《Artalk评论嵌入Memos,完美接近朋友圈、微博!暨宝塔面板Docker部署artalk评论系统》留言数:24

  1. 老张博客-老麦老麦LV3

    很详细,收藏先,暂时还没有这样的需求。如果已经可以集成评论进去,那用Memos打造一个轻博客也是很不错的样子。

    7楼 回复
  2. 老张博客-sharpsharp

    老哥,我装了最新的0.16版本的memos,上面的代码粘贴到后台后好像不行了,不显示评论框没法评论,是不是代码哪里要更新一下呀~

    10楼 回复

发表留言