[toc]

背景

大多数读者比较害羞，不喜欢留言，这样子就不方便自己从读者角度评价博客文章的质量，希望在网站增加投票的功能，方便读者留下评价和反馈。

多平台维护不易，最新文章更新于 个人网站，欢迎访问和留言。

网站的NexT主题，已默认集成WidgetPack的Rating widget，在主题文件夹下的 _config.yml 的 rating 字段就可见相关默认配置。

# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: false
  id:     #<app_id>
  color:  fc6423
# ---------------------------------------------------------------

总体而言，NexT已经默认集成了WidgetPack的Ratingwidget，要启用Ratingwidget，只需要在WidgetPack.com注册后添加站点，获得ID后，修改NexT主题配置文件rating字段内容即可。目前，WidgetPack对个人用户提供了部分免费功能，可以满足个人博客网站的需求。

什么是 WidgetPack

Widget Pack makes it easy to add website widgets like comments, reviews, rating to your Blog, Online Shop or Website in minutes.

While using this Site, you may need to feed-in personal information that can be used to contact or identify you (“Personal Information”). Personal Information may include, but is not limited to, some unique characteristics that disclose your personality, such as: name, email, photo, likes and dislikes.
WidgetPack web-servers automatically track and store Site usage data. This information is liable to include, but is not limited to, your computer’s IP. Along other sites, WidgetPack also uses “cookies” to collect such information. A cookie is an essential data file that is stored on your computer hard drive for record-keeping purposes allowing saving your registration ID and login password for prospective logins to WidgetPack Site; “session ID cookies” enable certain features of the Site providing authentication, identification of a user session, session contents and some other preferences.
You can tweak your browser by changing its options to stop accepting cookies or to prompt you before accepting a cookie from the websites you visit. If you do not accept cookies, however, you may not be able to use some of the Site’s features or all the functionalities of our services.

简而言之，Widget Pack会在得到授权的情况下，自动跟踪和存储你在某些网站上留下的个人信息(邮箱、IP、cookies)等，方便快捷地为一些博客、购物网站提供评价、留言和投票等小插件功能。

目前，WidgetPack对个人用户提供了部分免费功能，一个网址和一个moderator，可以满足个人博客网站的需求。

image

配置过程

获取ID

• 点击 Widgetpack.com 链接注册，可以获得获取用户ID。
• 在 “Add new site” 中，填入网站地址和名称，会生成Rating Widget安装代码，如下所示。

image

<div id="wpac-rating"></div>
<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: your_id}); # your_id 为注册生成的ID
(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">Star Rating WIDGET PACK</a>

以上安装代码已默认集成到 /hexo/themes/next/layout/_third-party/rating.swig文件中，所以除了确认下ID，不需要其他操作。

设置投票方式

在网站上，在侧边栏可以选择统计 Rating 的方式。

image

目前网站有三种方式可选，目标读者是国内的话，建议采用Device，我是选择 IP Address。

• Social
• IP Address
• Device(Cookie)

image

Hexo 配置

NexT主题配置文件 _config.yml 中 rating 的默认设置如下：

rating:
  enable: false
  id:     #<app_id>
  color:  fc6423

仅需要将设置 enable 改为 true，把 #<app_id> 替换为widgetpack.com上生成的ID。

网站效果预览

• 桌面浏览器效果

  
  
  image

• 手机浏览器效果

  
  
  image

投票监控

登录你的网站后，可以监控投票反馈情况，以及对某些投票进行管理，示意如下:

image

Reference

• Hexo上NexT主题配置WidgetPack的Rating widget文章投票功能

如果文章对你有帮助，请为我投票哦！如果有任何疑问，欢迎留言讨论。
If the article helps you, please vote for me. If you have any questions, please do not hesitate to discuss with me!