[Hexo]让游客们到你的Hexo博客留个脚印吧

valine

哇真的超开心你们知道嘛!我的上一篇文章“[Hexo]基于Hexo+Coding+Github搭建个人博客的全过程”发布不到24个小时就有超过5位大佬来评论了!我之前那个lowlow的博客!一年多都没有人给我留个言评个论!真的超级开心!超级激动!感觉我写了好几天的文章得到了认可!

所以!今天!我要教大家!如何给这个用了 Next 主题的 Hexo 博客添加评论功能!让广大群众!一起快乐!呀哈哈(玩塞尔达的应该知道这个梗吧嘻嘻)!
本文在电脑上浏览体验最佳

我开启了邮件提醒评论回复,你们为什么不留下 邮箱地址 咱们做个深入交流呢???
Miaia

概述

首先说一下实验环境,啊呸,博客使用的环境,呃虽然觉得这个说法怪怪的…我文字功底还有待提高,先将就看嘻嘻!
本文配置 Valine 功能所使用的环境如下:

* Windows 10 1803
* node-v8.11.2-x64
* git version 2.17.1.windows.2
* hexo-v3.7.1
* NexT.Muse v6.3.0
* LeanCloud
* 小可爱一枚

请注意,本文配置 Valine 是基于 Next 主题的,相对来说更简单一些,如果不是使用 Next 主题,这里提供Valine 官方文档给大家参阅,当然也欢迎大家留言交流啦!


LeanCloud 基本应用创建

一如既往,我先放上官网链接 LeanCloud (https://leancloud.cn/),我觉得找到官网是一个很好的习惯QAQ,毕竟他们要名声不会把坑爹的东西不负责任地放到网上给大家用…也能避免很多坑…

注册 LeanCloud

哎呀省的绕路了,直接给大家注册地址吧,LeanCloud 注册链接

register-leancloud

我觉得吧,注册这件事情应该是不用多说的QAQ,就填好信息咱们接着往下看!

创建应用

在我们注册登陆之后我们可以看到下图中的这样一个界面,点击红框中的“创建应用”。

create-application-overview

然后在弹出框中填写你应用的名字,使用免费的开发版即可~

create-application-detail

这样应用就创建完成啦!创建完成后我们可以看到这样的一个东东。

application-created

获取应用 Key

我们点击应用名进入应用页面。
然后在新出来的页面当中,依次点击最左侧红框中的“设置”和中间红框中的“应用 Key”,我们就可以看到这样的一个界面。

find-app-key

在最右侧的两个红框中,分别是我们刚刚创建应用的 App ID 和 App Key,我们将其复制下来以供接下来的配置使用。

配置安全域名

现在这个状态,任何人都可以访问我们的资源,这样就有可能会导致资源的泄露,所以我们需要配置安全域名,只有在白名单中的域名才可以使用我们的资源。
仍然是在刚才的设置页面,点击当中红框的“安全中心”,在最右侧红框“Web 安全域名”中根据提示填写我们站点的域名后点击保存即可。

set-up-safe-domains


配置 Next 主题中的 Valine 评论功能

接下来我们就要把评论功能添加到博客中去啦!
我们到 主题的配置文件 _config.yml 中搜索 # Valine. 这一段字符,我们可以看到这样的内容:

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: false
  appid:  # your leancloud application appid
  appkey:  # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

每一个字段对应的功能如下:

enable: false              # 是否开启valine评论功能,可用参数:true, false
appid:                     # 我们刚刚创建的leancloud应用获取的App ID
appkey:                    # 我们刚刚创建的leancloud应用获取的App Key
notify: false              # 是否开启有新评论或回复是的邮件提醒,可用参数:true, false
verify: false              # 是否开启评论时需要输入验证码,可用参数:true, false
placeholder: Just go go    # 在评论框内显示的提示性文字
avatar: mm                 # 头像的类型
guest_info: nick,mail,link # 自定义可选让用户填写的个人信息,nick=昵称,mail=邮箱,link=用户主页
pageSize: 10               # 控制每页最多显示的评论条数

我们将刚刚获得的 App ID 和 App Key 分别填写到 appidappkey 这两个字段的冒号后面。
再次提醒!冒号后面需要有一个 *空格*
并且将 enable 修改为 true,其他的参数可以根据实际情况自行修改,其中 notify 的配置我们在下一节介绍。
在本节当中,填写完的配置应该是类似这样的:

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid:  U7aB9evsRQXXqCqnPXG3cCjS-9Nh9j0Va # your leancloud application appid
  appkey: 38D4FiUTxAYvTNaoAuF9Rm8G          # your leancloud application appkey
  notify: false                             # mail notifier , https://github.com/xCss/Valine/wiki
  verify: true                              # Verification code
  placeholder: ヾノ≧∀≦)o来啊,快活啊!         # comment box placeholder
  avatar: mm                                # gravatar style
  guest_info: nick,mail,link                # custom comment header
  pageSize: 10                              # pagination size

