此点赞功能适配Hexo博客,适合任何静态网站,只是步骤有所不同,以下是它的特点:
- 免费,此点赞功能使用开发者的好伙伴leancloud存储点赞数据,免费版足够使用
- 简洁,轻轻一点即可完成操作
- 小巧,大小仅24.4kb(图像资源20kb)
- 便捷,Hexo框架的博客仅需3步即可使用!
效果展示:
不仅仅是Hexo,所以静态博客都可以用,只是其他博客需要自己下载代码植入博客,Hexo可以一键安装
你可以到我的博客体验一下点赞功能哦 立即前往
点击上方按钮一键部署后端,然后绑定自定义域(自带的workers.dev在中国大陆访问不稳定)
记好你的Workers地址,然后
适用于Hexo框架,其他框架我没用过
在博客根目录粘贴以下命令一键安装
npm install hexo-blog-like --save
安装好后在博客根目录的_config.yml(不是你主题的_config.yml!)添加以下配置项并填写:
Blog-Like:
enable: true #是否启用插件
Backend: Cloudflare # 或者 Cloudflare | Leancloud | PHP,默认Cloudflare
CloudflareBackend: #你的后端地址
PHPBackend: #自部署PHP后端地址
AppID: #如果你使用Leancloud,记得填你的Leancloud ID和KEY,获取方法在后面
AppKEY: #你的KEY
xianzhi: true #是否限制点赞数,默认开启
number: 5 #如果限制点赞数,限制的点赞数,默认为5个赞
GoogleAnalytics: true #是否向谷歌分析发送点赞事件,默认关闭
GAEventCategory: Engagement #点赞事件类别,默认Engagement
GAEventAction: Like #事件名称,默认Like完事后hexo clean && hexo g && hexo s启动博客,在你想要的显示位置(例如文章末尾)插入如下代码块,打开博客瞅瞅效果吧!
<div id="zan" class="clearfix">
<div class="heart" onclick="goodplus(url, flag)"></div>
<br>
<div id="zan_text"></div>
</div>如果你不想要手动一个个添加,你可以编辑主题的文章模板(通常位于主题/主题名/目录下的layout/_partial/article.ejs或layout/post.ejs文件)里添加此代码段。
我使用的主题是
matery,该主题把代码段放置在layout/_partial/reprint-statement.ejs文件中最前面效果最好,其他主题视情况而定。![]()
对你有帮助的话给我个Starred吧!
部署PHP后端需要有自己的服务器,服务器上应安装PHP环境(我的版本是8.4.13),Mysql数据库。
首先创建一个数据库,记好以下信息:
主机地址通常是 localhost,看你的数据库部署方式,自己找数据库连接地址。
- 数据库主机地址
- 数据库名称
- 数据库用户名
- 数据库密码
初始化数据库:
- 创建 Post 表
CREATE TABLE `Post` (
`Url` varchar(512) NOT NULL COMMENT 'URL',
`VisitCount` int(10) unsigned NOT NULL DEFAULT '0' COMMENT 'PV',
`VisitorCount` int(10) unsigned NOT NULL DEFAULT '0' COMMENT 'UV',
`CreatedAt` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
`UpdatedAt` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`Url`),
UNIQUE KEY `url_unique` (`Url`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='页面访问数据';
- 创建 Site 表
CREATE TABLE `Site` (
`Domain` varchar(255) NOT NULL COMMENT 'Domain',
`VisitCount` int(10) unsigned NOT NULL DEFAULT '0' COMMENT 'PV',
`VisitorCount` int(10) unsigned NOT NULL DEFAULT '0' COMMENT 'UV',
`CreatedAt` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
`UpdatedAt` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`Domain`),
UNIQUE KEY `domain_unique` (`Domain`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='站点访问数据';
- 创建 Likes 表
CREATE TABLE `Likes` (
`Url` varchar(512) NOT NULL COMMENT 'URL',
`Likes` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '点赞数',
`CreatedAt` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
`UpdatedAt` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`Url`),
UNIQUE KEY `url_unique` (`Url`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='点赞数据';
Post表是记录文章访问量统计数据的,Site表是记录站点访问量统计数据的(此PHP后端是二合一的,包含访问量统计+点赞后端两个功能,若不需要访问量统计Post、Site表可以不创建)
下载index.php,用文本编辑器打开,修改配置项、CORS跨域、默认跨域。
此PHP还有访问量统计后端功能,点赞后端只是一部分
/* ======================== 配置 ======================== */
define('DB_HOST', 'HOST'); // 数据库主机地址
define('DB_NAME', 'DbName'); // 数据库名称
define('DB_USER', 'DbUser'); // 数据库用户名
define('DB_PASS', 'Password'); // 数据库密码
// 允许的域名
$ALLOW_DOMAINS = [
'example.com', // 可添加多个,用逗号分隔
'example.example.com',
];
/* ======================== CORS 处理 ======================== */
$origin = $_SERVER['HTTP_ORIGIN'] ?? '';
$allow = false;
foreach ($ALLOW_DOMAINS as $dom) {
if (preg_match("~^https://([a-z0-9-]+\.)?$dom$~i", $origin)) {
$allow = true;
break;
}
}
if ($allow) {
header("Access-Control-Allow-Origin: $origin");
} else {
header("Access-Control-Allow-Origin: https://example.com"); // 默认允许的域名,自己修改
}
填写好后部署网站,记下PHP网站运行地址,/like是点赞后端路由地址/visitor-count是访问量统计地址。
然后:安装配置插件
下面开始部署教程,你需要有一个leancloud账号,没有的话就注册一个,只需要邮箱即可注册,无需绑定信用卡之类的,注册即用(中国大陆版要备案,可以使用国际版,备案要支付宝刷脸)。
在开始之前,你需要获取AppID和AppKEY这两个凭证:
注册好leancloud账号后进入控制台,点击创建应用,计费计划选择开发版,应用名称、描述随便填,
创建好后进入应用设置→点击应用凭证,将AppID和AppKey复制下来待会要用
然后打开数据存储→结构化数据,创建一个名为Zan的Class。
leancloud有中国版和国际版,国际版无需备案,完成上述步骤即可使用,中国版需要多一个步骤****绑定API域名,在设置→域名绑定里。(根据服务条款域名好像要备案)
获取好凭证后按照安装配置插件的步骤安装即可
- 此脚本目前没有限制点赞次数,同一个访客可以不停的搓点赞次数,搓个上万次不成问题,未来打算加入一个开关选择是否限制单访客点赞次数,若打开则通过Cookie记录限制只能点一次赞或几次。
- 制作成Hexo插件,可以一键安装使用
- 制作多种样式以供选择
- 支持多种存储方式
- 长期接收意见以及维护
v3.0.0 (2025.12.03)
不再使用URL传参,改为Post JSON,避免爬虫扫接口,添加新的存储PHP 注意,v2. 升级到v3. 需要更新后端!**
v2.2.2 (2025.5.28)
添加了谷歌分析发送事件功能,能够在谷歌分析里查看统计数据
v2.2.1 (2025.5.17)
添加了速率限制提示,现在你们可以用Cloudflare速率限制规则了
v2.2.0 (2025.4.20)
增加了Cloudflare存储点赞数据方式
v2.1.2 (2025.2.06)
修复了运行报错。
v2.1.1 (2025.1.23)
添加了中国版leancloud适配
v2.1.0 (2025.1.16)
修复了多个页面只能点五个赞,新版本把不同URL分开计算
v2.0.0 (2025.1.15)
发布npm包,可以在Hexo博客中一键安装咯!
v1.1.0 (2025.1.15)
增加了点赞次数限制,使用Cookie记录点赞次数,优化了代码逻辑
v1.0.0 (2025.1.14)
博客点赞插件横空出世





