51工具盒子博客是我的小确幸，在这里我会和网友们分享一切。但并非所有内容都适合以文章的形式展示，除了几百上千字的小文章，更多时候是自己内心里的一两句碎语、吐槽或是逼逼赖赖。我一直期盼能为博客添加一个「说说」功能，随时随记录、分享当下的心境。在 杜老师、HanYu、归臧 等网友的帮助下，终于实现了本博客中的「说说」功能，并调整为我目前比较满意的样式。最后，在保留样式不变的前提下，还成功实现了评论功能。为了遵循互联网自由分享的精神，我在这篇文章中记录了利用 Memos 和 Artalk 在 WordPress 博客中实现「说说」及「评论」的过程。
文章更新时间：2023-07-28
目录
需要部署的服务 {#rtoc-1}
Memos 简介 {#rtoc-2}
Memos 是一个自托管备忘录中心，特点突出。
- Docker 快速部署，隐私安全，数据完全由自己掌握。
- 轻量但功能强大。
- 支持 CSS 自定义。
- 因为其可向公共展示笔记且提供 api 接口的特点，适合被大家当作「说说」使用。
Artalk 简介 {#rtoc-3}
Artalk 是一个轻量、安全、易上手的自托管评论系统，可为 Memos 添加评论功功能。如果不需要为「说说」添加评论功能，也可不部署。
安装过程 {#rtoc-4}
1. Docker 部署 Memos {#rtoc-5}
-
安装 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 。
反向代理 {#rtoc-6}
- 通过 DNS 解析一个二级域名到该服务器下，例如
say.veryjack.com - 我是使用 AMH 面板，参考文章 《AMH7 反向代理简单教程》。
2. Docker 部署 Artalk (无需评论功能可跳过) {#rtoc-7}
-
创建一个存放数据的目录
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 后台
反向代理 {#rtoc-8}
- 通过 DNS 解析一个二级域名到该服务器下，例如
artalk.veryjack.com - 我是使用 AMH 面板，参考文章 《AMH7 反向代理简单教程》。
Artalk 设置 {#rtoc-9}
- 点击左上角的方块图标，选择
站点管理，点击右边+添加一个站点，站点名称填入你想要填入的内容，站点 URLs中填入你的网站域名。
- 点击
设置，在可信域名中添加博客的站点域名。
- 其他设置可根据自己需求设置。
3. WordPress 前端设置 {#rtoc-10}
- 下载我的 js 文件，并上传至网站的文件夹中。
-
新建一个页面「说说」。
-
添加一个「自定义 html」的区块。
-
在代码框中输入以下内容，并根据提示将相应内容替换为自己的信息。
-
到此不出意外应该已经可以使用了，如果还想继续美化前端显示，可修改 js 文件中的 CSS 代码。
4. Memos 后端添加评论功能 (无需评论功能可忽视) {#rtoc-11}
-
进入 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 =
'); 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();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', ' -
该部分内容参考了 云晓晨 的博文内容。
5. 效果展示 {#rtoc-12}
其他 {#rtoc-13}
- 该文章适用于 Memos v0.14.2 版本；
- 能稳定运行后，和我一样的小白们尽量不要第一时间更新 Memos 版本， 避免遇到新的问题；
- 如果不想或者没有自己部署的 Memos，可以直接使用 杜老师 的平台，但是需要按照杜老师文章中的方法，修改
creatorId； - 如果想要美化评论框的样式，可下载
https://cdn.bootcdn.net/ajax/libs/artalk/2.5.5/Artalk.css进行调整
致谢 {#rtoc-14}
实现一个在自己的网站中嵌入"说说"（或称为"微博"）功能一直是我所期望的。作为一个几乎一窍不通的小白，我终于在 杜老师、HanYu、归臧 等众多网友的耐心帮助下，不仅成功地将"说说"与我的网站结合起来，而且还获得了与主题相配的样式和方便快捷的评论功能。最终效果能够无限接近于朋友圈和微博，让我摆脱平台的束缚。
但最让我感到开心的并非是折腾博客所带来的乐趣，而是在这过程中结识的网友，他们的耐心和友善打破了我对充满戾气的互联网的刻板印象，让我真正感受到了什么是互联网精神❤️
