1. Blog/

Hugo 博客添加 Waline 评论系统

·1742 字·4 分钟· · ·
Waline Hugo
Mostima
Author
Mostima
A mirror
Table of Contents
Hugo 博客搭建 - This article is part of a series.

Waline 是一款简洁,安全的评论系统。它支持完整的 Markdown 语法,同时包含表情,数学公式, HTML嵌入等。

在允许匿名评论的基础上支持账号登录,可以有效保持身份。并且允许使用 Vercel 免费,且简洁方便的部署。

配置方式
#

LeanCLoud 设置(数据库)
#

  1.  登录  或  注册 

  2. 点击左上角 创建应用 并起一个名字 (选择免费的开发版

  3. 进入刚刚创建的应用,点击左下角的 设置,然后选择 应用凭证,此时你会看到你的 AppID, AppKey 以及 MasterKey. 请妥善记录他们,后续将会使用。

注意: 如果你正在使用 Leancloud 国内版 ( leancloud.cn),推荐你切换到国际版 ( leancloud.app)。否则,你需要为应用绑定已备案的域名

Vercel 部署服务端
#

Vercel

  1. 点击上方 Deploy 按钮跳转至 Vercel 部署服务端

  2. 输入一个项目名称,然后点击 Create 进行创建

  3. Vercel 会基于 Waline 的模板创建仓库

  4. 等待片刻,会显示Congratulations! 提示你部署成功,然后请点击 Go to Dashboard 前往控制台

  5. 在顶部点击 Settings , 然后在左下方点击Environment Variables 进入环境变量配置页面

  6. 配置三个环境变量,分别是:

    1. LEAN_ID

    2. LEAN_KEY

    3. LEAN_MASTER_KEY

      这三个环境变量的值(Value) 分别对应上一步在 LeanCloud 中获取的 AppID, AppKey 以及 MasterKey

  7. 配置完成所有的环境变量之后,点击顶部的 Deployments , 选择最近一次部署的右侧的 ··· , 然后点击 Redeploy,以重新部署让环境变量生效

  8. 此时会跳转至 Overview界面, 并开始部署, 稍等片刻 STATUS 会变成 Ready

  9. 可以点击右侧 Visit 前往部署好的网址, 且此地址为你的 Waline 服务端地址

设置自定义域名
#

  1. 点击顶部 Settings, 后于左侧点击 Domains

  2. 输入需要设置的自定义域名后,点击 Add

  3. 在你的域名服务器商,或 Cloudflare(如果你使用 Cloudflare 管理你的域名)处添加一条 CNAME 记录

    Type Name Value
    CNAME example(你在上一步中填写的二级域名) cname.vercel-dns.com
  4. 等待生效后即可用自定义的域名来访问了 🎉 🎊

HTML 引入
#

由于我使用 Blowfish 主题, 故以此主题为例

  1. 在博客文件夹下的 /layouts/partials/comments.html 中粘贴以下内容

    注意:CSS 变量可自定义, 默认样式为 变量与默认值

    重要! 请将 serverURL: 后的内容修改为你自己的域名
    <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://<yourdomain>',
            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 , 首个注册的用户会被设为管理员账户, 之后注册的用户则为普通用户

开启评论
#

在博客目录中的 /config/_default/params.toml 文件下, 将 showComments 修改为 true

[article]
	showComments = true

Telegram 评论通知
#

Telegram 通知通过 Telegram bot 机器人实现,需要配置以下几个环境变量:

  • TG_BOT_TOKEN: Telegram 机器人用于访问 HTTP API 的 token,通过 @BotFather 创建机器人获取,必填。
  • TG_CHAT_ID: 接收消息对象的 chat_id,可以是单一用户、频道、群组,通过 @userinfobot 获取,必填。
  • AUTHOR_EMAIL: 博主邮箱,用来区分发布的评论是否是博主本身发布的。如果是博主发布的则不进行提醒通知。
  • SITE_NAME: 网站名称,用于在消息中显示。
  • SITE_URL: 网站地址,用于在消息中显示。
  • TG_TEMPLATE: Telegram 使用的通知模板,变量与具体格式可参见下文的通知模板。未配置则使用默认模板。

Telegram 通知模板
#

💬 <your site> 有一条新评论

{{self.nick}} 回复:

```
{{self.comment-}}
```

{{-self.commentLink}}

_邮箱_: `{{self.mail}}`

_地址_: [来源文章]({{site.postUrl}})
Hugo 博客搭建 - This article is part of a series.