Hexo yilia 主题添加 valine 评论系统

2019-05-22

字数统计: 512字 | 阅读时长: 2分 | 0°

本文仅讨论在 yila 中所增加或修改的代码，有关 leancloud 的申请及配置，请参考我所参考的两篇博文：

1. 主题配置文件添加 valine 相关配置

修改 hexo 博客目录的 theme/yilia 中的 _config.yml 文件，增加如下配置：

#8、Valine
valine:
 appid: #Leancloud应用的appId
 appkey: #Leancloud应用的appKey
 verify: false #验证码
 notify: true #评论回复提醒
 placeholder: 有话要说？ #评论框占位符

2. 新增 valine 代码文件

在 yilia 中的 layout/_partial/post 下新增 valine.ejs文件，内容如下：

<div class="valine_comment"></div>
<!--载入js，在</body>之前插入即可-->
<!--Leancloud 操作库:-->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!--Valine 的核心代码库-->
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
  var notify = '<%= theme.valine.notify %>' == true ? true : false;
  var verify = '<%= theme.valine.verify %>' == true ? true : false;
  new Valine({
      // AV 对象来自上面引入av-min.js(老司机们不要开车➳♡゛扎心了老铁)
      av: AV,
      el: '.valine_comment',
      emoticon_url: 'https://cloud.panjunwen.com/alu',
      emoticon_list: ["狂汗.png","不说话.png","汗.png","坐等.png","献花.png","不高兴.png","中刀.png","害羞.png","皱眉.png","小眼睛.png","暗地观察.png"],
      app_id: '<%= theme.valine.appid %>',
      app_key: '<%= theme.valine.appkey %>',
      placeholder: '<%= theme.valine.placeholder %>'
    });
</script>

3. 修改 article.ejs

修改 yilia 中的 layout/_partial/article.ejs 文件，在 <% if (!index && post.comments){ %> 后的任意一个评论代码前或后插入如下代码：

1
2
3

<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
  <%- partial('post/valine') %>
<% } %>

如上三步，修改完成。如果要启用，修改主题的 _config.yml 文件，将 leancloud 上创建的应用的 appid 和 appkey 配置上即可，注意冒号之后有空格。

本文由浩码农创作，采用 CC BY-NC-SA 4.0 许可协议
本站文章除注明转载/出处外，均为本站原创或翻译，转载请务必署名