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漂漂亮亮，就不採用啦！