Hexo引入评论系统

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

1、获取AppIDAppKey

  • 注册LeanCloud

  • 创建应用,开发版即可

  • 创建完成点击设置→应用 Keys 获取AppIDAppKey

  • 增加你的域名,在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: 给我的文章加点评论吧~ # 评论框占位符

Hexo引入评论系统

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/valine@1.4.14/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就可以使用了

Hexo引入评论系统

上一篇:在阿里云服务器Centos7+Nginx+Window部署Hexo博客


下一篇:哟呵,Github 免费从 0 到 1搭建个人博客网站