Hexo引入评论系统

Valine：一款快速、简洁且高效的无后端评论系统。

1、获取AppID 和 AppKey

• 注册LeanCloud
• 创建应用，开发版即可
• 创建完成点击设置→应用 Keys 获取AppID和AppKey
• 增加你的域名，在Leancloud -> 设置 -> 安全中心 -> Web 安全域名配置

2、修改配置

• 打开主题配置文件，修改_config.yml
• 增加或修改如下配置

# 1、Valine[一款快速、简洁且高效的无后端评论系统](https://github.com/xCss/Valine)
# 启用Valine必须先创建leancloud应用， 获取 id|key 填入即可
leancloud:
  enable: true
  app_id: 你的AppID
  app_key: 你的Appkey
# Valine配置
valine:
  enable: true # 是否启用i
  verify: false #验证码
  notify: false #评论回复提醒
  avatar: wavatar # 头像样式(https://valine.js.org/avatar.html)
  placeholder: 给我的文章加点评论吧~ # 评论框占位符

3、valine.ejs配置

目录：themes/yilia-plus/layout/_partial/post/valine.ejs下添加如下文件

<% if (!index && theme.leancloud && theme.leancloud.enable && post.comments){ %>
<!-- valine评论 -->
<div id="vcomments-box">
  <div id="vcomments"></div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Valine.min.js"></script>
<script>
  new Valine({
    el: "#vcomments",
    app_id: "<%- theme.leancloud.app_id %>",
    app_key: "<%- theme.leancloud.app_key %>",
    path: window.location.pathname,
    avatar: "<%- theme.valine.avatar %>",
    placeholder: "<%- theme.valine.placeholder %>",
    recordIP: true,
  });
  const infoEle = document.querySelector("#vcomments .info");
  if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
    infoEle.childNodes.forEach(function (item) {
      item.parentNode.removeChild(item);
    });
  }
</script>
<% } %>

4、重启你的hexo就可以使用了

Donate