跳至主要內容

站点添加评论系统

牧歌2024年4月30日...大约 10 分钟

站点添加评论系统

根据官网查找,目前支持 4 种评论服务:

  • Artalk
  • Giscus
  • Twikoo
  • Waline

官网推荐的评论服务

  • 面向程序员和开发人员: Giscus,是一个基于 GitHub Discussion 的评论系统,启用简便。
  • 面向公众: Waline

Giscus

考虑我这里是技术笔记,大家github账户基本都有,所以我这里使用Giscus

配置文章:评论之Giscusopen in new window

准备工作open in new window

  1. 你需要创建一个公开仓库,并开启评论区,以作为评论存放的地点

    image.png|650
    image.png|650

    在新建的仓库的settings->general->Discussions ,中打开Discussions功能。

    image.png|650
    image.png|650
    image.png|650
    image.png|650
  2. 你需要安装 Giscus App在新窗口打开open in new window,使其有权限访问对应仓库。 点击这个链接

    image.png|650
    image.png|650
    image.png|650
    image.png|650
  3. 在完成以上步骤后,请前往 Giscus 页面在新窗口打开open in new window 获得你的设置。

    image.png|650
    image.png|650

    你只需要填写仓库和 Discussion 分类,之后滚动到页面下部的 “启用 giscus” 部分,获取 data-repodata-repo-iddata-category 和 data-category-id 这四个属性。

    image.png|650
    image.png|650

配置open in new window

请配置 provider: "Giscus" 并将 data-repodata-repo-iddata-category 和 data-category-id 作为插件选项传入 reporepoIdcategory categoryId

其他的配置项详见 Giscus 配置open in new window

    comment: {
      comment: true,
      provider: "Giscus",
      repo: "wenleiwang/life-doc-giscus-comment",
      repoId: "R_kgDOL0keUQ",
      category: "Announcements",
      categoryId: "DIC_kwDOL0keUc4CfA0V",
      mapping: "pathname",
    },

配置完成以后样式

image.png|650
image.png|650

twikoo私有化部署

但发现国内这个插件经常出不来,切换twikoo

image.png|650
image.png|650

搭建twikoo服务器

阿里云服务器

安装docker

安装docker参考open in new window

  1. 执行以下命令安装依赖包:
yum install -y yum-utils
  1. 鉴于国内网络问题,强烈建议使用国内源,官方源请在注释中查看。
yum-config-manager \
    --add-repo \
    https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
image.png|650
image.png|650
  1. 安装程序包
yum install docker-ce docker-ce-cli containerd.io
image.png|650
image.png|650

CentOS8 额外设置 由于 CentOS8 防火墙使用了 nftables,但 Docker 尚未支持 nftables, 我们可以使用如下设置使用 iptables: 更改 /etc/firewalld/firewalld.conf

# FirewallBackend=nftables
FirewallBackend=iptables

或者执行如下命令:

$ firewall-cmd --permanent --zone=trusted --add-interface=docker0
$ firewall-cmd --reload

我这里是7.9不用

  1. 使用脚本自动安装 在测试或开发环境中 Docker 官方为了简化安装流程,提供了一套便捷的安装脚本,CentOS 系统上可以使用这套脚本安装,另外可以通过 --mirror 选项使用国内源进行安装:

若你想安装测试版的 Docker, 请从 test.docker.com 获取脚本

# $ curl -fsSL test.docker.com -o get-docker.sh
$ curl -fsSL get.docker.com -o get-docker.sh
$ sudo sh get-docker.sh --mirror Aliyun
# $ sudo sh get-docker.sh --mirror AzureChinaCloud

执行这个命令后,脚本就会自动的将一切准备工作做好,并且把 Docker 的稳定(stable)版本安装在系统中。

  1. 启动 Docker
$ sudo systemctl enable docker
$ sudo systemctl start docker
image.png|650
image.png|650
  1. 测试 Docker 是否安装正确 若能正常输出以上信息,则说明安装成功。
docker run --rm hello-world
image.png|650
image.png|650
  1. 镜像加速 如果在使用过程中发现拉取 Docker 镜像十分缓慢,可以配置 Docker 国内镜像加速open in new window

Ubuntu 16.04+、Debian 8+、CentOS 7+ 目前主流 Linux 发行版均已使用 systemdopen in new window 进行服务管理,这里介绍如何在使用 systemd 的 Linux 发行版中配置镜像加速器。 请首先执行以下命令,查看是否在 docker.service 文件中配置过镜像地址。

systemctl cat docker | grep '\-\-registry\-mirror'

如果该命令有输出,那么请执行 $ systemctl cat docker 查看 ExecStart= 出现的位置,修改对应的文件内容去掉 --registry-mirror 参数及其值,并按接下来的步骤进行配置。 如果以上命令没有任何输出,那么就可以在 /etc/docker/daemon.json 中写入如下内容(如果文件不存在请新建该文件):

