Hexo yilia 主题添加 valine 评论系统

Posted 2022-06-09 貌似掉线

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

• 《Hexo yilia主题 添加valine评论系统》
• 《Valine: 独立博客评论系统》

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) %> 后的任意一个评论代码前或后插入如下代码：

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

---

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