总文章在这里

使用Hexo和Stellar搭建个人博客网站https://bxzdyg.cn/p/%E4%BD%BF%E7%94%A8Hexo%E5%92%8CStellar%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/

本篇文章是这篇大文章的抽离，因为本篇文章代码段落较长刚好拿来凑文章节数，且具有随时更新的特性，不好固定在一个文章里，也不能写在wiki里，否则无法被推荐，故出此下策。

评论系统选择

在搭建博客的时候必不可少的就是评论了，但是评论系统怎么选就是一个关键的问题了，要能够兼顾美观、便捷、自定义性强，轻量，完全的markdwon支持，支持登录等等功能，最好还要有一个后端（😓）。

waline

waline作为一个极具热度，且功能强大的评论系统就如此应运而生了，

本站主讲waline，不仅waline拥有着极其全面丰富强大的功能，而且本站也是使用waline这个评论系统，在阅览本文前建议前去阅读waline的官方文档。

https://waline.js.org/https://waline.js.org/

服务器部署

Waline快速上手https://waline.js.org/guide/get-started/

这部分官方文档其实已经写的很明白了，里面还有一些大佬录制的部署视频，可以去看看。

数据库

LeanCloud(国际版)

  1. 登录 或 [注册 LeanCloud 国际版 并进入 控制台

  2. 点击左上角 [创建应用 并起一个你喜欢的名字 (请选择免费的开发版):

  3. 进入应用，选择左下角的 设置 > 应用 Key。你可以看到你的 APP ID,APP Key 和 Master Key。请记录它们，以便后续使用。

云函数

Vercel
Vercel

  1. 点击上方按钮，跳转至 Vercel 进行 Server 端部署。

    如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。

  2. 输入一个你喜欢的 Vercel 项目名称并点击 Create 继续:

  3. 此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。

    一两分钟后，满屏的烟花会庆祝你部署成功。此时点击 Go to Dashboard 可以跳转到应用的控制台。

  4. 点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。

Environment Variable Lean Cloud
LEAN_ID AppID
LEAN_KEY AppKey
LEAN_MASTER_KEY MasterKey
LEAN_SERVER 已备案的域名

LEAN_SERVER是国内版本必须填的，需要绑定自己的域名，国际版不需要

简单启用,你可以将下面的放在你博客需要的地方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v2/dist/waline.css"
  />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';

    init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>
</body>

注册管理员

Waline支持评论管理，默认第一个注册的用户为管理员（站长）,可以在DOMAINS的页面中直接进行登录操作支持使用QQ、微博、GitHub、Twitter、Facebook且多个类型账号进行绑定。

Stellar启用

做好上面几步，就需要在配置文件中，增加如下配置

1
2
3
4
5
6
7
8
9
10
11
comments:
  service: waline 
  waline:
    js: https://unpkg.com/@waline/client@2.14.1/dist/waline.js
    css: https://unpkg.com/@waline/client@2.14.1/dist/waline.css
    # Waline server address url, you should set this to your own link
    serverURL: https://comment.bxzdyg.cn/
    # If false, comment count will only be displayed in post page, not in home page
    commentCount: true
    # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`.
    pageview: false

serverURL即为你之前分配个waline云函数解析的域名地址

如果启用了fancybox插件，那么你还需要添加对应的css选择器

blog\_config.stellar.yml
1
2
3
4
5
6
plugins:
  fancybox:
    enable: true
    # 可以处理评论区的图片（不支持 iframe 类评论系统）例如：
    # 使用waline评论可以写: #waline_container .vcontent img
    selector: .swiper-slide img, .gallery img ,#waline_container .vcontent img

然后启动你本地的博客项目，在你的文章末尾就能看到评论区已经被启用了。

评论通知

邮件通知

基本变量值

环境变量名称 备注 参考值
SMTP_SERVICE SMTP 邮件发送服务提供商,这里[查看](nodemailer/lib/well-known/services.json at master · nodemailer/nodemailer (github.com))所有支持的服务商 QQ
SMTP_HOST SMTP 服务器地址(理论上SMTP_SERVICE正确填写，这部分可以不写) smtp.qq.com
SMTP_PORT SMTP 服务器端口。（同上） 465
SMTP_SECURE 是否使用 SSL 连接 SMTP（同上） true
SMTP_USER SMTP 用户名 5xxxxx@qq.com
SMTP_PASS SMTP 密码(一般不是账户密码而是需要去开通smtp服务，给的对应的密钥) 密码
SITE_URL 网站地址，用于在消息中显示 https://blog.bxzdyg.cn/
SITE_URL 网站地址，用于在消息中显示 BoBoBlog
AUTHOR_EMAIL 博主邮箱，用来接收新评论通知。如果是博主发布的评论则不进行提醒通知. 5xxxxx@qq.com

此处有个坑，不知道为什么这里的AUTHOR_EMAIL和我所想的有点不太一样，我以为博主发一级评论和回复对应的评论就不会收到信息，仅此而已，可实际测试的表现是，填入自己的邮箱自己的邮箱任何邮件都收不到，这明显是给发邮件的邮箱地址用。

选择变量值

环境变量名称 备注 参考值
SENDER_NAME 自定义发送邮件的发件人 BoBoBlog<5xxxxx@qq.com>
SENDER_EMAIL 自定义发送邮件的发件地址
MAIL_SUBJECT 自定义评论回复邮件标题
MAIL_TEMPLATE 自定义评论回复邮件内容
MAIL_SUBJECT_ADMIN 自定义新评论通知邮件标题
MAIL_TEMPLATE_ADMIN 自定义新评论通知邮件内容
注意：任何环境变量的变动，都需要重新部署后才会生效。其次，如果设置了多种提醒方式，仅会有一种生效！

而且有些设置的环境变量，可能在模板上没有被用到。

邮件模板

这里为什么要修改waline的模板呢？因为默认的存在些小小的问题，修改后可以避免这些错误

waline服务器部署对应的厂库的 index.js 文件，如果是通过官方仓库的 index.js 作为 waline 的入口，那么可以通过修改 index.js 文件来修改邮件通知模板

官方默认的邮件模板示例
你waline服务器部署对应的厂库的index.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const Application = require('@waline/vercel');

module.exports = Application({
    mailSubject: '{{parent.nick | safe}}，您在「{{site.name | safe}}」上的评论收到了回复',
    mailTemplate: `
       <div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
         <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">        
           您在博客<a style="text-decoration:none;color: #12ADDB;" href="{{site.url}}" target="_blank">{{site.name}}</a>上的评论有了新的回复
         </h2>
         <div style="padding:0 12px 0 12px;margin-top:18px">
		<p>{{parent.nick}}，您曾发表评论：</p>
           <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{parent.comment | safe}}</div>
           <p><strong>{{self.nick}}</strong> 回复说：</p>
           <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{self.comment | safe}}</div>
           <p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">前往原文查看完整的回复內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb" href="{{site.url}}" target="_blank">{{site.name}}</a>。</p>
           <br/>
         </div>
	  <div style="border-top:1px solid #DDD; padding:13px 0 0 8px;">
		该邮件为系统自动发送的邮件，请勿直接回复。
	  </div>
	  <br/>
       </div>`,
    mailSubjectAdmin: '您的博客「{{site.name | safe}}」收到了新评论',
    mailTemplateAdmin: `
       <div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
         <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">        
           有人在<a style="text-decoration:none;color: #12ADDB;" href="{{site.url}}" target="_blank">{{site.name}}</a>发表了新的评论
         </h2>
         <div style="padding:0 12px 0 12px;margin-top:18px">
		<p><strong>{{self.nick}}</strong> 评论说：</p>
		<div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{self.comment | safe}}</div>
           <p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">前往原文查看完整的评论内容。</a></p>
           <br/>
         </div>
	  <div style="border-top:1px solid #DDD; padding:13px 0 0 8px;">
		该邮件为系统自动发送的邮件，请勿直接回复。
	  </div>
	  <br/>
       </div>`
});

其他的模板

我没有那么多个性化需求，如果以后有，还是自己学成后自己设计吧，我就推几个链接，大家可以去看看

waline邮件通知模板样式一览 | SaraKale’s blog

需要注意，这个博主是采取直接写在服务器的环境变量上，看着更改即可

主要为下面几个变量MAIL_SUBJECT 、 MAIL_TEMPLATE 、 MAIL_SUBJECT_ADMIN 、 MAIL_TEMPLATE_ADMIN

其他通知方式

如微信，qq机器人，微信企业号等等，这里先不论，之后有空再提

用户标签

普通标签

普通标签在 Waline 服务端进行环境变量的配置,添加LEVELS的key即可,对应的value是划分的区间，形式为一串给定的数的逗号拼接，例如 0,10,20,50,100,200

等级 条件 默认等级标签
0 0 <= count < 10 潜水
1 10 <= count < 20 冒泡
2 20 <= count < 50 吐槽
3 50 <= count < 100 活跃
4 100 <= count < 200 话痨
5 200 <= count 传说

此处为普通标签的等级划分方式，转换对应的标签名且看下面

专属标签

专属标签通过管理端（后台）为每位登录用户设定专属标签。

官方文档（用户标签）https://waline.js.org/guide/features/label.html

排行榜/读者墙挂件

读者墙就是把评论用户的头像都放在一起，鼠标停留在上面显示名字，有用到的可以考虑一下
点开查看代码
blog\source\_data\widgets.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
waline_wall:
  title: 本站发言墙
  layout: markdown
  content: |
      <div id="waline-users"><i class="fa-solid fa-cog fa-spin"></i>连接waline数据中...</div>
      <script type="module">
      import { UserList } from 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.mjs';
      UserList({
        el: '#waline-users',
        serverURL: 'https://comment.bxzdyg.cn', // 注意这里不能写成https://comment.bxzdyg.cn/ 
        count: 10,
      });
      </script>
      <style>
      .wl-user-item[aria-label] {
        position: relative;
        z-index: 9999;
      }
      </style>
排行榜看起来就比较明显了,你可以看到左侧的区别，但是有可能因为网络问题，加载不出来
点开查看代码
blog\source\_data\widgets.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
waline_wall:
  title: 本站发言榜
  layout: markdown
  content: |
      <div id="waline-users"><i class="fa-solid fa-cog fa-spin"></i>连接waline数据中...</div>
      <script type="module">
      import { UserList } from 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.mjs';
      UserList({
        el: '#waline-users',
        serverURL: 'https://comment.bxzdyg.cn', // 注意这里不能写成https://comment.bxzdyg.cn/ 
        count: 10,
        mode: 'wall'
      });
      </script>
      <style>
      #waline-users > ul > li > a{display: flex;overflow: hidden;-webkit-box-orient: vertical;}
      #waline-users > ul > li > a > div.wl-user-meta{font-size:14px;color: #999999;}
      #waline-users > ul > li > a > div.wl-user-meta > div{color: var(--swiper-theme-color);}
      #waline-users > ul > li > a > div.wl-user-meta > div:hover {color: #ff5724;}
      .wl-user-name {color: #999;font-weight: bold;}
      </style>
排行榜的小坑

这里我整上去后，和大佬的比对，不断的思考：“我评论区都有等级标签，为什么排行榜没有呢？”

别再瞎折腾了，以为waline的初始化没有初始化好，自己琢磨以自定义的形式输出，结果又碰到博客懒加载插件的冲突的问题，一看就不是这样，一天一夜过去了，咨询了大佬后，反复求证才知道，原来level0在排行榜上是没有标签的，起码level1才有，坑啊，我在琢磨什么啊。

还需要注意，排行榜不统计登录的账号中站长发表的评论数，邮件也会自动排除站长，在你发表评论不会有消息通知，被回复会。

自定义

自定义语言

自定义语言 | Waline

主要就是自己加上一些和修改一些文字描述，下面博主讲主要用到的键贴出来，你们可以去官方文档找一下看看自己需要哪种，再给他加上去，这里面写的极其详细了。

反应相关

blog\_config.stellar.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
comments:
  service: waline 
  waline:
    locale:
      placeholder: 有什么想说的？大胆说出来吧(*^_^*) # 输入框内提示文字
      reactionTitle: 请给这篇文章做个评价吧 # 反应标题
      # 反应表情对应的文字描述
      reaction0: 感兴趣
      reaction1: 给心心
      reaction2: 什么？
      reaction3: 心碎了
      reaction4: 别过来
      reaction5: 哎呀~
      reaction6: 不忍直视
      reaction7: 我真生气辣！
      reaction8: 摇晃

标签相关

blog\_config.stellar.yml
1
2
3
4
5
6
7
8
9
10
comments:
  service: waline 
  waline:
    locale:
      level0: '潜水'
      level1: '冒泡'
      level2: '吐槽'
      level3: '活跃'
      level4: '话痨'
      level5: '传说'

这里为对应等级的标签称号

自定义表情

blog\_config.stellar.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
comments:
  service: waline 
  waline:
    # 反应表情
    reaction: 
     - /emojis/ablobcatattentionreverse.png  # 兴奋
     - /emojis/ablobcatheart.png  # 开心
     - /emojis/ablobcatdoubt.png  # 惊讶
     - /emojis/ablobcatheartbroken.png  # 伤心
     - /emojis/ablobcatterrified.png  # 害怕
     - /emojis/ablobcatshy.png  # 害羞
     - /emojis/ablobcatnoface.png # 轻蔑
     - /emojis/ablobcatanger.gif  # 生气
     - /emojis/ablobcatrainbow.png  # 摇晃
    # Custom emoji
    emoji:
      - https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs
      - https://unpkg.com/@waline/emojis@1.1.0/bilibili
参考资料
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章

快来参与讨论吧~

博客近期分类标签归档
笔记Vue学习笔记Django学习笔记MySQL学习笔记
社交友链留言板
更多关于本站GitHubGitee

本破站由 @BXZDYG 使用 Stellar 主题创建。
本博客部分素材来源于网络，如有侵权请联系1476341845@qq.com删除
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。

本"页面"访问 次 | 👀总访问 次 | 总访客 人
全部都是博主用心学编写的啊！不是ai啊 只要保留原作者姓名并在基于原作创作的新作品适用同类型的许可协议，即可基于非商业目的对原作重新编排、改编或者再创作。