Waline评论系统使用体验

1. 简介

一款简洁、安全的评论系统。

官网：https://waline.js.org/

正如官网所说，它是从 Valine 衍生的带后端评论系统，解决了Valine基于Serverless的安全问题。

• 基于Node.js（thinkjs）
• 支持多种存储服务
• 支持Vercel、Netlify、阿里云函数等服务商，也支持私有独立部署
• 后台管理：黑白名单、关键词屏蔽等
• 第三方登录
• 评论通知
• 支持表情、上传图片、搜索表情、文章反馈

1.1. 对比

和我用过的一些评论系统进行比较

1、gitalk：需要登录github账号，网络不太稳定；使用github issue存储评论；支持Markdown

2、gitcus：解决了gittalk网络不稳定问题；使用discussion评论；支持文章反馈、主题设置、Markdown等功能

3、Artalk：使用Go语言编写的；支持私有部署多站点；表情包、图片、自定义主题等；

原本是想用Artalk来着，因为它就编译好的一个可执行文件，安装更简单，不过使用SQLite也遇到3.2 CXXABI_xxx找不到 的问题，于是还是换成我熟悉的Nodejs写的Waline。

2. 感受

客户端使用很方便，就是暴露的Vue3组件不支持typescript，得自己实现。

<template>
  <section class="comment">
    <div id="waline" />
  </section>
</template>

<script setup lang="ts">
import { init, type WalineEmojiInfo, type WalineInstance } from '@waline/client'
import '@waline/client/waline.css'

const colorMode = useColorMode()
const isDark = computed(() => colorMode.value === 'dark')

const path = computed(() => useRoute().path)
const emoji: WalineEmojiInfo[] = [
  {
    name: '贴吧',
    folder: 'https://cos.timelessq.com/static/emojis/tieba',
    prefix: 'tieba_',
    type: 'png',
    icon: 'antic',
    items: ['laugh', 'joy', 'antic', 'vomit_water', 'sob', 'wink', 'cry', 'dizzy_face', 'heart_eyes', 'huge_sweat', 'rage', 'satisfied', 'sleep', 'smirk', 'sunglasses', 'sweat', 'vomit', 'lovely', 'angry', 'annoyed', 'awkward', 'cute', 'pick_nose', 'shy', 'yum', 'grievance', 'chuckle', 'crazy', 'hurt', 'look_down', 'rolling_eyes', 'agree', 'sorry', 'surprised', 'wow', 'doubt', 'thumbsup', 'v', 'metal', 'ok', 'heart', 'red_scarf', 'sofa', 'moon', 'pill', 'rainbow', 'rose', 'shit', 'banana', 'toilet_paper', 'cake', 'gift', 'candle', 'coffee']
  },
  {
    name: 'QQ',
    folder: 'https://cos.timelessq.com/static/emojis/qq',
    prefix: 'qq_',
    type: 'gif',
    icon: 'grin',
    items: [
      'smile', 'mouth_squirm', 'heart_eyes', 'flushed', 'sunglasses', 'sob', 'shy', 'silent', 'sleep', 'cry', 'awkward', 'rage', 'yum', 'grin', 'confounded', 'sad', 'cool', 'cold_sweat', 'crazy', 'vomit', 'chuckle', 'lovely', 'rolling_eyes', 'arrogant', 'yummy', 'sleepy', 'scared', 'sweat', 'laugh', 'solder', 'fighting', 'scold', 'shush', 'dizzy_face', 'mad', 'feeble', 'skull', 'knock', 'bye', 'pick_nose', 'clap', 'embarassed', 'snigger', 'annoyed_left', 'annoyed_right', 'yawn', 'look_down', 'grievance', 'pensive', 'smirk', 'kiss_right', 'kiss', 'fearful', 'poor', 'wink', 'joy', 'doge', 'cover_face_cry', 'whatever', 'lift_check', 'cute', 'antic', 'vomit_blood', 'surprised', 'pock_face', 'tangled', 'pretty', 'mask_fighting', 'mask_hug', 'mask', 'working', 'busy', 'headache', 'worry', 'cover_face', 'burning_eyes', 'wowyo', 'hair_loss', 'question_mask', 'peep', 'emm', 'waterlemon_face', 'rolling_face', 'hug', 'doubt', 'sweat1', 'white-yum', 'white1', 'white2', 'white_kiss', 'white_shit', 'white_slap', 'white_sunglasses', 'white_thumbsup', 'bear1', 'bear2', 'bear3', 'bear4', 'bear5', 'bird1', 'bird2', 'bird3', 'bird4', 'heart', 'rose', 'rose_dead', 'ghost', 'anger', 'lip', 'broken_heart', 'coffee', 'alpaca', 'hongbao', 'firecracker', 'lantern', 'xi', 'thumbsup', 'ok', 'hold_fist', 'hand_shake', 'come', 'v', 'fist', 'diss', 'thumbsdown', 'metal', 'no', 'lemon_face', 'moon', 'sun', 'pig', 'knife', 'hocho', 'gun', 'tea', 'shit', 'tada', 'candy', 'watermelon', 'rice', 'feeding_bottle', 'beer', 'karaoke', 'cake', 'egg', 'bomb', 'dollar', 'light', 'gift', 'flower', 'plane', 'candle', 'ladybug', 'pill', 'basketball', 'pingpong', 'soccer', 'panda', 'pinwheel', 'ramen', 'umbrella', 'banana', 'toilet_paper', 'bag', 'fa', 'handsome', 'mail', 'balloon', 'board', 'bow', 'boy1', 'boy2', 'bulb', 'car', 'clock', 'cloudy', 'crab', 'example', 'frog', 'rain', 'ring', 'sofa', 'train_body', 'train_tail', 'tran_head', '1', '10', '11', '2', '3', '4', '5', '6', '7', '8', '9', 'surrender', 'taiji_boy', 'taiji_girl'
    ]
  },
  {
    name: '微博',
    folder: 'https://cos.timelessq.com/static/emojis/weibo',
    prefix: 'weibo_',
    type: 'png',
    icon: 'watermalon',
    items: [
      'smile', 'lovely', 'blush', 'grin', 'laugh', 'joy', 'angry', 'bye', 'hammer', 'kiss', 'love', 'mask', 'money', 'quiet', 'rage', 'sad', 'shy', 'sick', 'slient', 'smirk', 'slap', 'antic', 'desire', 'longing', 'no_idea', 'look_down', 'clap', 'yum', 'sleep', 'dizzy_face', 'chuckle', 'disappointed', 'flushed', 'heart_eyes', 'no', 'shuai', 'suprised', 'think', 'vomit', 'scream', 'sleepy', 'sob', 'sunglasses', 'greddy', 'pick_nose', 'annoyed', 'awkward', 'confused', 'grievance', 'poor', 'wink', 'rolling_eyes', 'watermalon', 'annoyed_left', 'annoyed_right', 'yawn', 'hufen', 'doge', 'husky', 'dog_annoyed', 'dog_bye', 'dog_consider', 'dog_cry', 'dog_joy', 'dog_laugh', 'dog_sweat', 'dog_think', 'dog_yum', 'cat', 'cat_annoyed', 'cat_bye', 'cat_cry', 'cat_think', 'girl_annoyed', 'boy', 'girl', 'panda', 'pig', 'rabbit', 'ultraman', 'wool_group', 'yan', 'xi', 'soap', 'meng', 'jiong', 'geili', 'shenma', 'alpaca'
    ]
  }
]

