当前位置:网站首页 >  攻略

Z-BlogPHP个人博客手动添加文章收藏功能零门槛实操全指南

时间:2026年05月28日 10:38:33 来源:易频IT社区

本文针对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); } ```

四、添加前端交互逻辑

Z-BlogPHP个人博客手动添加文章收藏功能零门槛实操全指南

打开主题的公共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); }); }); ```

五、添加收藏列表页(可选)

如果你需要给用户提供专属的收藏列表页,可以按照以下步骤操作:

  1. 在当前主题目录新建文件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');?> ```
  1. 登录Z-Blog后台,新建页面,右侧模板选择我的收藏,发布页面即可。

六、完成与问题排查

所有操作完成后,登录Z-Blog后台,点击清空缓存,刷新文章页即可测试收藏功能。如果遇到问题,可以按照以下方式排查:

  • 按钮不显示:检查single.html中按钮代码是否正确插入,确认模板文件修改后已上传保存。
  • 点击按钮无反应:打开浏览器控制台查看网络请求,确认接口地址zb_system/cmd.php?act=lovezm_favorite可访问,无404错误。
  • 刷新后状态丢失:登录用户检查数据库是否正确添加user_favorites字段,游客检查浏览器是否开启了Cookie权限。

相关推荐

最新

热门

推荐

精选

标签

易频IT社区是综合性互联网IT技术门户网站,专注分享网络技术、服务器运维、网络安全、编程开发、系统架构、云计算、大数据等行业干货,实时更新IT行业资讯、零基础教程、实战案例,为IT从业者、技术爱好者提供专业的学习交流平台。

Copyright © 2021-2026 易频IT社区. All Rights Reserved. 备案号:闽ICP备2023013482号 网站地图