一、先被圈粉：Waline 凭啥火？

看看这界面 —— 表情😜、图片📷、登录快捷，还能按「正序 / 倒序 / 热度」排序，甚至实时字数统计！明明是评论框，偏要当 互动社交场：

  • ✅ 支持游客评论（也能绑定社交账号）

  • ✅ 自动防垃圾评论（内置安全策略）

  • ✅ 颜值能打（UI 清新，还能自定义样式）

  • ✅ 部署零门槛（白嫖 Vercel + LeanCloud，分文不花！）

  • 先来看看效果吧

    https://walinecomment.dpdns.org/

二、部署前，先备齐「魔法道具」 🧰

道具

作用

获取方式

Node.js

运行代码的环境

官网下载（≥14）

LeanCloud

存评论数据的「云仓库」

注册账号

Vercel

免费托管后端的「魔法阵」

Vercel 官网

官方资源

抄作业必备

项目地址：GitHub
文档：Waline 官网

三、Step by Step 部署大冒险 🚀

1. 给评论建个「数据仓库」：LeanCloud 配置

  1. 注册登录 LeanCloud，创建 开发版应用（免费够用！）。

  2. 找「钥匙」：进入应用 → 设置 → 应用 Key，复制 APP ID、APP Key、Master Key（后面要填）。

  3. 开权限：进入 数据存储 → 结构化数据 → _User 表，把「权限」设为 允许所有用户读写（否则评论存不进去！）。

2. 把代码「抱回家」 📦

bash

# 克隆项目（没装 Git 就直接下载 zip）
git clone https://github.com/walinejs/waline.git  
cd waline  # 进入项目文件夹  
npm install  # 安装依赖（耐心等，喝口快乐水～）

3. 填好「密码本」：配置环境变量 ⚙️

在项目根目录新建 .env 文件，把 LeanCloud 的「钥匙」填进去：

LEAN_ID=你的APP ID          # 刚才复制的 APP ID  
LEAN_KEY=你的APP Key        # 刚才复制的 APP Key  
LEAN_MASTER_KEY=你的Master Key  # 刚才复制的 Master Key  
SITE_NAME=你的站点名称      # 比如 "我的超酷博客"

想玩 邮件通知、验证码、表情包？去官方文档抄配置，加到 .env 里就行！

4. 本地「试跑」：看看效果 🎮

bash

npm run dev  # 启动本地服务

浏览器打开 http://localhost:3000，如果看到类似这样的评论框👇，说明成功一半！
（就是你截图里的界面呀～）

5. 部署到 Vercel：让全世界访问 🌐

  1. 注册 Vercel（用 GitHub 账号登录最方便）。

  2. 点击 New Project → 导入刚才的 Waline 仓库（GitHub 授权后直接选）。

  3. 设「环境变量」：在 Vercel 的 Settings → Environment Variables 里，把 .env 里的键值对都粘贴进去（比如 LEAN_ID、LEAN_KEY 等）。

  4. 点击 Deploy，等 Vercel 跑完，会给你一个域名（比如 xxx.vercel.app）—— 这就是你的 评论系统后端地址！

四、让评论框「住」进你的网站 🪧

以 VuePress/Hexo/ 静态站 为例（其他框架同理）：

1. 引入 Waline 脚本

在页面的 head 里加：

<!-- 样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v3/dist/waline.css" />  
<!-- 核心脚本 -->
<script src="https://cdn.jsdelivr.net/npm/@waline/client@v3/dist/waline.js"></script>

2. 挂载评论框

在需要评论的地方（比如文章底部）插个 div，再写几行代码：

<div id="waline"></div>  
<script>  
Waline({  
  el: '#waline',          // 挂载到刚才的 div  
  serverURL: '你的Vercel域名', // 比如 https://xxx.vercel.app  
});  
</script>

3. 刷新页面，见证奇迹 ✨

评论框会「蹦出来」！还能自由切换头像、发表情、排序，互动感拉满～

五、进阶玩法：让评论更「会玩」 🎨

加表情包：在 .env 里配 EMOJI_PACK，比如：

env

EMOJI_PACK=["https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0/bilibili"]  # 哔哩哔哩表情包

评论数统计：用 Waline.Count 组件，一行代码显示评论数：

<span id="waline-count"></span>  
<script>Waline.Count({ el: '#waline-count', serverURL: '你的后端地址' })</script>

  • 邮件通知：配 SMTP 服务（比如 QQ 邮箱），新评论自动发邮件提醒（看官方文档的「邮件配置」）。

六、总结：评论区秒变「社交中心」 🎉

Waline 把枯燥的评论框变成了 能聊天、斗图、互动的社区，部署还超简单 —— 哪怕是小白，跟着步骤 5 分钟也能搞掂！现在就去官方文档挖更多彩蛋吧 → https://waline.js.org/

快给你的网站装个 Waline，让访客们「聊到停不下来」吧～ 💬✨