然后!刷新你文章的那个页面!!!你看!是不是评论功能 已经出现啦 !!!


配置 Valine 新回复的邮件提醒功能

哎呀,其实我一开始没抱太大希望马上就能有大佬们回复我,偶然打开主页一看,发现评论数 4 !!!
我们何不让这样的快乐迈着小碎步跑到邮箱来敲门呢?!
接下来,我使用了很强大的神器!Baidu!!搜索到了邮件提醒的方案。
这个功能是 赵俊大大 基于 LeanCloud 云引擎实现的,这是原贴链接 Hexo 优化 — Valine 扩展之邮件通知
以下内容是我自己配置时的步骤,撰写时间是 2018.6.17,因为 赵俊大大 还在更新功能,所以以后配置过程可能会有变化。

添加代码库地址

我们打开刚才我们在 LeanCloud 创建好的应用,然后从左往右依次点击下图中红框标记的按钮,进入到云引擎设置界面。
然后我们在最右侧红框中填写 赵俊大大 所编写的 Valine-Admin 扩展的 Git 地址,填写完后别忘记点击保存哟~
赵俊大大 所编写 Valine-Admin 扩展的 Git 地址:https://github.com/zhaojun1998/Valine-Admin

set-up-cloud-engine-git-address

添加环境变量

在我们添加好代码库地址后,在同一页面,往下拉,我们可以看到“自定义环境变量”,然后我们需要在下方添加一些环境变量。

add-env-overview

其中,必须要填写的环境变量如下:

环境变量名作用和使用方法
SITE_NAME你博客的名称,显示在邮件中,如 十一種情緒的堆棧
SITE_URL博客的地址, 最后不要加 / ,如 https://11.tt
SMTP_USERSMTP 服务的用户名,一般为邮箱地址,如 `no-reply@11.tt`
SMTP_PASSSMTP 密码,一般为授权码,而不是邮箱的登陆密码,请自行查询对应邮件服务商的获取方式。如 password
SMTP_SERVICE邮件服务提供商,支持 QQ、163、126 等,填写该变量就不用单独配置 SMTP 服务器等内容,全部支持的邮箱服务商请参考 Nodemailer Supported services 中列出的服务商,此处填写列出服务商中的代号就行,如QQ企业邮箱代号为 QQex,在此处就填写 QQex
SENDER_NAME发送提醒邮件时,邮件寄件人的名称,如 评论提醒——十一種情緒的堆棧

另外,还有一部分可选的环境变量如下:

环境变量名作用和使用方法
TO_EMAIL指定站长收信邮箱,默认值为 SITE_USER。用于 SMTP 发件人与站长收件人不一致的情况下使用
TEMPLATE_NAME配置提醒邮件使用的主题,默认值为 default,可选值为 rainbow,即上方演示的彩虹样式,此配置会去寻找 template{TEMPLATE_NAME} 目录下的 notice.ejs 与 send.ejs 模板文件,分别用于通知站长和通知游客,另外欢迎到 原贴 提供邮件主题样式

如果你的邮件服务商不在上方列表中,又或是我们有很多同志自己搭建了强大的邮件服务器,不受那些限制多多的邮件服务商困扰,那么 赵俊大大 同样给大家提供了解决方案,我们只需要在环境变量中单独配置 SMTP 服务器地址即可,需要配置的环境变量如下:

