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

博客是我的小确幸，在这里我会和网友们分享一切。但并非所有内容都适合以文章的形式展示，除了几百上千字的小文章，更多时候是自己内心里的一两句碎语、吐槽或是逼逼赖赖。我一直期盼能为博客添加一个「说说」功能，随时随记录、分享当下的心境。终于在 杜老师 的博客中了解到借助 Memos 搭建「说说」的方法，在这篇文章中记录一下 Docker 部署 Memos，并将 Memos 整合进 WordPress 博客页面的过程。

Memos 简介

Memos 是一个仿 flomo 的自托管备忘录中心。

• Docker 快速部署，隐私安全，数据完全由自己掌握。
• 轻量但功能强大。
• 支持 CSS 自定义。
• 可以向公共展示笔记，适合作为「说说」。

安装过程

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
    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 反向代理简单教程》。

WordPress 前端设置

1. 新建一个页面「说说」。
2. 添加一个「自定义 html」的区块。
3. 贴入 杜老师 博客中的代码即可，内容如下

<div id="bber"></div>
<script>
  var bbMemos = {
    memos : 'https://s.dusays.com/',
    limit : '10',
    creatorId:'1' ,
    domId: '#bber',
  }
</script>
<script src="https://npm.elemecdn.com/penndu@1.0.1/memos.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. 其中 memos 后修改为自己的域名，如果是私有部署的 Memos ，creatorId 即为 1 。
5. 完成。

前端美化

1. 可以下载上面代码中的 https://npm.elemecdn.com/penndu@1.0.1/memos.js 文件进行修改。
2. 修改后的文件上传到自己服务器，将上面代码中对应位置改成新的路径即可。
3. 具体美化内容，作为小白我也不会，只是简单做了调整 ╮(╯▽╰)╭

效果展示

其他

• 如果不想或者没有自己部署的 Memos，可以直接使用 杜老师 的平台，但是需要按照杜老师文章中的方法，修改 creatorId 。
• 其实不整合进博客，直接使用 Memos 做展示也挺不错的，详见 VeryJack 说说。

致谢

文中前端的展示部分参考了 杜老师的文章 ，一开始在 WordPress 中并无法顺利显示，期间 杜老师 一直耐心回答并帮我调试网页，最终才顺利让「说说」页面上线，在此特别感谢 杜老师 的帮助❤️。