加载中...

Hexo博客加入点赞功能


特点介绍

此点赞功能适配Hexo博客,适合任何静态网站,只是步骤有所不同,以下是它的特点:

  1. 免费,此点赞功能使用开发者的好伙伴leancloud存储点赞数据,免费版足够使用
  2. 简洁,轻轻一点即可完成操作
  3. 小巧,大小仅24.4kb(图像资源20kb)

效果展示:


GitHub地址:https://github.com/2010HCY/Blog-Like

部署教程

下面开始部署教程,你需要提前注册好leancloud账号,只需要邮箱即可注册,无需绑定信用卡之类的,注册即用(中国大陆版要备案)。

1.下载文件

首先下载此压缩包,你也可以到Releases下载最新版本。

下载后解压,得到三个文件zan.css、zan.js、zan.png

注册好leancloud账号后进入控制台,点击创建应用,计费计划选择开发版,应用名称、描述随便填,

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

然后打开数据存储→结构化数据,创建一个名为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



文章作者: Ethaniel
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Ethaniel !
  目录