Hexo引入评论系统

1 篇文章 0 订阅

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: 给我的文章加点评论吧~ # 评论框占位符

主题修改配置

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就可以使用了

在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值