借助 Memos 为 Wordpress 博客添加「说说」功能

博客是我的小确幸，在这里我会和网友们分享一切。但并非所有内容都适合以文章的形式展示，除了几百上千字的小文章，更多时候是自己内心里的一两句碎语、吐槽或是逼逼赖赖。我一直期盼能为博客添加一个「说说」功能，随时随记录、分享当下的心境。在杜老师、HanYu、归臧等网友的帮助下，终于实现了本博客中的「说说」功能，并调整为我目前比较满意的样式。最后，在保留样式不变的前提下，还成功实现了评论功能。为了遵循互联网自由分享的精神，我在这篇文章中记录了利用 Memos 和 Artalk 在 WordPress 博客中实现「说说」及「评论」的过程。

文章更新时间：2023-07-28

需要部署的服务
- Memos 简介
- Artalk 简介
安装过程
其他
致谢

需要部署的服务

Memos 简介

Memos 是一个自托管备忘录中心，特点突出。

Docker 快速部署，隐私安全，数据完全由自己掌握。
轻量但功能强大。
支持 CSS 自定义。
因为其可向公共展示笔记且提供 api 接口的特点，适合被大家当作「说说」使用。

Artalk 简介

Artalk 是一个轻量、安全、易上手的自托管评论系统，可为 Memos 添加评论功功能。如果不需要为「说说」添加评论功能，也可不部署。

安装过程

1. Docker 部署 Memos

安装 Docker
安装 Docker-compose

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

docker-compose --version

根据自己需求创建一个存放数据的文件夹

mkdir -p memos/data/

进入文件夹并创建 docker-compose.yaml 文件，cd memos 然后 vim docker-compose.yaml，在粘贴以下内容后按下 esc ，然后输入:wq，回车。

version: "3.0"
services:
  memos:
    image: neosmemo/memos:latest
    container_name: memos
    restart: always
    volumes:
      - ./data/:/var/opt/memos
    ports:
      - 5230:5230

开始部署 docker-compose up -d
通过 http://ip:5230 即可进入 Memos 。

反向代理

通过 DNS 解析一个二级域名到该服务器下，例如 say.veryjack.com
我是使用 AMH 面板，参考文章《AMH7 反向代理简单教程》。

2. Docker 部署 Artalk (无需评论功能可跳过)

mkdir -p /root/data/artalk/data/

docker 部署 Artalk 服务

docker run -d \
    --name artalk \
    -p 23366:23366 \
    -v /root/data/artalk/data:/data \
    --restart=always \
    artalk/artalk-go

部署完成后输入以下命令设置管理员账号

docker exec -it artalk artalk admin

通过 http://ip:23366 即可进入 Artalk 后台

反向代理

通过 DNS 解析一个二级域名到该服务器下，例如 artalk.veryjack.com
我是使用 AMH 面板，参考文章《AMH7 反向代理简单教程》。

Artalk 设置

点击左上角的方块图标，选择 站点管理 ，点击右边 + 添加一个站点，站点名称 填入你想要填入的内容，站点 URLs 中填入你的网站域名。

点击 设置，在 可信域名 中添加博客的站点域名。

其他设置可根据自己需求设置。

3. WordPress 前端设置

下载我的 js 文件，并上传至网站的文件夹中。

点击下载 js 文件

新建一个页面「说说」。
添加一个「自定义 html」的区块。
在代码框中输入以下内容，并根据提示将相应内容替换为自己的信息。

