最好的個人博客評論區實現方案推薦：waline

我的博客一直沒有一個好看的評論區，自己做又不會。。沒錯，我是個前端渣渣。調研了一下，一開始想套用一些網上的靜態模板，但是改造成本還是挺大的，後來接觸到了Waline，簡單瞭解了以下，我就知道了，它就是我理想中的評論區功能實現，和我的博客匹配度MAX。

一、Waline簡介

Waline官網：https://waline.js.org/

Waline github地址：https://github.com/walinejs/waline

Waline是一款評論區實現方案軟件，它需要單獨的服務端部署，適用於非常適用於靜態博客，比如Hexo，對於大多數個人博客也一樣適用。

它有以下特點：

1. 評論支持markdown，同時支持多套表情、數據公式、html嵌入等
2. 強大的安全性：匿名登錄內容校驗、防灌水、保護敏感數據等
3. 登錄支持：支持註冊登錄、github登錄等多種登錄方式，同時也支持匿名登錄
4. ......

確實，它的功能很強大，UI也很漂亮。

二、Waline安裝

1、Wline軟件架構

直接看Waline文檔，很多人一開始會比較迷糊，LeanCloud是啥，爲啥要註冊？Vercel又是啥？啥啥啥，爲啥步驟這麼複雜。。。。其實非常簡單，一張架構圖表示下

可以清楚的看到，Vercel只是服務端部署的一種方案，LeanCloud只是個數據存儲服務，它們均有可替代方案，推薦使用獨立部署替代Vercel，使用Mysql替代LeanCloud。

2、服務端安裝

這裏使用獨立部署的方案，獨立部署官方文檔：https://waline.js.org/guide/deploy/vps.html

Waline關於MySQL的說明：https://waline.js.org/guide/database.html#mysql

首先，需要先建好MySQL數據庫waline（注意使用utf8mb4編碼），並執行初始化腳本，初始化腳本見github：https://github.com/walinejs/waline/blob/main/assets/waline.sql

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
SET NAMES utf8mb4;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;


# Dump of table wl_Comment
# ------------------------------------------------------------

