Hexo上NexT主题配置WidgetPack的Rating w

步骤

NexT主题已默认集成WidgetPack的Rating widget，所以配置过程很简单。

Hexo的NexT主题中匹配值WidgetPack的Rating的步骤如下：

1. 在Widgetpack.com上注册，并获取用户ID。

2. 修改NexT主题配置文件。

3. 在Widgetpack.com账户设置你中意的投票方式。

详细配置过程

Widgetpack.com注册并Add new site成功后生成的Rating Widget安装代码如下：

<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的默认设置如下：

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

将设置改为enable改为true，添加在Widget.com上注册并新建站点后生成的ID，所有工作就完成了。

接下来就：

$ hexo clean
$ hexo g
$ hexo d

设置投票方式

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

• Social

• IP Address

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

配置成功后的终极效果

• 桌面浏览器效果

  
  2019-09-04_16-42-00.png

• 手机浏览器效果

  
  IMG_395.png