Hexo Next国内IP使用leancloud国际版添加Valine评论设置邮件通知功能

楔子

之前我的Hexo使用的评论系统是Gitalk,调用的是Github的服务,但是github在国内经常无法正常使用,所以决定换一个评论系统,虽然也没啥人来评论😅。Valine是一款简洁快速的无后端评论系统,依赖于leancloud服务。Leancloud分为国际版和国内版,国内版域名必须绑定自定义域名才可以使用,而且域名必须备案。而国际版目前对国内的IP进行了屏蔽,使用国内的IP无法正常使用Leancloud国际版的服务,具体表现为评论框无法加载,留言点击发送后无任何反应等等,也就无法正常通过valine进行评论。这篇文章的目的是使用国内IP可以正常访问国际版的Leancloud,从而使用valine进行评论,另外通过在Leancloud部署Valine-Admin服务来实现新留言和评论邮件提醒功能。

环境

Hexo 7.3.0
Next主题版本:8.21.0
部署:Github+Cloudflare Pages
另外还需要准备两个二级域名来绑定Leancloud的相关服务,一个用于设置自定义API地址,另一个用于访问valine-admin面板。

Valine插件安装

目前最新的Next主题虽然已经移除了对Valine的原生支持,但是可以通过插件来启用Valine功能。
GitHub - next-theme/hexo-next-valine: Valine comment system for NexT.

在hexo目录下面执行命令进行安装

1
npm install next-theme/hexo-next-valine

Leancloud账号设置

登录到Leancloud国际站LeanCloud创建应用并获取对应的AppID和AppKey。

进入设置-域名绑定,根据提示绑定API访问域名。直到提示如下图所示已绑定。
image.png

Valine插件设置

在hexo 的_config.yml文件中插入以下字段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
enable: true
appId: # your leancloud application appid
appKey: # your leancloud application appkey
serverURLs: # When the custom domain name is enabled, fill it in here
placeholder: Just go go # comment box placeholder
avatar: mm # gravatar style
meta: [nick, mail, link] # Custom comment header
pageSize: 10 # pagination size
visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP

将字段中的appid以及appkey替换为自己的信息,serverURLs处填写上一步设置的API访问域名。其他设置根据自己实际情况参阅插件Github进行设置GitHub - next-theme/hexo-next-valine: Valine comment system for NexT.

设置完成之后重新部署hexo即可。经过上面设置之后 我们现在就可以用国内IP使用Leancloud国际版的服务了。如果你还需要在收到新留言或是留言被回复的时候给自己或是留言者发送邮件提醒的话可以接着往下看。

部署Valine-Admin服务

Valine-Admin是用于管理valine的简单面板,可以在Leancloud中进行部署。项目Github主页:GitHub - DesertsP/Valine-Admin: 🔥A simple comment system based on LeanCloud and Valine.

按下图所示,进入云引擎-管理部署,新建一个分组,类型选择免费版。
image.png

部署选择git部署,目标环境为生产环境。git URL输入https://github.com/DesertsP/Valine-Admin.git,分支填入master,然后点击部署。

image.png

接着按照下图设置环境变量
image.png

ADMIN_URL 输入我们设置的第二个二级自定义域名,用于访问留言面板。

参数详细说明如下:

变量 示例 说明
SITE_NAME Deserts [必填]博客名称
SITE_URL https://panjunwen.com [必填]首页地址
SMTP_SERVICE QQ [新版支持]邮件服务提供商,支持 QQ、163、126、Gmail 以及 更多
SMTP_USER xxxxxx@qq.com [必填]SMTP登录用户
SMTP_PASS ccxxxxxxxxch [必填]SMTP登录密码(QQ邮箱需要获取独立密码)
SENDER_NAME Deserts [必填]发件人
SENDER_EMAIL xxxxxx@qq.com [必填]发件邮箱
ADMIN_URL https://xxx.leanapp.cn/ [建议]Web主机二级域名(云引擎域名),用于自动唤醒
BLOGGER_EMAIL xxxxx@gmail.com [可选]博主通知收件地址,默认使用SENDER_EMAIL
AKISMET_KEY xxxxxxxx [可选]Akismet Key 用于垃圾评论检测,设为MANUAL_REVIEW开启人工审核,留空不使用反垃圾

下载该页面设置自定义域名,这里设置的域名要与你在变量中填入的ADMIN_URL一致,直到提示已绑定。
image.png

变量设置并保存之后重新部署该项目,然后访问自定义域名/sign-up,注册管理员信息之后就可以登录面板了。如果你的相关变量设置无误,在有新留言或是留言被回复的时候,相应的邮箱就会收到提醒邮件了。如果接收不到邮件,可以查阅日志,根据报错提示查找问题所在。
image.png