<div id="bber"></div>
<script>
  // 以下信息改掉
  var bbMemo = {
    memos : 'https://say.veryjack.com/', //填入memos网站域名，末尾需带斜杠
    limit : '10', //填入需要展示的memos数量
    creatorId:'1' , //自己部署的话默认为1，不用修改
    domId: '#bber', //可以不修改
    username:"阿杰", //修改为你自己的昵称
    useravatar:"https://pix.veryjack.com/i/2023/04/04/fsxnkv.webp", //修改为自己的头像链接
    userlink:"https://veryjack.com", //修改为你的域名
    tags:"",
    commentsShow:true, //没有评论功能可修改为false
    commentsUrl:"https://say.veryjack.com/m/", //修改为你的Memos域名，但保留包含m的尾巴部分
    commentsTitle:"评论" //可以不修改
  }
  var artalkInit = {
  site: "Jack's Space", //填入前面artalk设置中的站点名，没有评论功能可以不管
  server:'https://artalk.veryjack.com' //填入前面artalk的网站域名，没有评论功能可以不管
}
</script>
<!-- js引用路径自己改好 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/artalk/2.5.5/Artalk.css">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/artalk/2.5.5/Artalk.js"></script>
<script src="#填入你的js路径，形如https://veryjack.com/shuoshuo.js#"></script>
<script src="https://npm.elemecdn.com/marked/marked.min.js"></script>
<script src="https://jsd.onmicrosoft.cn/gh/Tokinx/ViewImage/view-image.min.js"></script>
<script src="https://jsd.onmicrosoft.cn/gh/Tokinx/Lately/lately.min.js"></script>

到此不出意外应该已经可以使用了，如果还想继续美化前端显示，可修改 js 文件中的 CSS 代码。

4. Memos 后端添加评论功能 (无需评论功能可忽视)

进入 Memos 后台，在 设置 – 系统 – 自定义样式 中贴入以下内容并保存

a.time-text:after { content: ' 评论 💬 '; }
.atk-main-editor { margin-top: 20px; }
.dark .artalk{
  --at-color-font: #fff;
  --at-color-deep: #e7e7e7;
  --at-color-sub: #e7e7e7;
  --at-color-grey: #fff;
  --at-color-meta: #fff;
  --at-color-border: #2d3235;
  --at-color-light: #687a86;
  --at-color-bg: #1e2224;
  --at-color-bg-transl: rgba(30, 34, 36, .95);
  --at-color-bg-grey: #46494e;
  --at-color-bg-grey-transl: rgba(8, 8, 8, .95);
  --at-color-bg-light: rgba(29, 161, 242, .1);
  --at-color-main: #0083ff;
  --at-color-red: #ff5652;
  --at-color-pink: #fa5a57;
  --at-color-yellow: #ff7c37;
  --at-color-green: #4caf50;
  --at-color-gradient: linear-gradient(180deg, transparent, rgba(30, 34, 36, 1))
}

进入 Memos 后台，在 设置 – 系统 – 自定义脚本 中贴入以下内容并保存

// Artalk comments
// 用 JS 向页面中插入 JS
function addArtalkJS() { 
    var memosArtalk = document.createElement("script");
    memosArtalk.src = `https://cdn.bootcdn.net/ajax/libs/artalk/2.5.5/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') || '';
        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://cdn.bootcdn.net/ajax/libs/artalk/2.5.5/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.veryjack.com', //填入自己artalk的网站域名
                        site: 'Jack\'s Space', //填入前面artalk设置中的域名
                        darkMode: 'auto'
                    });
                    Artalk.on('list-loaded', function() {
                        // console.log('评论加载完成');
                        memoLoading.innerHTML = ''
                        startArtalk();
                    });
                }, 1000);
            }
        }
        //console.log(window.location.href);
    }, 1000)
}
startArtalk();

该部分内容参考了云晓晨的博文内容。

5. 效果展示

「说说」页面

其他

能稳定运行后，和我一样的小白们尽量不要第一时间更新 Memos 版本，避免遇到新的问题；
如果不想或者没有自己部署的 Memos，可以直接使用杜老师的平台，但是需要按照杜老师文章中的方法，修改 creatorId ；
如果想要美化评论框的样式，可下载 https://cdn.bootcdn.net/ajax/libs/artalk/2.5.5/Artalk.css 进行调整

致谢

实现一个在自己的网站中嵌入“说说”（或称为“微博”）功能一直是我所期望的。作为一个几乎一窍不通的小白，我终于在杜老师、HanYu、归臧等众多网友的耐心帮助下，不仅成功地将“说说”与我的网站结合起来，而且还获得了与主题相配的样式和方便快捷的评论功能。最终效果能够无限接近于朋友圈和微博，让我摆脱平台的束缚。

但最让我感到开心的并非是折腾博客所带来的乐趣，而是在这过程中结识的网友，他们的耐心和友善打破了我对充满戾气的互联网的刻板印象，让我真正感受到了什么是互联网精神❤️

打赏赞(15)