Hexo 上 Next 主题配置文章投票功能 / How to add the voting function in next theme

Posted on Edited on In Views: Word count in article: 947 Reading time ≈ 3 mins.

[toc]

背景

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

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

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

1
2
3
4
5
6
7
# 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，可以满足个人博客网站的需求。

配置过程

获取 ID

  • 点击 Widgetpack.com 链接注册，可以获得获取用户 ID。
  • 在 “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: 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，或者使用默认的 theme.rating.id, 不需要其他操作。

设置投票方式

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

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

  • Social
  • IP Address
  • Device(Cookie)

Hexo 配置

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

1
2
3
4
rating:
  enable: false
  id:     #<app_id>
  color:  fc6423

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

网站效果预览

  • 桌面浏览器效果

  • 手机浏览器效果

投票监控

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

Reference

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