Hexo yilia 添加 Vuukle 评论系统

2019-05-22

字数统计: 372字 | 阅读时长: 1分 | 0°

注册并获取 API key

先到 https://vuukle.com/ 上注册为 publisher。然后参考其文档获取自己的 API key。

修改 yilia 主题

接下来步骤还是如前面的博客，如下：

1. 主题配置文件添加 vuukle

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

1 2	#10、Vuukle vuukle: #vuukle API key

2. 新增 vuukle 代码文件

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

<div id='vuukle-comments'></div>
<script>
  var VUUKLE_CONFIG = {
        apiKey: "<%=theme.vuukle%>",
        articleId: "<%=url%>",
  };
  // ⛔️ DON'T EDIT BELOW THIS LINE
  (function() {
         var d = document,
                s = d.createElement('script');
         s.src = 'https://cdn.vuukle.com/platform.js';
        (d.head || d.body).appendChild(s);
  })();
</script>

上面添加的 div 是评论控件，除此之外，该站点还提供了其他控件，可自行添加：

<div id='vuukle-emote'></div> 感想表情控件
<div id='vuukle-newsfeed'></div> 新闻推送控件
<div class='vuukle-powerbar'></div> 社交分享控件

3. 修改 article.ejs

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

<% if (theme.vuukle){ %>
  <%- partial('post/vuukle', {
      url: url_for(post.path)
    }) %>
<% } %>

如上，修改完成。如果要启用，修改主题的 _config.yml 文件，将 API
key 配置上即可，注意冒号之后有空格。

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