我的博客一直沒有一個好看的評論區,自己做又不會。。沒錯,我是個前端渣渣。調研了一下,一開始想套用一些網上的靜態模板,但是改造成本還是挺大的,後來接觸到了Waline,簡單瞭解了以下,我就知道了,它就是我理想中的評論區功能實現,和我的博客匹配度MAX。
一、Waline簡介
Waline官網:https://waline.js.org/
Waline github地址:https://github.com/walinejs/waline
Waline是一款評論區實現方案軟件,它需要單獨的服務端部署,適用於非常適用於靜態博客,比如Hexo,對於大多數個人博客也一樣適用。
它有以下特點:
- 評論支持markdown,同時支持多套表情、數據公式、html嵌入等
- 強大的安全性:匿名登錄內容校驗、防灌水、保護敏感數據等
- 登錄支持:支持註冊登錄、github登錄等多種登錄方式,同時也支持匿名登錄
- ......
確實,它的功能很強大,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