一、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的链接注释了。
   
   完美！收工~

   效果查看：传送门

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