前言
禁止废话文学，反面案例参考：[[Waline_独立部署（反面案例）]]
Waline 项目
部署 Waline 项目
模块
新建文件夹 Waline，初始化创建一个默认的 package.json 文件。
npm init -y
安装模块
npm install @waline/vercel
npm install dotenv
数据库
使用 sqlite，下载 waline.sqlite 模板
将下载下来的 waline.sqlite 放在 Walien 根目录下
环境变量
在 Waline 目录下新建个 .env 环境变量的配置文件
配置如下，说明参考环境变量页面
SQLITE_PATH=D:\systemLibrary\Desktop\Waline
JWT_TOKEN=123
SMTP_SERVICE=QQ
SMTP_USER=739217783@qq.com
SMTP_PASS=xxxx
SMTP_SECURE=true
AUTHOR_EMAIL=739217783@qq.com
IPQPS=0
AKISMET_KEY=false
SITE_NAME=Hexo
SITE_URL=https://linguoguang.com
- 数据库配置（多数据库服务支持 | Waline）
SQLITE_PATH：SQLite 数据库文件的路径，该路径不包含文件名本身JWT_TOKEN：用户登录密钥，随机字符串即可SQLITE_DB：如果数据库名称是 waline（默认值）忽略，否则需要添加这个参数指定文件名
- 评论通知（评论通知 | Waline）
SMTP_USER: 发送邮件的用户名，一般为登录邮箱。SMTP_PASS: 发送邮件用户的 SMTP 授权码SMTP_SERVICE：电子邮件提供商（支持列表 nodemailer/lib/well-known/services.json at master · nodemailer/nodemailer · GitHub）SMTP_SECURE：是否使用 SSL 连接 SMTPAUTHOR_EMAIL：博主邮箱，用来接收新评论通知。如果是博主发布的评论则不进行提醒通知。
通知模板
环境变量大小限制为 4KB ，模板数据比较长，直接新建个 js 合并环境变量即可
参考
- github.com
- 评论通知 | Waline
- [[Waline_通知模板]]
在根目录下创建一个 main.js
const dotenv = require('dotenv'); // 引入dotenv
dotenv.config(); // 调用config方法合并.env环境变量
process.env.MAIL_SUBJECT = "{{parent.nick | safe}}，『{{site.name | safe}}』上的评论收到了回复";
process.env.MAIL_TEMPLATE = `<div style="background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg2.png);padding:40px 0px 20px;margin:0px;background-color:#FFCDCE;width:100%;">
<style type="text/css">@media screen and (max-width:600px){.afterimg,.beforeimg{display:none!important}}</style>
<div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;margin:auto;font-family:"Century Gothic","Trebuchet MS","Hiragino Sans GB",微软雅黑,"Microsoft Yahei",Tahoma,Helvetica,Arial,"SimSun",sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;">
<img class="beforeimg" style="width:530px;height:317px;z-index:-100;pointer-events:none" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png">
<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;overflow:hidden;pointer-events:none;margin-top: -120px;">
<div style="width:100%;background:#f8d1ce;color:#9d2850;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://tva2.sinaimg.cn/large/c56b8822ly1h61tb7tagcj20ii01u3yc.jpg) left top no-repeat;display: flex;justify-content: center;flex-direction: column;">
<p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;margin:0;">
您在<a style="text-decoration:none;color: #9d2850;" href="{{site.url}}">『{{site.name | safe}}』</a>上的留言有新回复啦！</p>
</div>
<div class="formmain" style="background:#fff;width:100%;max-width:800px;margin:auto auto;overflow:hidden;margin-bottom: -155px;">
<div style="margin:40px auto;width:90%;"><p>Hi，{{parent.nick}}，您曾在文章上发表评论：</p>
<div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{parent.comment | safe}}</div>
<p><strong>{{self.nick}}</strong> 给您的回复如下：</p>
<div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{self.comment | safe}}</div>
<p>您可以点击<a style="text-decoration:none; color:#cf5c83" href="{{site.postUrl}}" target="_blank"> 查看回复的完整内容 </a>，欢迎再次光临<a style="text-decoration:none; color:#cf5c83" href="{{site.url}}" target="_blank"> {{site.name}} </a>。<hr />
<p style="font-size:14px;color:#b7adad;text-align:center;position: relative;z-index: 99;">本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。<br />https://www.zywvvd.com</p>
</p>
<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" style="width:100%;margin:25px auto 5px auto;display:block;pointer-events:none">
<p class="bottomhr" style="font-size:12px;text-align:center;color:#999">自动书记人偶竭诚为您服务！</p>
</div>
</div>
<img class="afterimg" style="width:535px;height:317px;z-index:100;margin-left: -3px;"src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png">
</div>
</div> `;
process.env.MAIL_SUBJECT_ADMIN = "{{site.name | safe}} 上有新评论了";
process.env.MAIL_TEMPLATE_ADMIN = `<div style="background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg2.png);padding:40px 0px 20px;margin:0px;background-color:#FFCDCE;width:100%;">
<style type="text/css">@media screen and (max-width:600px){.afterimg,.beforeimg{display:none!important}}</style>
<div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;margin:auto;font-family:"Century Gothic","Trebuchet MS","Hiragino Sans GB",微软雅黑,"Microsoft Yahei",Tahoma,Helvetica,Arial,"SimSun",sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;">
<img class="beforeimg" style="width:530px;height:317px;pointer-events:none" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png">
<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;overflow:hidden;pointer-events:none;margin-top: -120px;">
<div style="width:100%;background:#f8d1ce;color:#9d2850;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://tva2.sinaimg.cn/large/c56b8822ly1h61tb7tagcj20ii01u3yc.jpg) left top no-repeat;display: flex;justify-content: center;flex-direction: column;">
<p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;margin:0;">
您在<a style="text-decoration:none;color: #9d2850;" href="{{site.url}}"target="_blank">{{site.name}}</a>上的文章有了新的评论</p>
</div>
<div class="formmain" style="background:#fff;width:100%;max-width:800px;margin:auto auto;overflow:hidden;margin-bottom: -155px;">
<div style="margin:40px auto;width:90%;"><p><strong>{{self.nick}}</strong> 回复说：</p>
<div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{self.comment | safe}}</div>
<p style="text-align:center;position: relative;z-index: 99;">您可以点击<a style="text-decoration:none;color:#cf5c83" href="{{site.postUrl}}" target="_blank">查看回复的完整内容</a></p>
<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" style="width:100%;margin:25px auto 5px auto;display:block;pointer-events:none">
<p class="bottomhr" style="font-size:12px;text-align:center;color:#999">自动书记人偶竭诚为您服务！</p>
</div>
</div>
<img class="afterimg" style="width:535px;height:317px;z-index:100;margin-left: -3px;"src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png">
</div>
</div>`;
require('@waline/vercel/vanilla.js'); // 引入并执行该文件
启动
默认情况下，在配置必要的环境变量后，安装好模块后直接运行模块内的 vanilla.js 文件即可。（参考独立部署 | Waline）
但我们为了引入模板，新增加了 main.js 文件
那么需要修改下入口
打开根目录下的 package.json
修改 scripts 为 start: node main.js
完整示例：
{
"dependencies": {
"@waline/vercel": "^1.28.2",
"dotenv": "^16.0.3",
"pm2": "^5.3.0"
},
"name": "waline",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
使用 npm start 启动即可，默认 8360 端口
如果不想每次这么麻烦，可以写个批处理
@echo off
npm start
反代
映射到 8360 端口
# 评论服务
server {
listen 443 ssl;
server_name comments.linguoguang.com;
ssl_certificate C:/Users/Administrator/Desktop/nginx/ssl/comments.linguoguang.com.pem;
ssl_certificate_key C:/Users/Administrator/Desktop/nginx/ssl/comments.linguoguang.com.key;
location / {
proxy_pass http://127.0.0.1:8360;
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_buffers 4 32k; # 调整代理缓冲区大小
proxy_buffer_size 16k;
}
}
前端
引入资源
<link
rel="stylesheet"
href="/css/partials/waline.css"
id="waline-style"
/>
<script type="module" async src="/js/comment.js"></script>
comment.js 初始化
将serverURL 修改成个人服务端的域名
// 直接从模块中导入 Waline 类
// import { init } from "https://unpkg.com/@waline/client@v3/dist/waline.js";
import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
init({
el: "#waline",
serverURL: "https://comments.linguoguang.com", // 替换为你的 Waline 服务器地址
placeholder: "说点什么吧...",
path: window.location.pathname,
avatar: "retro",
search: false,
pageSize: 5,
emoji: ["https://linguoguang.com/img/heo"],
meta: ["nick", "mail", "link"],
lang: "zh-CN",
requiredFields: ["nick", "mail"],
dark: "html[class='skin-dark']",
highlight: true,
});
这里的 waline.js 可以下载放服务器加速
👍 0
❤️ 0
😑 0
👎 0
👀 0