本文针对Z-BlogPHP 1.7及以上版本,不需要安装第三方插件,手动添加即可实现同时支持登录用户、游客的文章收藏功能,所有代码可直接复制使用,按照步骤操作即可零门槛落地。
一、添加数据库存储字段
收藏数据需要存储,登录用户的收藏存在数据库,游客的收藏存在浏览器Cookie,我们先给数据库添加对应字段:
- 打开你的数据库管理工具(一般主机面板都带phpMyAdmin),找到你Z-Blog的数据库,前缀一般为
zbp_,如果你的前缀不同,自行替换即可。
- 打开
zbp_user用户表,点击添加字段,填写以下参数:
- 字段名:user_favorites
- 类型:选择TEXT
- 默认值:填写[]
- 排序规则:选择和原表一致,一般为
utf8mb4_general_ci
- 保存字段,数据库配置完成。
二、添加前端按钮与样式
打开当前使用主题的文章模板文件single.html,在你想要显示收藏按钮的位置(一般放在文章标题下方、正文结束后都可以),添加以下HTML代码:
```html
```
接下来打开主题的样式文件style.css,在文件末尾添加以下可直接使用的CSS样式:
```css
.favorite-btn{
padding: 8px 16px;
border: 1px solid e5e5e5;
border-radius: 4px;
background: fff;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 6px;
margin: 16px 0;
}
.favorite-btn.active{
border-color: ff6700;
background: fff7f0;
color: ff6700;
}
.favorite-btn:hover{
border-color: ff6700;
}
.favorite-list ul{
margin: 20px 0;
padding: 0;
list-style: none;
}
.favorite-list li{
padding: 12px 0;
border-bottom: 1px solid f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.favorite-list .date{
color: 999;
font-size: 14px;
}
```
三、添加后端处理逻辑
打开当前主题的functions.php文件,在文件末尾添加以下完整PHP代码:
```php
// 处理文章收藏/取消收藏请求
AddAction('lovezm_favorite', 'lovezm_handle_favorite');
function lovezm_handle_favorite(){
global $zbp, $user;
$aid = (int)get_post('aid');
if($aid <= 0){
die(json_encode(['code'=>400,'msg'=>'参数错误']));
}
// 处理登录用户
if($user->ID > 0){
$favorites = json_decode($user->user_favorites, true) ?: [];
if(in_array($aid, $favorites)){
$favorites = array_diff($favorites, [$aid]);
$msg = '取消收藏成功';
$status = 0;
}else{
$favorites[] = $aid;
$msg = '收藏成功';
$status = 1;
}
$user->user_favorites = json_encode(array_values($favorites));
$user->Save();
die(json_encode(['code'=>200,'msg'=>$msg,'status'=>$status]));
}else{
// 处理游客,存储到Cookie
$favorites = isset($_COOKIE['zbp_favorites']) ? json_decode($_COOKIE['zbp_favorites'], true) : [];
$favorites = is_array($favorites) ? $favorites : [];
if(in_array($aid, $favorites)){
$favorites = array_diff($favorites, [$aid]);
$msg = '取消收藏成功';
$status = 0;
}else{
$favorites[] = $aid;
$msg = '收藏成功';
$status = 1;
}
setcookie('zbp_favorites', json_encode(array_values($favorites)), time() + 360024365, '/');
die(json_encode(['code'=>200,'msg'=>$msg,'status'=>$status]));
}
}
// 给前端文章模板赋值已收藏状态
AddAction('Filter_Content_Assign', 'lovezm_assign_favorite');
function lovezm_assign_favorite(){
global $zbp, $article, $user;
$isFavorited = false;
if($article->ID <= 0) return;
if($user->ID > 0){
$favorites = json_decode($user->user_favorites, true) ?: [];
if(in_array($article->ID, $favorites)){
$isFavorited = true;
}
}else{
if(isset($_COOKIE['zbp_favorites'])){
$favorites = json_decode($_COOKIE['zbp_favorites'], true) ?: [];
if(is_array($favorites) && in_array($article->ID, $favorites)){
$isFavorited = true;
}
}
}
$zbp->template->assign('isFavorited', $isFavorited);
}
```
四、添加前端交互逻辑

打开主题的公共JS文件(一般为script.js,如果没有,也可以放在主题的footer.html末尾),添加以下JS代码:
```javascript
document.addEventListener('DOMContentLoaded', function(){
const favBtn = document.getElementById('favoriteBtn');
if(!favBtn) return;
// 初始化按钮状态
if(favBtn.querySelector('.text').textContent === '已收藏'){
favBtn.classList.add('active');
}
favBtn.addEventListener('click', function(){
const aid = favBtn.dataset.aid;
const xhr = new XMLHttpRequest();
xhr.open('POST', "host;?>zb_system/cmd.php?act=lovezm_favorite", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
const res = JSON.parse(xhr.responseText);
alert(res.msg);
if(res.code === 200){
if(res.status === 1){
favBtn.querySelector('.text').textContent = '已收藏';
favBtn.classList.add('active');
}else{
favBtn.querySelector('.text').textContent = '收藏本文';
favBtn.classList.remove('active');
}
}
}
};
xhr.send('aid=' + aid);
});
});
```
五、添加收藏列表页(可选)
如果你需要给用户提供专属的收藏列表页,可以按照以下步骤操作:
- 在当前主题目录新建文件
favorites.php,粘贴以下代码:
```php
ID <= 0){
$zbp->title = '我的收藏 - 请登录';
include $zbp->template->GetTemplate('header.html');
echo '
请先登录后查看我的收藏
';
include $zbp->template->GetTemplate('footer.html');
exit;
}
$favorites = json_decode($user->user_favorites, true) ?: [];
$favArticles = [];
if(!empty($favorites)){
foreach($favorites as $aid){
$article = new Article();
$article->LoadByID($aid);
if($article->ID > 0 && $article->IsCheck == 1){
$favArticles[] = $article;
}
}
}
$zbp->title = '我的收藏';
include $zbp->template->GetTemplate('header.html');
?>
template->GetTemplate('footer.html');?>
```
- 登录Z-Blog后台,新建页面,右侧模板选择我的收藏,发布页面即可。
六、完成与问题排查
所有操作完成后,登录Z-Blog后台,点击清空缓存,刷新文章页即可测试收藏功能。如果遇到问题,可以按照以下方式排查:
- 按钮不显示:检查single.html中按钮代码是否正确插入,确认模板文件修改后已上传保存。
- 点击按钮无反应:打开浏览器控制台查看网络请求,确认接口地址
zb_system/cmd.php?act=lovezm_favorite可访问,无404错误。
- 刷新后状态丢失:登录用户检查数据库是否正确添加user_favorites字段,游客检查浏览器是否开启了Cookie权限。