环境变量名作用和使用方法
SMTP_HOST邮件服务提供商 SMTP 地址,此项需要自行查询或询问服务商,如 smtp.qq.com
SMTP_PORT邮件服务提供商 SMTP 端口, 此项需要自行查询或询问服务商,如 465
SMTP_SECURE是否启用加密, 默认为 true,一般不需要设置,如有特殊请自行配置,此项需要自行查询或询问服务商。

请注意,如果启用了自定义邮件服务商,那么请删除上方必选环境变量中的 SMTP_SERVICE 变量,只有当 SMTP_SERVICE 未配置时才会启用自定义邮件服务!!!

填写好环境变量后,你的环境变量应该是类似这样的:

add-env-done

添加 Web 主机域名

为了使用我们的管理界面,我们需要一个主机的域名,使用免费的即可,没有太大影响,如果你需要使用自定义的域名,域名必须要备案才可以哦,可以自行研究。

add-cloud-domain

好啦!一切准备就绪啦!

部署源码

在万事具备之后,我们终于要开始请东风咯!
我们打开刚才我们在 LeanCloud 配置好的应用,然后从左往右依次点击下图中红框标记的按钮,进入到云引擎 Git 源码部署界面。

set-up-cloud-engine-overview

然后选择需要配置的分支,并勾选下载最新依赖,额也可以不下的其实…如图所示填写和勾选:

set-up-cloud-engine-branch

然后点击部署,静静等待哦!千万不要关闭页面和瞎点!不然会中止的!

deploy-cloud-engine

在部署完成后,页面就变成了这个样子~

deploy-cloud-engine-done

然后我们需要像这样重启一下容器,以保证部署好的服务开始运行:

restart-docker

重启完之后,我们只需要将前文中提到的主题中 Valine 的配置文件里 notify 字段设置为 true 即可开启新评论邮件提醒功能啦!
对了,弄好之后别忘了 hexo d 将新的静态文件传到 Coding 和 Github 哦!

添加后台管理用户

我们现在已经可以通过访问我们刚才配置的 Web 主机域名已经可以访问后台页面了,后台页面可以提供删除功能,据 赵俊大大 说,他将在将来为后台添加更多的功能哦!
首先我们需要添加一个可以登录的用户,红框标注的 username、password 和 email 为必填项:

add-administrator

然后访问我们的 Web 主机域名,输入用户名/邮箱和密码,就可以登录到后台页面啦!像这样:

admin-comments

OK!大功告成啦!QwQ感觉这一张写得好像报流水账一样…这样不好不好…我回头慢慢改进…


总结

今天我们完成了给使用 Next 主题的 Hexo 博客添加基于 LeanCloud 的 Valine 评论功能,并为它完善了邮件提醒功能,这里再次感谢 赵俊大大编写的邮件提醒扩展~
另外,附上在开启 Valine 评论功能后我现在这一部分的配置:

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid:  U7aB9evsRQXXqCqnPXG3cCjS-9Nh9j0Va # your leancloud application appid
  appkey: 38D4FiUTxAYvTNaoAuF9Rm8G          # your leancloud application appkey
  notify: true                              # mail notifier , https://github.com/xCss/Valine/wiki
  verify: true                              # Verification code
  placeholder: ヾノ≧∀≦)o来啊,快活啊!         # comment box placeholder
  avatar: mm                                # gravatar style
  guest_info: nick,mail,link                # custom comment header
  pageSize: 10                              # pagination size

友情提示兼职常见问题

  1. 在开启这个 Valine 后,如果 appid 和 appkey 填写正确,就会显示评论框;
  2. 如果提示安全域名问题,请看这里添加安全域名;
  3. 文中用到的 appid 和 appkey 仅作演示,文章写完后就会删除应用,不要抄作业哦!
  4. 如果修改了博客链接的生成方式,旧的评论需要在 LeanCloud 云储存中修改相应记录的地址!
  5. 你们回复我的时候写上邮箱好不好啦!这样我回复你们之后,你们邮箱就可以收到通知啦!
坚持原创!欢迎客官给我打赏买小饼干吖!✿✿ヽ(°▽°)ノ✿