特点介绍
此点赞功能适配Hexo博客,适合任何静态网站,只是步骤有所不同,以下是它的特点:
- 免费,此点赞功能使用开发者的好伙伴leancloud存储点赞数据,免费版足够使用
- 简洁,轻轻一点即可完成操作
- 小巧,大小仅24.4kb(图像资源20kb)
效果展示:
GitHub地址:https://github.com/2010HCY/Blog-Like
部署教程
下面开始部署教程,你需要提前注册好leancloud账号,只需要邮箱即可注册,无需绑定信用卡之类的,注册即用(中国大陆版要备案)。
1.下载文件
下载后解压,得到三个文件zan.css、zan.js、zan.png
注册好leancloud账号后进入控制台,点击创建应用,计费计划选择开发版,应用名称、描述随便填,

创建好后进入应用设置→点击应用凭证,将AppID和AppKey复制下来待会要用

然后打开数据存储→结构化数据,创建一个名为Zan的Class。

3.将JS、CSS放入博客
不同博客框架、主题路径可能有些许差别,但大体步骤是一样的。我的主题是matery
打开你的博客根目录,依次打开themes→hexo-theme-matery→source,在此目录下有JS和CSS两个文件夹,把zan.css扔进CSS目录,zan.js扔进JS目录,图片你可以放进图床或直接放在博客主题的source目录下,这样做是为了方便分类。
文件放好后还需要配置一下,打开zan.js,将第2、3行的ID、KEY修改成前面获取的AppID AppKey。

如果你按前面把图片放主题文件夹下的source文件夹,就跳过这行字,如果你把图片放图床了,那记得修改zan.css第45行改成你的图床链接。

引入JS、CSS
打开你的博客head模板,通常在themes/[你的主题]/layout/_partial/head.ejs
路径下,在最后几行</head>
标签前添加以下代码:
<link rel="stylesheet" href="/css/zan.css">
<script src="https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
<script src="/js/zan.js"></script>

完事保存退出,现在你已经完成了所有配置,最后只需要在文章内引用就可以啦
将点赞卡片插入到文章内
在你希望的位置插入如下代码片段,然后可以开耍喽!
<div id="zan" class="clearfix">
<div class="heart" onclick="goodplus(url, flag)"></div>
<br>
<div id="zan_text"></div>
</div>

未来打算
此脚本目前没有限制点赞次数,同一个访客可以不停的搓点赞次数,搓个上万次不成问题,未来打算加入一个开关选择是否限制单访客点赞次数,若打开则通过Cookie记录限制只能点一次赞或几次。
版本更新记录
1.0版本横空出世 2025.1.14