Hexo-Next/Matery 基于 LearnCloud 添加 Valine 评论系统


一、注册

LeanCloud

建议使用国际版,国内的要备案,而且免费用户不给备案,dddd,所以我转到国际版了

国际版和国内版账号不互通

注册完需要绑定邮箱和手机号才能创建应用

二、创建应用

应用名称随意,白嫖选择开发版

创建完之后进入控制台,打开安全中心

将你的博客域名添加到白名单

然后打开应用凭证,找到你的 AppIDAppKey,待会需要用到

三、数据存储

创建无限制的存储,用来存评论信息

四、Hexo 配置

Next 主题

找到 Next 主题的配置文件

搜索 valine

将自带的 CDN 改为第三方 CDN

//cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js

jsdelivr 是一个著名的第三方 CDN 服务商,如果你的博客哪一天突然样式啥的出问题,通俗的讲就是炸了,F12 看看报什么错,估计是 jsdelivr 的 DNS 出问题了,之前我就有过一次,亚洲全红

继续搜索 valine,找到 valine 的核心配置,填入上面获取到的 AppID 和 AppKey

# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: true
  appid: abcdeeadaedaedaada # 填上面获取到的APPID
  appkey: abcdeeadaedaedaada # 填上面获取到的APPKEY
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: 'ヾノ≧∀≦)o来啊,快活啊!' # 评论框不输入字符时显示的句子
  avatar: mm # 不用修改
  guest_info: nick,mail,link # 不用修改
  pageSize: 10 # 一页内评论的数量,多了就需要翻页
  language: zh-cn # 语言
  visitor: true  # 不用修改
  comment_count: true # 不用修改
  recordIP: false # 是否记录评论人的IP地址
  serverURLs: # 如果API地址变动了则需要修改
  #post_meta_order: 0

评论的邮件提醒采用 Valine-Admin,所以关闭自带的 notify

Matery主题

Matery主题不需要配置 CDN,只需要修改配置文件

valine:
  enable: true
  appId: aaaaabbb // 刚才获取的APPID
  appKey: aaaaabbb // 刚才获取的APPKEY
  notify: false
  verify: false
  visitor: true
  language: zh-cn
  comment_count: true
  serverURLs: '' // 如果是国际版需要修改API地址
  avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  pageSize: 10
  placeholder: 'ヾノ≧∀≦)o来啊,快活啊!' # Comment Box placeholder
  background: /medias/comment_bg.png
  # coolpushkey: 
  recordIP: false

五、Valine Admin

部署

在云引擎中找到部署页面,选择部署项目

选择 Git 部署

点击蓝色的按钮 配置 Git,输入地址 https://github.com/DesertsP/Valine-Admin.git

环境变量

环境变量:

变量示例说明
ADMIN_URLhttps://hello.cimoc.cn[可选] 二级域名,用来自动唤醒
BLOGGER_EMAILhello@qq.com[可选] 博主邮箱,默认与 SENDER_EMAIL相同
SENDER_EMAILhello@qq.com[必填] 发件邮箱
SENDER_NAME❤纱雾的博客[必填] 发件人
SITE_NAME❤纱雾的博客[必填] 博客名称
SMTP_SERVICEQQ[必填] 邮件服务商,如QQ,163,Gmail等
SMTP_USERxxxx@qq.com[必填] SMTP 登录账号,可以去你的邮箱里设置
SMTP_PASSxxxxxxxxx[必填] SMTP 登录密码(QQ 邮箱需要获取独立密码)
SITE_URLhttps://cimoc.cn[必填] 博客地址

还有一些邮件通知模板的环境变量单独作为一个模块放在下面
关于上面环境变量中SMTP相关的账号密码如何获取请自行百度,推荐使用163

下面是邮件模板的环境变量

变量示例说明
MAIL_TEMPLATE_ADMIN下见发给博主的邮件模板
MAIL_TEMPLATE下见发给评论者的邮件模板
MAIL_SUBJECT_ADMIN${SITE_NAME} 上有新评论了发给博主的邮件标题
MAIL_SUBJECT${PARENT_NICK},您在 ${SITE_NAME} 上的评论收到了回复发给评论者的邮件标题

评论者邮件模板:

<div style="border-radius: 10px 10px 10px 10px;font-size:13px;    color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);"><div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"><p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #ffffff;" href="${SITE_URL}"> ${SITE_NAME}</a>上的留言有新回复啦!</p></div><div style="margin:40px auto;width:90%"><p>${PARENT_NICK} 同学,您曾在文章上发表评论:</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${PARENT_COMMENT}</div><p>${NICK} 给您的回复如下:</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${COMMENT}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}#comments">查看回复的完整內容</a>,欢迎再次光临<a style="text-decoration:none; color:#12addb"                href="${SITE_URL}"> ${SITE_NAME}</a></p><style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style></div></div>

博主邮件模板:

<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><p><strong>${NICK}</strong>回复说:</p><div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;"> ${COMMENT}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a><br/></p></div></div>

ADMIN_URL 二级域名用来评论的后台管理,也用来自动唤醒服务,因为白嫖版一天只能运行18小时

详见 LearnCloud 自动唤醒 | Cimoc

设置二级域名

然后去你的域名服务商那里配置 DNS 解析,之后会花一小段时间部署证书,如果你没有使用 SSL 的话自然不需要

切换到部署页面,开始部署

评论管理

首先要设置管理员信息

访问管理员注册页面http://你之前绑定的域名/sign-up

注册后就可以在 http://你之前绑定的域名 进行登录管理

六、结尾

如果你使用的是国内版的 LeanCloud,那么到这里就结束了,剩下的就需要你去设置 LeanCloud 自动唤醒 | Cimoc

如果你使用的是国际版,那么继续往下看,因为在 2021 年 11 月 23 日 LeanCloud 下线了 us-api.leancloud.cn,需要升级 SDK 或 修改 API 地址

七、国际版问题

由于老的 API 地址已经失效,LeanCloud 给每个示例都分配了独立的 API 子域名

可以在 设置 -> 应用凭证 找到

配置文件—Next主题

在主题配置文件 themes > next > _config.yml 中找到 valine 相关配置

serverURLs 修改为上面的服务器地址即可

配置文件—Matery主题

Matery目前的配置并不支持修改serverURLS,所以我们需要手动去修改文件

找到 themes\layout\_partial\valine.ejs 文件

加入以下代码

serverURLs: '<%= theme.valine.serverURLs %>

如图

修改完成之后就可以在配置文件中加入serverURLs

其他

除了 Valine,我们的后台 Valine-Admin 也用的是旧版本 SDK

虽然还没什么异常发生,但是我 fork 了一份到自己的仓库并且也修改了配置,下面是教程

  1. 打开原仓库 ,并 fork 到自己仓库

  2. 编辑 server.js

  3. 将 AV.init 修改为:

    AV.init({
      appId: process.env.LEANCLOUD_APP_ID,
      appKey: process.env.LEANCLOUD_APP_KEY,
      masterKey: process.env.LEANCLOUD_APP_MASTER_KEY,
      serverURLs: {
        push: 'https://xxxx.com',
        stats: 'https://xxxx.com',
        engine: 'https://xxxx.com',
        api: 'https://xxxx.com',
      },
    });

    he
    其中四条 url 都是你的 API 地址

  4. 之后重新在云引擎部署即可


文章作者: ❤纱雾
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 ❤纱雾 !
评论
  目录