ORIGIN

How to add rating star to Blog

Blog 1 mins310 words

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.

Rating preview

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.
aOt9zj.png
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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.

1
2
if theme.star.on
include ... .pug

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

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

Save and preview.

TOP
COMMENT
  • ABOUT
  • |
o_oyao
  The Jigsaw puzzle is incomplete with even one missing piece. And I want to be the last piece to make the puzzle complete.
Like my post?
Default QR Code
made with ❤️ by o_oyao
©o_oyao 2019-2024

|