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

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

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

需要部署的服务

Memos 简介

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

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

Artalk 简介

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

安装过程

1. Docker 部署 Memos

1. 安装 Docker
2. 安装 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

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

mkdir -p memos/data/

4. 进入文件夹并创建 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

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

反向代理

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

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

1. 创建一个存放数据的目录

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

2. docker 部署 Artalk 服务

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

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

docker exec -it artalk artalk admin

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

反向代理

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

Artalk 设置

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

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

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

3. WordPress 前端设置

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

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

<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>

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

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

1. 进入 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))
}

2. 进入 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();

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

5. 效果展示

其他

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

致谢

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

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