How to add rating star to Blog_lelas tar-CSDN博客

本文介绍了如何使用Widget Pack为博客添加评分功能。首先需要注册并获取ID，然后定制星星的颜色和数量。接着将代码添加到博客的特定位置，启用匿名评分，最后保存设置即可预览效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

See orginal article https://dyingdown.github.io/2020/08/11/How-to-add-rating-star-to-Blog/

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.

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.