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

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>
  1. 其中 memos 后修改为自己的域名,如果是私有部署的 Memos ,creatorId 即为 1
  2. 完成。

前端美化

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

效果展示

其他

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

致谢

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

7 评论

留下评论

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