Hexo（sakura）添加Rating投票功能

一、Rating简介

有没有在看完文章后，给文章打过评分呢？

评分需要css画出5个五角星；js点击，然后记录评分值并改变星星；
但是刷新界面后，之前的评价就没有了，保存评分的话需要数据库，怎么办？

不会写后台没有关系，widgetpack.com给我们提供了这个接口，非常nice哦！

接下来就是如何给我们的文章加入评分功能的介绍，非常简单。

二、配置

1.申请账户

官网：widgetpack.com，邮箱注册就可。
这里让填写域名。

成功后，会得到一个ID，很重要！后面会用到~

2.配置投票样式

1. 作者隐藏菜单栏找到Rating-》setting
   

2. 设置投票记录方式，有三种可选：

   • Social
   • IP Address
   • Device（Cookie），国内建议采用此种方式
     

3. 设置颜色样式、大小
   
   配置好后，save setting保存配置!

4. 获取嵌入式代码（左侧菜单栏：install）
   
   哲理拷贝一下：
   

3.hexo配置

我是sakura主题，其他主题也相似，这是外嵌的样式，均可引用此方法；
不同主题只是配置文件存放路径不同而已。

1. 在主题样式中，我是在themes\sakura\layout\_partial\目录下：
   新建widgetpack.ejs，将刚才的嵌入代码粘贴进去：

   <div id="wpac-rating"></div>
   <!-- <div id="wpac-comment"></div> -->
   <script type="text/javascript">
   wpac_init = window.wpac_init || [];
   wpac_init.push({widget: 'Comment', id: 23889});
   (function() {
       if ('WIDGETPACK_LOADED' in window) return;
       WIDGETPACK_LOADED = true;
       var mc = document.createElement('script');
       mc.type = 'text/javascript';
       mc.async = true;
       mc.src = 'https://embed.widgetpack.com/widget.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
   })();
   </script>
   <a href="https://widgetpack.com" class="wpac-cr">Comments System WIDGET PACK</a>
   

2. 在文章末尾显示位置themes\sakura\layout\_widget\common-article.ejs添加引用：

   		<!-- 评分 -->
           <%if (theme.widgetpack.enable) { %>
             <%- partial('_partial/widgetpack') %>
           <% } %>
   

   （我添加在footer前：<footer class="post-footer">）

3. 在主体中设置开启投票：

   # widgetpack。将 false 改为 widgetpack 上的 id 则启用该评论系统。
   # Star rating support to each article.
   # To get your ID visit https://widgetpack.com
   widgetpack:
     enable: true #false
     id: 23889 #<app_id>
     color:  fc6423
   

   
   居中一下：（因为sakura没有设置roting的样式，next和yilia都有，这里就简单居中一下吧。）

   		<!-- 评分 -->
           <div class="single-reward">
               <%if (theme.widgetpack.enable) { %>
                 <%- partial('_partial/widgetpack') %>
               <% } %>
           </div>
   

   另外还把a标签WIDGET的链接注释了。
   
   完美！收工~

   效果查看：传送门

4.当然在后台我们能看到是谁点赞哦！

ps. widgetpack.com还有评论功能，界面如下：
emmm，没有我的valine漂漂亮亮，就不采用啦！