let waline: WalineInstance | null
onMounted(() => {
  waline = init({
    el: '#waline',
    path: path.value,
    search: false,
    imageUploader: false,
    dark: isDark.value,
    reaction: [ // 文章反馈的图标
      'https://cos.timelessq.com/static/emojis/tieba/tieba_lovely.png',
      'https://cos.timelessq.com/static/emojis/tieba/tieba_agree.png',
      'https://cos.timelessq.com/static/emojis/tieba/tieba_smirk.png',
      'https://cos.timelessq.com/static/emojis/tieba/tieba_pick_nose.png',
      'https://cos.timelessq.com/static/emojis/tieba/tieba_look_down.png'
    ],
    locale: {
      reactionTitle: '你认为这个工具怎么样？' // 文章反馈标题
    },
    serverURL: location.origin + '/comment', // 这里使用反向代理
    emoji
  })
})

watch(() => isDark.value, (val) => {
  // 暗色模式
  waline?.update({
    dark: val
  })
})
</script>

<style lang="scss" scoped>
.comment {
  --waline-theme-color: var(--el-color-primary);
  --waline-active-color: var(--el-color-primary-light-3);
}
</style>

个性化很强，可以修改表情、上传图片、文章反馈等等。

3. FAQ

3.1. 独立部署

部署在自己的服务器上

• 因为没有用Docker部署，默认8360端口已经有thinkjs应用使用了，所以需要更改waline端口号
• 添加白名单等配置
• 管理数据库环境变量

waline/vercel可以作为nodejs中间件使用

1、安装依赖

npm i @waline/vercel dotenv

2、编写入口文件

// app.js
const dotenv = require('dotenv'); // 引入dotenv
const Waline = require('@waline/vercel');// 引入并执行该文件
const http = require('http');

dotenv.config(); // 调用config方法合并.env环境变量

const walineConfig = {
  secureDomains: 'timelessq.com'
}

http.createServer( Waline(walineConfig) ).listen(8362, () => {
  console.log('Server is listening on port 8362');
});

3、编写环境变量

// .env
MYSQL_HOST=127.0.0.1 # 数据库连接地址
MYSQL_PORT=3306 # 数据库连接端口号
MYSQL_DB=waline # 数据库名
MYSQL_USER=xxx # 连接数据库用户名
MYSQL_PASSWORD=xxx # 连接密码
AKISMET_KEY=false

4、启动

node app.js

或者使用pm2管理，入口文件选app.js就可以了

 

3.2. CXXABI_1.3.8 找不到 

CentOS 7.6 运行报错：/lib64/libstdc++.so.6: version `CXXABI_1.3.8‘ not found，由于GCC版本不满足SQLite3依赖导致的。

1、换链接库

记得备份libstdc++.so.6，我按照下面的教程更换后waline倒是可以用了，但是其他的程序出现问题（可道云网盘启动不），于是还原了。

/lib64/libstdc++.so.6: version `CXXABI_1.3.8‘ not found 解决指南 - 知乎 (zhihu.com)

CentOS 7 "CXXABI_1.3.8" not found 错误解决 - 知乎 (zhihu.com)

2、升级CentOS

迁移成本有点高，等下次服务器到期吧。

3、移除SQLite依赖

由于用的是MySQL数据库，不用SQLite，也不打算更新@waline/vercel，于是修改源码把SQLite的引用删除了。

 

3.3. 反向代理

由于要用waline的都是https的应用，不想给waline申请证书开放外网访问，于是使用反向代理访问。

nginx配置：

server {
  location /comment {
    rewrite  /comment/(.*)$  /$1  break;
    proxy_pass http://127.0.0.1:8362;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header REMOTE-HOST $remote_addr;
  }
}