{
  "registry-mirrors": [
    "https://hub-mirror.c.163.com",
    "https://mirror.baidubce.com"
  ]
}

注意,一定要保证该文件符合 json 规范,否则 Docker 将不能启动。

之后重新启动服务。

sudo systemctl daemon-reload
sudo systemctl restart docker

检查加速器是否生效 执行 docker info,如果从结果中看到了如下内容,说明配置成功。

Registry Mirrors:
 https://hub-mirror.c.163.com/

安装启动twitoo

docker pull imaegoo/twikoo

如下这样访问https://你的ip:8084就能访问twikoo服务了

docker run --name twikoo -e TWIKOO_THROTTLE=1000 -p 8084:8080 -v ${PWD}/data:/app/data -d imaegoo/twikoo

开放8084端口

image.png|650
image.png|650

我还没有使用https,所以简单反向代理一下。站点在腾讯云,twikoo在阿里云。 nginx做如下配置:

location /twikoo {
	proxy_pass http://IP:8084;  # Twikoo 服务运行的地址和端口
}
image.png|650
image.png|650

使用

安装依赖


配置

comment: {  
  comment: true,  
  provider: 'Twikoo',  
  envId: "http://wenlei.wang/twikoo",  
}

如何修改头像?open in new window

请前往 https://cravatar.cnopen in new window 通过邮箱注册并设定头像,评论时,请留下相同的邮箱。

访客还可以通过输入数字 QQ 邮箱地址,使用 QQ 头像发表评论。

使用下效果

image.png|650
image.png|650

数据迁移

twikoo服务搭建好以后,可以把云开发里的数据完全无缝迁移过来。腾讯云云开发数据库里保存的数据格式是.json的,包括评论(comment),还有设置(config),以及浏览量(counter)这三个。可以直接导出使用。 私有部署的twikoo数据存储在./data/文件夹下,数据名称为db.json.0,其实也是.json格式的。把上述三个从云开发导出的.json数据按照这样的方式命名,然后上传覆盖掉./data/下的这三个数据即可,db.json.0对应评论数据(comment),db.json.1对应是twikoo设置数据(config),db.json.2(counter)对应浏览量数据。

Waline私有化部署

Waline官网open in new window

发现,消息啥的需要维护一下,改用Waline

Docker安装

我对MYSQL很熟悉,使用MYSQL做为数据存储源,Waline提供很多存储方式找一个自己适合的即可。

使用时请先导入 waline.sqlopen in new window 以完成表和表结构的创建,之后在项目中配置如下环境变量。

管理员角色为:administrator

image.png|250
image.png|250

你只需配置对应的数据库的环境变量,Waline 会自动根据你配置的环境变量切换到对应的数据存储服务。

官网说

如何构建镜像?
git clone https://github.com/walinejs/waline.git
cd waline
docker build -t lizheming/waline -f packages/server/Dockerfile .

用别人打包好的docker pull lizheming/waline

直接Docker命令

使用 MYSQL 启动指令

docker run -d \
  -e MYSQL_HOST=59.110.90.215 \
  -e MYSQL_PORT=3306 \
  -e MYSQL_DB=waline \
  -e MYSQL_USER=用户名 \
  -e MYSQL_PASSWORD=密码 \
  -p 8360:8360 \
  lizheming/waline

看下启动来没

docker ps

开放一下阿里云的防火墙端口 8360

访问 IP:8360 ,可以访问

image.png|650
image.png|650

登录不上

image.png|650
image.png|650

报错:Client does not support authentication protocol requested by server; consider upgrading MySQL client

这里发现,自己创建的账号不能用,改用root账号修改密码的方式可以。

解决参考了: node.js - MySQL 8.0 - 客户端不支持服务器请求的认证协议;考虑升级 MySQL 客户端 - Stack Overflow --- node.js - MySQL 8.0 - Client does not support authentication protocol requested by server; consider upgrading MySQL client - Stack Overflowopen in new window

docker-compans

编写一个docker-compose.yml文件

# docker-compose.yml
version: '3'

services:
  waline:
    container_name: waline_docker
    image: lizheming/waline:latest
    restart: always
    ports:
      - 8361:8360
    volumes:
      - ${PWD}/data:/data
    environment:
      TZ: 'Asia/Shanghai' # 时区,可以改
      MYSQL_DB: 'waline数据库'
      MYSQL_USER: 'root'
      MYSQL_PASSWORD: '密码'
      MYSQL_HOST: '数据库IP'
      SMTP_SERVICE: 126
      SMTP_USER: 'wenleiwang@126.com'
      SMTP_PASS: '126邮箱给的那个密码'
      SMTP_SECURE: 'true'
      SENDER_NAME: 'wenlei'
      SENDER_EMAIL: 'wenleiwang@126.com'
      SITE_NAME: '牧歌的技术笔记'
      SITE_URL: 'https://wenlei.wang'
      SECURE_DOMAINS: 'wenlei.wang'
      AUTHOR_EMAIL: 'wenleiwang@126.com'

