给网站添加waline评论系统

作者mxdie发布于 分类 折腾

给网站添加waline评论系统

waline介绍

出发点是评论系统的头像显示有点问题，而且没法用oauth去使用社交账号直接评论，搜了一下，现在最火的评论是waline，直接装。

Waline（发音 /wɔːˈliːn/）是一款从 Valine 衍生的带后端开源评论系统，可理解为 With backend Valine（带后端的 Valine）。它解决了 Valine 无后端带来的安全隐患，同时保留了轻量简洁的特性，专为静态网站 / 博客设计，提供完整的评论与互动生态。

实装效果可以翻到最下面看当前的评论系统。

部署

我直接裸机安装，其他安装方式参考官方文档 https://waline.js.org/guide/get-started/ 。

我自己的环境是：ubuntu24+apache+mysql

服务器安装node.js+pm2

# 更新系统 需谨慎！ 小心把老古董更新坏了
sudo apt update && sudo apt upgrade -y
# 安装 Node.js (稳定版)
apt install -y nodejs npm

验证安装

node -v

创建数据库

我这里服务器上有mysql，就直接用了，也可以用sqlite

# 登录，ysql
sudo mysql -u root -p

执行语句

-- 1. 创建 Waline 专用数据库（utf8mb4 支持表情）
CREATE DATABASE waline_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- 2. 创建 Waline 专用数据库用户（仅本地访问，安全）
CREATE USER 'waline_user'@'localhost' IDENTIFIED WITH mysql_native_password BY '你的密码';

-- 3. 给用户授权该数据库的所有权限
GRANT ALL PRIVILEGES ON waline_db.* TO 'waline_user'@'localhost';

-- 4. 刷新权限，生效配置
FLUSH PRIVILEGES;

创建并配置waline

# 新建文件夹
mkdir -p waline && cd waline

# 初始化项目
sudo npm init -y

# 安装 Waline
npm install @waline/vercel

# 安装pm2 用来做守护进程
npm install pm2

创建启动文件 ecosystem.config.js

module.exports = {
  apps: [{
    name: 'waline',       // 进程名称
    script: 'node',        // 执行程序
    args: 'node_modules/@waline/vercel/vanilla.js', // 你的脚本路径
    env: {
      // 👇  在这里写所有环境
      MYSQL_USER: "waline_user",
      MYSQL_PASSWORD: "你的密码",
      MYSQL_DB: "waline_db",
      // 其他 Waline 环境变量继续加
    }
  }]
}

启动

npx pm2 start ecosystem.config.js

其他管理命令，查看一下服务是否正常启动

# 查看 Waline 进程状态
npx pm2 ls

# 查看实时日志
npx pm2 logs waline

# 重启服务
npx pm2 restart waline

# 停止服务
npx pm2 stop waline

# 设置开机自启（服务器必备）
npx pm2 startup && npx pm2 save

apache反代

上面服务启动以后是一个本地监听8360端口的http页面，我们把它反代的https上

开启模块

sudo a2enmod proxy proxy_http headers ssl rewrite
sudo systemctl restart apache2

新建代理配置

sudo nano /etc/apache2/sites-available/waline.conf

创建代理配置

<VirtualHost *:443>
    ServerName comment.mxdie.com

    # SSL 配置（你真实的 Let's Encrypt 证书路径）
    SSLEngine On
    SSLCertificateFile /etc/letsencrypt/live/mxdie.com/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/mxdie.com/privkey.pem

    # 反向代理到 Waline 本地服务
    ProxyPass / http://127.0.0.1:8360/
    ProxyPassReverse / http://127.0.0.1:8360/

    # 必需的请求头
    ProxyPreserveHost On
    RequestHeader set X-Forwarded-Proto "https"
    RequestHeader set X-Real-IP $remote_addr
    RequestHeader set X-Forwarded-For $remote_addr
</VirtualHost>

# HTTP 自动跳 HTTPS
<VirtualHost *:80>
    ServerName comment.mxdie.com
    RewriteEngine On
    RewriteRule ^(.*)$ https://%{HTTP_HOST}$1 [R=301,L]
</VirtualHost>

我这里是certbot生成的证书，路径在 /etc/letsencrypt/live/你的域名/ 下

启用

# 启动配置
sudo a2ensite waline.conf
# 测试配置
sudo apache2ctl configtest
# 重启
sudo systemctl restart apache2

DNS解析

在cloudflare加一条DNS记录

类型：A 名称：comment 内容：你的服务器 IP 橙色云（代理）：开启保存即可

WP使用waline

豆包骗我说有插件，操作到最后发现实际没有wordpress插件可用。

研究了一下，可以通过简单的修改主题使用。

我这里直接改了主题的comments.php。

<?php
/**
 * The template for displaying comments (Waline Version)
 *
 * @package ZanBlog_Plus
 * @since ZanBlog Plus 1.0
 */

if (post_password_required()) {
  return;
}
?>

<div id="comments" class="comments-area panel panel-default">

  <!-- Waline 评论容器 -->
  <div id="waline"></div>

  <!-- Waline 样式 -->
  <link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />

  <!-- Waline 初始化 -->
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

    init({
      el: '#waline',
      serverURL: 'https://comment.mxdie.com',  // ← 必填
      lang: 'zh-CN',
      visitor: true,
      emoji: [
        'https://unpkg.com/@waline/[email protected]/bilibili',
        'https://unpkg.com/@waline/[email protected]/bmoji',
		   'https://unpkg.com/@waline/[email protected]/tieba',
		   'https://unpkg.com/@waline/[email protected]/weibo',
		   'https://unpkg.com/@waline/[email protected]/soul-emoji',
		   'https://unpkg.com/@waline/[email protected]/alus',
		   'https://unpkg.com/@waline/[email protected]/qq',
		   'https://unpkg.com/@waline/[email protected]/tw-emoji',
      ],
    });
  </script>

  <style>
    /* 让 Waline 完全继承 ZanBlog Plus 的字体、字号、行距、颜色 */
    #waline,
    #waline * {
      font-size: inherit !important;
      font-family: inherit !important;
      line-height: inherit !important;
      color: inherit !important;
    }

    /* 隐藏 ZanBlog 原生评论区（避免空白） */
    .commentlist,
    .comments-title,
    .no-comments {
      display: none !important;
    }

    /* 让 Waline 在主题 panel 内更自然 */
    #waline {
      padding: 20px;
    }

    /* 适配主题按钮风格 */
    #waline .wl-btn {
      background-color: #428bca;
      border-color: #357ebd;
      color: #fff;
      border-radius: 4px;
      padding: 6px 12px;
    }

    #waline .wl-btn:hover {
      background-color: #3071a9;
      border-color: #285e8e;
    }

    /* 输入框圆角与主题一致 */
    #waline input,
    #waline textarea {
      border-radius: 4px !important;
    }

    /* 适配移动端 */
    @media (max-width: 768px) {
      #waline {
        padding: 15px;
      }
    }
  </style>

</div>

使用

使用域名/ui/register 注册的第一个用户是管理员