Widget Pack

We use Widget Pack to get the function. It’s an powerful widget that has many function. Here we will just use it’s rating function because I thinks valine is more beautiful…

Preview

Here is a preview of the function. The color of the stars can be customized.

Preparation

First Sign Up for an account.

Follow it’s steps. It will let you fill your website address.

After some steps, you will get your ID here:

Click here, you can set how can reader vote for your article.

Select the drop down box to turn on anonymous rating.

And there you can change color of stars and number of stars.

Then click SAVE SETTING.

Add Function

Create a new file called startRating.html or .pug

<center>
<div id="wpac-rating"></div>
</center>
script(type="text/javascript").
    wpac_init = window.wpac_init || [];
    wpac_init.push({widget: 'Rating', id: #{theme.star.id}, color: "#{theme.star.color}"});
    (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);
    })();

But, if you are using it on your website, you can just copy the code he gives you.

Then find the file post.pug. Find the bottom of the article and include the file starRating.pug.

if theme.star.on
    include ... .pug

After that, find your theme _config.yml and type these:

# Rating star function 打星功能
star:
  on: true
  id: 26703 # app id 用户id
  color: fadb14 # color of stars in Hexadecimal 星星的颜色

Save and preview.

Author: o_oyao

Link: http://dyingdown.github.io/2020/08/11/How-to-add-rating-star-to-Blog/

License: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.