使用waline作为博客的评论系统

简介

关注我的人都知道,我的博客从来都不开评论,不是说不想开,其实是想开,但是一直没有找到好的评论系统,今天看了下waline还不错,可以试试

搭建后端

waline分为服务端和客户端,服务端当然就是后端,客户端当然就是前端页面

服务端搭建一个compose搞定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
version: '3'

services:
  waline:
    container_name: waline
    image: lizheming/waline:latest
    restart: always
    ports:
      - 8360:8360
    volumes:
      - ./data:/app/data
    environment:
      - "TZ=Asia/Shanghai"
      - "MYSQL_PORT=3306"
      - "MYSQL_HOST=10.0.0.194"
      - "MYSQL_USER=root"
      - "MYSQL_PASSWORD=pass"
      - "MYSQL_DB=waline"
      - "JWT_TOKEN=pass"
      - "SITE_NAME=bboysoul's blog"
      - "SITE_URL=https://www.bboy.app"
      - "SMTP_SERVICE=163"
      - "[email protected]"
      - "SMTP_PASS=pass"
      - "[email protected]"
      - "SECURE_DOMAINS=www.bboy.app,bboy.app,zzz.bboy.app"

我这里使用的是mysql

解释下参数

  • JWT_TOKEN: 随便配置一个字符串就好了
  • SITE_NAME: 自己站点的名字
  • SITE_URL: 自己站点的url
  • SMTP_SERVICE: 我选择的是当有评论的话就使用邮件告警,具体的可以看https://waline.js.org/guide/server/notification.html#leancloud-%E8%AE%BE%E7%BD%AE-%E6%95%B0%E6%8D%AE%E5%BA%93
  • SECURE_DOMAINS: 安全域名配置。配置后非该域名来源的请求会返回 403 状态码。

其他的环境变量可以看

https://waline.js.org/reference/server.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F

在启动后端之前需要创建一个数据库

CREATE DATABASE waline DEFAULT CHARSET=utf8mb4 DEFAULT COLLATE utf8mb4_general_ci;

之后倒入表结构

https://github.com/walinejs/waline/blob/main/assets/waline.sql

启动完成之后,访问下面地址

https://url/ui/login

注册的第一个账号就是管理员

搭建前端

如果你和我一样使用的是hexo加next主题,可以编辑下面这个文件

themes/next/layout/_partials/post/post-copyright.swig

在最后加入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<script src="//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js"></script>
  <div id="waline"></div>
  <script>
    Waline({
      el: '#waline',
      avatar: 'hide',
      lang: 'zh-CN',
      serverURL: 'https://zzz.bboy.app',
      visitor: true,
      dark: 'auto',
    });
  </script>

评论就会出现了

欢迎关注我的博客 www.bboy.app

Have Fun