Hexo上NexT主题五星评价StarRating的实现

发表于 | 分类于 | |

步骤

Hexo上NexT主题已默认集成WidgetPack的Rating widget文章投票功能，所以配置过程很简单，其步骤如下：

  1. 在widgetpack.com上注册，并获取用户ID。
  2. 修改NexT主题配置文件。
  3. 登录widgetpack.com，设置投票方式。

详细配置过程

在widgetpack.com上注册，Add new site成功后，后台自动生成的Rating Widget安装代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="wpac-rating"></div>
<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: *****});  #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>

NexT已经默认集成了WidgetPack的Ratingwidget：

  • 只要查看主题配置文件_config.yml中的rating字段就可见相关默认配置。
  • 而以上安装代码已默认集成到~/hexo/themes/next/layout/_third-party/rating.swig文件中。
  • 所以，要启用Ratingwidget，只需要在widgetpack.com注册添加站点并获得ID后，修改NexT主题配置文件rating字段内容即可。

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

1
2
3
4
5
6
# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: false
  id:     #<app_id>
  color:  fc6423

将enable改为true，添加在widgetpack.com上注册获取的ID，所有工作就完成了。

接下来就：

1
2
3
$ hexo clean
$ hexo g
$ hexo d

设置投票方式

Rating的投票方式在widgetpack.com上设置即可，有三种方式可选：

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

配置成功后的终极效果

  • 桌面浏览器效果
  • 手机浏览器效果

~END~