保存退出,执行

docker-compose up -d

直接安装

方案一(不推荐):

如果你的服务器是linux操作系统的话,那么就可以通过修改属主目录下的.bashrc文件,并写入以下内容:

export MYSQL_HOST=12.12.12.12
export MYSQL_PORT=3306
export MYSQL_DB=waline
# more.... 以这三个为例,更多请对照参数表一一填写即可

填写完成后保存文件并执行以下命令刷新:

source ~/.bashrc

之后我们就可以通过以下命令启动服务了:

npm install @waline/vercel
node node_modules/@waline/vercel/vanilla.js

该方法是直接导出系统级的环境变量,使waline服务端可以从process.env对象中顺利读取到,而这样定义的全局环境变量存在一个弊端,就是会污染到全局,可能会干预到其他项目,而且windowslinux的配置方法各不相同。所以这里并不推荐,而是更推荐使用方案二。

方案二(强烈推荐):

我们需要了解的是,在nodejs中,通过process.env对象可以拿到全局的环境变量,而有这么一个第三方库,可以做到既不污染全局环境变量,也能实现代码与配置分开管理:dotenvopen in new windowopen in new window

该库支持将环境变量写入到一个在项目根目录下的.env文件中,并在代码中通过dotenv.config()方法将变量合并至process.env对象中,每个项目的.env文件都是一个独立的作用域,在项目结束运行时,.env文件中的全局变量将被销毁,我们可以通过这个方法,编写一个javascript脚本,我们只需要调用dotenv.config()方法写入全局变量,之后引入并执行@waline/vercel/vanilla.js这个文件即可。

那么废话不多说,我们直接开始实现:

  1. 创建文件夹:waline-service

  2. 使用 vscode 打开文件夹,并调出终端,执行初始化项目命令生成package.json

    npm init -y
    
  3. 安装Waline服务端:npm install @waline/vercel

  4. 在当前项目中安装dotenvnpm install dotenv

  5. 创建目录结构src/main.js,并在项目根目录下创建.env文件:

  6. .env文件中写入环境变量(''#''为注释符):

    MYSQL_HOST=127.0.0.1 # 数据库连接地址
    MYSQL_PORT=3306 # 数据库连接端口号
    MYSQL_DB=waline # 数据库名
    MYSQL_USER=root # 连接数据库用户名
    MYSQL_PASSWORD=tj991118 # 连接密码
    
  7. main.js文件中编写代码:

    const dotenv = require('dotenv'); // 引入dotenv
    dotenv.config(); // 调用config方法合并.env环境变量
    require('@waline/vercel/vanilla.js'); // 引入并执行该文件
    
  8. 安装pm2项目运行管理器:

    npm install pm2
    
  9. 在根目录中创建ecosystem.config.js文件:

module.exports = {
  apps: [
    {
      name: 'waline-service', // 项目名称
      script: './src/main.js', // 执行入口
      cwd: './', // 工作路径
      watch: true, // 是否开启监听
      ignore_watch: ['logs', '.git', 'node_modules'], // 监听器忽略文件目录
      out_file: './logs/waline_info.log', // 日志输出路径
      error_file: './logs/waline_err.log', // 报错日志输出路径
      log_date_format: 'YYYY-MM-DD HH:mm', // 日志时间格式 会在每一行日志的前面加上该格式的时间戳
      merge_logs: true, // 合并日志文件名称
      restart_delay: 1000, // 崩溃重启服务时间间隔
      max_restarts: 3 // 崩溃后重启次数
    }
  ]
};

  1. 之后我们就可以通过pm2管理器对项目进行性能监控和后台运行了,修改package.json文件的scripts选项:
{
  ...more
  "scripts": {
    "start": "pm2 start ./ecosystem.config.js",
    "stop": "pm2 stop waline-service",
    "log": "pm2 log waline-service",
    "status": "pm2 status"
  },
}

  1. 最后我们在终端的项目根目录下尝试执行以下命令:
npm run start   # 启动服务 启动后默认服务端口号为8360
npm run stop    # 停止服务
npm run log     # 查看服务日志
npm run status  # 查看服务运行状态

statusonline表示已经成功在后台运行,更多有关pm2的内容请查阅:pm2openopen in new window。成功运行后pm2会自动帮你创建logs文件夹,其中包含两个日志文件,一个记录执行过程中的标准输出,一个记录报错信息。

上次编辑于: 2024/10/1 13:57:19
贡献者: wenleiwang
评论
  • 按正序
  • 按倒序
  • 按热度