借助 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
  1. 根据自己需求创建一个存放数据的文件夹
mkdir -p memos/data/
  1. 进入文件夹并创建 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
  1. 开始部署 docker-compose up -d
  2. 通过 http://ip:5230 即可进入 Memos 。

反向代理

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

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

  1. 创建一个存放数据的目录
mkdir -p /root/data/artalk/data/ 
  1. docker 部署 Artalk 服务
docker run -d \
    --name artalk \
    -p 23366:23366 \
    -v /root/data/artalk/data:/data \
    --restart=always \
    artalk/artalk-go
  1. 部署完成后输入以下命令设置管理员账号
docker exec -it artalk artalk admin
  1. 通过 http://ip:23366 即可进入 Artalk 后台

反向代理

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

Artalk 设置

  1. 点击左上角的方块图标,选择 站点管理 ,点击右边 + 添加一个站点,站点名称 填入你想要填入的内容,站点 URLs 中填入你的网站域名。
  1. 点击 设置,在 可信域名 中添加博客的站点域名。
  1. 其他设置可根据自己需求设置。

3. WordPress 前端设置

  1. 下载我的 js 文件,并上传至网站的文件夹中。
  1. 新建一个页面「说说」。
  2. 添加一个「自定义 html」的区块。
  3. 在代码框中输入以下内容,并根据提示将相应内容替换为自己的信息。
<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>
  1. 到此不出意外应该已经可以使用了,如果还想继续美化前端显示,可修改 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))
}
  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();
  1. 该部分内容参考了 云晓晨 的博文内容。

5. 效果展示

其他

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

致谢

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

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

81 评论

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注

  1. […] Memos这好东西一直很喜欢,也倒腾过几次,诸如样式、加评论之类的,之前还是用Wordpress时,按照Jack大佬的教程添加过,用着也还不错。后来因为“软云事件”之后,就没折腾了,这不现在换成Typecho后,又想给博客加一个说说页面,按其他大佬的教程很快就搭建好,不过总感觉不太好看,木木大佬的哔哔广场挺好的,样式也挺喜欢,不过感觉加载有点慢,遂想要不要把诸如js、css这些本地化会不会快一点,本以为可以一气而成,结果……芭比Q […]

  2. 好详细,爱了 :mrgreen:

    有一点挺坑的,bootcdn 总出问题,建议换成 lib.baomitu.com 或者 s4.zstatic.net 会好一些 :cry:

  3. 你好,看完你的博客文章,感觉很不错!希望与你网站首页友情链接
    大流量卡
    http://53go.cn
    专注于移动/联通/电信推出的大流量多语音活动长短期套餐手机卡的相关知识的介绍普及

    听说互换友情链接可以增加网站的收录量,特此来换,如果同意的话就给internetyewu@163.com发信息或者就在此回复下吧!

  4. 发现一个可能会引起 Bug 的情况,部分主题会有自带的 CSS 样式,它的优先级会高于自己设置的 Artalk 评论样式,可能会导致文字颜色改变等等奇怪的问题。

    • 我自己没有遇到这个情况,artalk 评论框的样式一开始是完全独立于我的主题颜色的。因此,我自己修改了 artalk CSS 文件,将 artalk 默认的蓝色改成了符合我自己主题的颜色,另外对于 admin 的标签,我在后面加了 !important 强制表达我要的颜色。

    • 这个问题我个人没有遇到,可能是版本不同导致的,我现在用的是 V0.11.0。你可以考虑使用低一点的版本,或者下载 js 文件看一下是否有什么问题。