文章目录
一、Rating简介
有没有在看完文章后,给文章打过评分呢?
评分需要css画出5个五角星;js点击,然后记录评分值并改变星星;
但是刷新界面后,之前的评价就没有了,保存评分的话需要数据库,怎么办?
不会写后台没有关系,widgetpack.com给我们提供了这个接口,非常nice哦!
接下来就是如何给我们的文章加入评分功能的介绍,非常简单。
二、配置
1.申请账户
官网:widgetpack.com,邮箱注册就可。
这里让填写域名。
成功后,会得到一个ID,很重要!后面会用到~
2.配置投票样式
-
作者隐藏菜单栏找到
Rating-》setting
-
设置投票记录方式,有三种可选:
- Social
- IP Address
- Device(Cookie),国内建议采用此种方式
-
设置颜色样式、大小
配置好后,save setting
保存配置! -
获取嵌入式代码(左侧菜单栏:
install
)
哲理拷贝一下:
3.hexo配置
我是sakura主题,其他主题也相似,这是外嵌的样式,均可引用此方法;
不同主题只是配置文件存放路径不同而已。
-
在主题样式中,我是在
themes\sakura\layout\_partial\
目录下:
新建widgetpack.ejs
,将刚才的嵌入代码粘贴进去:<div id="wpac-rating"></div> <!-- <div id="wpac-comment"></div> --> <script type="text/javascript"> wpac_init = window.wpac_init || []; wpac_init.push({widget: 'Comment', id: 23889}); (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">Comments System WIDGET PACK</a>
-
在文章末尾显示位置
themes\sakura\layout\_widget\common-article.ejs
添加引用:<!-- 评分 --> <%if (theme.widgetpack.enable) { %> <%- partial('_partial/widgetpack') %> <% } %>
(我添加在footer前:
<footer class="post-footer">
) -
在主体中设置开启投票:
# widgetpack。将 false 改为 widgetpack 上的 id 则启用该评论系统。 # Star rating support to each article. # To get your ID visit https://widgetpack.com widgetpack: enable: true #false id: 23889 #<app_id> color: fc6423
居中一下:(因为sakura没有设置roting的样式,next和yilia都有,这里就简单居中一下吧。)<!-- 评分 --> <div class="single-reward"> <%if (theme.widgetpack.enable) { %> <%- partial('_partial/widgetpack') %> <% } %> </div>
另外还把
a
标签WIDGET的链接注释了。
完美!收工~效果查看:传送门
4.当然在后台我们能看到是谁点赞哦!
ps. widgetpack.com还有评论功能,界面如下:
emmm,没有我的valine漂漂亮亮,就不采用啦!