前言 #
Waline配置 #
进入 Waline官网进行快速设置。
LeanCloud 设置 (数据库) #
-
点击左上角 创建应用 并起一个你喜欢的名字 (请选择免费的开发版):
创建应用 -
进入应用，选择左下角的
设置>应用 Key。你可以看到你的APP ID,APP Key和Master Key。请记录它们，以便后续使用。
ID 和 Key
国内版需要完成备案接入
如果你正在使用 Leancloud 国内版 ( leancloud.cn)，我们推荐你切换到国际版 ( leancloud.app)。否则，你需要为应用额外绑定已备案的域名，同时购买独立 IP 并完成备案接入:
- 登录国内版并进入需要使用的应用
- 选择
设置>域名绑定>API 访问域名>绑定新域名> 输入域名 >确定。- 按照页面上的提示按要求在 DNS 上完成 CNAME 解析。
- 购买独立 IP 并提交工单完成备案接入。(独立 IP 目前价格为 ￥ 50/个/月)
域名设置
Vercel 部署 (服务端) #
-
点击上方按钮，跳转至 Vercel 进行 Server 端部署。
注
如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。
-
输入一个你喜欢的 Vercel 项目名称并点击
Create继续:
创建项目 -
此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。
deploy 一两分钟后，满屏的烟花会庆祝你部署成功。此时点击
Go to Dashboard可以跳转到应用的控制台。
deploy -
点击顶部的
Settings-Environment Variables进入环境变量配置页，并配置三个环境变量LEAN_ID,LEAN_KEY和LEAN_MASTER_KEY。它们的值分别对应上一步在 LeanCloud 中获得的APP ID,APP KEY,Master Key。
设置环境变量 注
如果你使用 LeanCloud 国内版，请额外配置
LEAN_SERVER环境变量，值为你绑定好的域名。 -
环境变量配置完成之后点击顶部的
Deployments点击顶部最新的一次部署右侧的Redeploy按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。
redeploy -
此时会跳转到
Overview界面开始部署，等待片刻后STATUS会变成Ready。此时请点击Visit，即可跳转到部署好的网站地址，此地址即为你的服务端地址。
redeploy success
更新
在下面HTML引入的serverURL填写时建议不要填上述跳转的服务端地址，在评论时会遇到failed to fetch，建议使用Domains地址。
serverURL: 'https://your-domain.vercel.app'
HTML 引入 (客户端) #
博客主题更换为blowfish，这项设置只针对blowfish主题。
在你的网页中进行如下设置:
-
在博客文件夹下创建
/layouts/partials/comments.html文件.ht 中粘贴以下内容注：粘贴完请把serverURL修改为你自己的评论服务端地址
el: '#waline', serverURL: 'https://github.com/dodopoi', # 引号内部分修改为你自己的评论服务端地址<head> <!-- ... --> <link rel="stylesheet" href="https://unpkg.com/@waline/client@v2/dist/waline.css" /> <!-- ... --> </head> <body> <!-- ... --> <!-- <div id="waline-recent"></div> --> <!-- <script type="module"> --> <!-- import { RecentComments } from 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.mjs'; --> <!----> <!-- RecentComments({ --> <!-- el: '#waline-recent', --> <!-- serverURL: 'http://waline.vercel.app', --> <!-- count: 1, --> <!-- }); --> <!-- </script> --> <!-- <div id="article-info"> --> <!-- ... --> <!-- 阅读量: <span class="waline-pageview-count" data-path="{{.RelPermalink}}" /> --> <!-- ... --> <!-- </div> --> <div id="waline"></div> <script type="module"> import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs'; init({ el: '#waline', serverURL: 'https://github.com/dodopoi', lang: 'zh-CN', emoji: [ '//unpkg.com/@waline/[email protected]/bmoji', '//unpkg.com/@waline/[email protected]/tieba', '//unpkg.com/@waline/[email protected]/qq', '//unpkg.com/@waline/[email protected]/alus', '//unpkg.com/@waline/[email protected]/bilibili', 'https://cdn.jsdelivr.net/gh/norevi/[email protected]/blobs', ], dark: 'html[class="scroll-smooth dark"]', }); </script> <style> /*日间模式*/ :root { /* 字体大小 */ --waline-font-size: 16px; /* 白色 */ --waline-white: #ffff; /* 浅灰色 */ --waline-light-grey: #999; /* 深灰色 */ --waline-dark-grey: #666; /* 主题色 */ --waline-theme-color: #3b82f6; /* 活动状态的颜色 */ --waline-active-color: #2ecc71; /* 一般文本颜色 */ --waline-color: #222; /* 背景颜色 */ --waline-bgcolor: #fff; /* 较浅的背景颜色 */ --waline-bgcolor-light: #f8f8f8; /* 鼠标悬停时的背景颜色 */ --waline-bgcolor-hover: #2ecc71; /* 边框颜色 */ --waline-border-color: #ddd; /* 禁用状态的背景颜色 */ --waline-disable-bgcolor: rgba(248, 248, 248, 0.4); /* 禁用状态的文本颜色 */ --waline-disable-color:#bbb; /* 代码块的背景颜色 */ --waline-code-bgcolor: #282c34; /* 引用块的颜色 */ --waline-bq-color: #f0f0f0; /* 头像 */ --waline-avatar-size: 3.25rem; /* 移动设备上的头像大小 */ --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13); /* 徽章颜色 */ --waline-badge-color: #3b82f6; /* ：徽章字体大小 */ --waline-badge-font-size: 12px; /* 信息块的边框 */ --waline-info-border: 1px solid #999; /* 信息块的文本颜色 */ --waline-info-color: #999; /* 信息块的字体大小 */ --waline-info-font-size: 16px; /* 信息块背景颜色 */ --waline-info-bgcolor: rgba(235, 235, 235, 0.4); /* 渲染选择，一般边框样式 */ --waline-border: 1px solid var(--waline-border-color); /* 头像的圆角半径 */ --waline-avatar-radius: 50%; /* 阴影效果 */ --waline-box-shadow: none; } /* 暗黑模式，根据用户设置 ↓ */ html[class="scroll-smooth dark"]{ /* 这是用于表示白色的CSS变量, 在暗模式下，白色将变为黑色*/ --waline-white: #000; /* 浅灰色的CSS变量, 在暗模式下，变为深灰色 */ --waline-light-grey: #999; /* --waline-light-grey: #666;*/ /* 示深灰色, 在暗模式下，变为浅灰色 */ --waline-dark-grey: #999; /* 一般文本颜色 */ --waline-color: #c2c2c2; /* 背景颜色 */ --waline-bgcolor: #1E293B; /* 较浅的背景颜色 */ --waline-bgcolor-light: #2A354F; /* 边框颜色 */ --waline-border-color: #666; /* 禁用状态的背景颜色 */ --waline-disable-bgcolor: rgba(68, 68, 68, 0.8); /* 禁用状态的文本颜色 */ --waline-disable-color: #888; /* 引用块颜色 */ --waline-bq-color: #1F2D4B; /* 信息块背景颜色 */ --waline-info-bgcolor: rgba(31, 45, 75, 0.8); /* 信息块字体 */ --waline-info-color: #888; /* 信息块的边框 */ --waline-info-border: 1px solid #d3d3d3; } </style> </body> -
评论服务此时就会在你的网站上成功运行 🎉
评论管理 (管理端) #
-
部署完成后，请访问
<serverURL>/ui/register进行注册。首个注册的人会被设定成管理员。
-
管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
-
用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。
注：
也可以从LeanCloud中查看和删除评论，但不如上述后台功能完善。
开启评论 #
在博客目录中的 /config/_default/params.toml 文件下, 添加或修改以下内容。
[article]
showComments = true