CREATE TABLE `wl_Comment` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `user_id` int(11) DEFAULT NULL,
  `comment` text,
  `insertedAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `ip` varchar(100) DEFAULT '',
  `link` varchar(255) DEFAULT NULL,
  `mail` varchar(255) DEFAULT NULL,
  `nick` varchar(255) DEFAULT NULL,
  `pid` int(11) DEFAULT NULL,
  `rid` int(11) DEFAULT NULL,
  `sticky` boolean DEFAULT NULL,
  `status` varchar(50) NOT NULL DEFAULT '',
  `like` int(11) DEFAULT NULL,
  `ua` text,
  `url` varchar(255) DEFAULT NULL,
  `createdAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `updatedAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;



# Dump of table wl_Counter
# ------------------------------------------------------------

CREATE TABLE `wl_Counter` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `time` int(11) DEFAULT NULL,
  `reaction0` int(11) DEFAULT NULL,
  `reaction1` int(11) DEFAULT NULL,
  `reaction2` int(11) DEFAULT NULL,
  `reaction3` int(11) DEFAULT NULL,
  `reaction4` int(11) DEFAULT NULL,
  `reaction5` int(11) DEFAULT NULL,
  `reaction6` int(11) DEFAULT NULL,
  `reaction7` int(11) DEFAULT NULL,
  `reaction8` int(11) DEFAULT NULL,
  `url` varchar(255) NOT NULL DEFAULT '',
  `createdAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `updatedAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;



# Dump of table wl_Users
# ------------------------------------------------------------

CREATE TABLE `wl_Users` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `display_name` varchar(255) NOT NULL DEFAULT '',
  `email` varchar(255) NOT NULL DEFAULT '',
  `password` varchar(255) NOT NULL DEFAULT '',
  `type` varchar(50) NOT NULL DEFAULT '',
  `label` varchar(255) DEFAULT NULL,
  `url` varchar(255) DEFAULT NULL,
  `avatar` varchar(255) DEFAULT NULL,
  `github` varchar(255) DEFAULT NULL,
  `twitter` varchar(255) DEFAULT NULL,
  `facebook` varchar(255) DEFAULT NULL,
  `google` varchar(255) DEFAULT NULL,
  `weibo` varchar(255) DEFAULT NULL,
  `qq` varchar(255) DEFAULT NULL,
  `2fa` varchar(32) DEFAULT NULL,
  `createdAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `updatedAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;




/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

爲了方便部署，這裏使用了docker-compose部署，docker-compose.yml文件如下

version: '3'

services:
  waline:
    container_name: waline
    image: lizheming/waline:latest
    restart: always
    ports:
      - 8360:8360
    volumes:
      - ${PWD}/data:/app/data
    environment:
      #數據庫配置
      MYSQL_HOST: 'MySQL連接地址'
      MYSQL_PORT: '端口號'
      MYSQL_DB: '數據庫'
      MYSQL_USER: 'root'
      MYSQL_PASSWORD: '密碼'
      MYSQL_PREFIX: 'wl_'
      MYSQL_CHARSET: 'utf8mb4'
      MYSQL_SSL: 'false'
      TZ: Asia/Shanghai
      #郵箱配置，163爲例
      SMTP_SERVICE: '163'
      AUTHOR_EMAIL: '郵箱地址'
      SMTP_HOST: 'smtp.163.com'
      SMTP_PORT: '465'
      SMTP_USER: '郵箱地址'
      SMTP_PASS: '第三方授權登陸token'
      SMTP_SECURE: 'true'
      #站點地址，方便發郵件時直接跳轉
      SITE_URL: 'https://blog.kdyzm.cn'
      SITE_NAME: '一枝梅的博客'
      #這裏這個似乎不生效，不知道什麼原因，但是不影響使用
      SENDER_NAME: 'kdyzm'
      #安全域名
      SECURE_DOMAINS: 'blog.kdyzm.cn'
      #配置文章響應
      LEVELS: '0,10,20,50,100,200'

之後使用docker-compose up 命令啓動看看有沒有報錯，如果沒有報錯，使用docker-compose up -d命令後臺啓動即可。

服務端啓動成功之後訪問 http://127.0.0.1:8360/ ，會看到默認的效果展示

訪問 http://localhost:8360/ui/register，進行註冊，第一個註冊的用戶即爲管理員

進去之後可以修改自己的頭像、管理評論等

三、前端使用

首先，定義一個div放在要顯示評論區的位置：

 <div id="waline"></div>

接下來在下方引入樣式和js

<script src="https://unpkg.com/@waline/client@v2/dist/waline.js"></script>
<link href='//unpkg.com/@waline/client@v2/dist/waline.css' rel='stylesheet' />

注意這裏應當引入v2版本，而不是官方的v3版本（實測v3版本有bug，它不能正確適配移動端而且登錄功能也有問題）看官方的包v3版本剛更新，似乎還不是很穩定。

然後初始化腳本

<script>
    const waline = Waline.init({
        el: '#waline',
        //後端服務器地址
        serverURL: 'http://localhost:8360',
        emoji: [
            'https://unpkg.com/@waline/[email protected]/alus',
            'https://unpkg.com/@waline/[email protected]/bilibili',
            ......各種表情包
        ],
        //禁止圖片上傳按鈕
        imageUploader: false,
        //不顯示版權標誌
        copyright: false,
    });
</script>

1、禁用圖片上傳按鈕

初始化的時候配置imageUploader: false,即可

2、不顯示版權標誌

初始化的時候配置copyright: false,即可

3、各種表情包配置

官方文檔：https://waline.js.org/guide/features/emoji.html

• alus：https://unpkg.com/@waline/[email protected]/alus
• 嗶哩嗶哩：https://unpkg.com/@waline/[email protected]/bilibili
• 嗶哩嗶哩小黃臉：https://unpkg.com/@waline/[email protected]/bmoji
• QQ：https://unpkg.com/@waline/[email protected]/qq
• 貼吧：https://unpkg.com/@waline/[email protected]/tieba
• Twitter Emoji：https://unpkg.com/@waline/[email protected]/tw-emoji
• 微博：https://unpkg.com/@waline/[email protected]/weibo
• ......

常用的表情包如上所示，官方文檔裏還有其他表情包，部分表情包顯示效果可看我的博客留言板模塊：https://blog.kdyzm.cn/messageBoard

四、歡迎來到我的博客留言

留言板使用了Waline，查看Waline效果，請看：https://blog.kdyzm.cn/messageBoard