其他分享
首页 > 其他分享> > Hexo引入评论系统

Hexo引入评论系统

作者:互联网

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

1、获取AppIDAppKey

2、修改配置

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

在这里插入图片描述

标签:Hexo,infoEle,app,Valine,item,评论,valine,引入
来源: https://blog.csdn.net/Jarvanxy/article/details/114385764