# 子比 - Dahai 原创拓展插件 v5.7

子比主题Dahai原创拓展插件v5.7，为Zibll主题提供文章页Tab导航、资源框架美化、更新日志、催更系统、小红书瀑布流卡片及分类封面增强等功能，采用原生CSF框架开发，适配PC与移动端。

> 纯原创框架，不开源，无授权，已加密。可以在tab栏进行浏览更新日志。

## 项目介绍

插件在使用中拓展了大量适配的文章字段，让你的项目更新内容更加丰富。

这个卡片本来是单个美化，最后做成了一个extra 插件（新做的这个文章框架，对标的是 [https://bbsmc.net/](https://bbsmc.net/) 这个`“我的世界”网站`做的文章板块，后续可能会补充火车头采集的发布模块）

> 出一个域名（走阿里云）mcmod.cc

![图片](/uploads/2026-08/1787370874408-153-wc0n.png)

![图片](/uploads/2026-08/1787370874586-154-sy3dpb.png)

```
视觉效果

 - 悬停动画：卡片上浮、蓝色发光边框、渐变背景叠加
 - 图片缩放：悬停时图片轻微放大（1.03x）
 - 响应式设计：自适应桌面端和移动端，支持暗色模式
 - 智能徽章系统

缩略图区域：

 - 左上角：分类标签（悬停显示，红色渐变）
 - 右上角：NEW 标签（3天内新文章）+ 收藏按钮（悬停切换）

右侧彩带徽章（自动识别）：

🔵 付费 | 🔴 积分 | 🟡 VIP | 🟢 免费
💜 评论可见（可点击） | 💜 登录可见（可点击）
```

## 更新日志

- 修复商城卡片影响
- 修复个人主页的卡片显示

Zibll 单行文章列表上浮效果导致上边不显示，使用下面的css修复

```
.theme-box .swiper-container.swiper-scroll[data-slideClass="posts-item"] .posts-item.card:hover {
    transform: none !important;
}
```

## 新版本更新内容

首页卡片美化：增加了两个版本（在后台切换）

![ScreenShot_2026-03-21_002928_876.png](/uploads/2026-08/1787370874755-155-57b20dbeb49ef.png)

![ScreenShot_2026-03-21_002946_095.png](/uploads/2026-08/1787370874838-156-ca400f0f2f801.png)

## 最大更新：内容页面超多配置框架

- 新增资源图标（我准备用来做我的世界整合包网站的，也适合做软件站）
- 二维码手机扫码
- 新新增Tab多板块，评论框架塞入 Tab 页面
- 渲染图做了瀑布流处理

![ScreenShot_2026-03-21_003107_736.png](/uploads/2026-08/1787370874957-157-0b8b2b9a1d2d7.png)

### 完整的交互演示

![图片](https://img.lzzcc.cn/i/2026/03/21/4b85d52bee52b.gif)

![ScreenShot_2026-03-21_003700_381.png](/uploads/2026-08/1787370875129-159-c114903e60273.png)

## 分类页导航框架

参考的是优设网，不过我觉的不行，下个版本再考虑

![ScreenShot_2026-03-21_003426_876.png](/uploads/2026-08/1787370875264-160-b88d0c00379c6.png)

## 插件+文章后台

使用子比主题原生的CSF框架，仅作拓展。

![ScreenShot_2026-03-21_003540_018.png](/uploads/2026-08/1787370875396-161-9b7ea0c69310a.png)

![ScreenShot_2026-03-21_003549_385.png](/uploads/2026-08/1787370875478-162-3933802246bbf.png)

![ScreenShot_2026-03-21_003606_273.png](/uploads/2026-08/1787370875570-163-0965873cad199.png)

![ScreenShot_2026-03-21_003615_078.png](/uploads/2026-08/1787370875645-164-d3aab4cad934b.png)

### 一、小红书卡片布局

将列表页改造为小红书风格的瀑布流卡片布局，支持弹窗预览文章内容。

- 瀑布流布局：支持 2-5 列自适应，可按首页/分类页/标签页分别配置列数
- 弹窗预览：点击卡片弹出沉浸式阅读弹窗，支持图片轮播、评论列表、实时评论
- 切换动画：弹窗内左右切换文章，支持滑动/淡入两种动画效果
- 互动功能：弹窗内集成点赞、收藏、分享按钮，分享按钮 hover 显示付费信息 tooltip
- 指定分类：可限定仅特定分类使用卡片布局
- 深度适配：调用子比主题原生的点赞、收藏、头像等函数，保持风格统一

### 二、文章页增强

#### 2.1 Tab导航

在文章页面包屑下方显示 Tab 导航菜单，支持 5 个 Tab 页：

Tab

功能

文章

文章正文内容

讨论

评论区（支持角标显示评论数）

更新日志

版本更新记录（支持折叠/展开）

下载历史

付费资源的下载记录

渲染图

图片展示区域

- 每个 Tab 可自定义文字和图标
- 支持配置哪些 Tab 显示角标（数量提示）

#### 2.2 资源框架美化

重新设计子比主题的付费资源展示框架：

- 顶部封面图 + 二维码 + 浏览量/评论数统计
- 资源图标 + 标题 + 描述信息
- 分类标签 + 文章标签 + 演示地址按钮
- 底部操作栏：收藏、点赞、分享、催更按钮
- 下载按钮区：支持多下载地址换行、提取密码按钮
- 客户服务标签：读取子比全局配置，支持靠左/居中/靠右三种对齐
- 资源属性列表：读取文章付费 meta，逐行展示属性键值对
- 所有模块均可通过后台开关独立控制

#### 2.3 更新日志

在文章编辑器中添加更新日志 meta box：

- 支持多条日志记录，每条包含版本号、日期、内容
- 前台支持折叠/展开显示
- 可配置默认展开或收起状态

#### 2.4 模块显示控制

- 隐藏文章后模块（一言、作者卡片、上下篇、相关文章等）
- 评论区 hover 显示（默认隐藏，鼠标悬停时展开）

#### 2.5 文章催更

用户催促作者更新文章的互动功能：

**核心功能：**

- 文章操作栏催更按钮（SVG 图标，上下布局，与子比原生按钮风格一致）
- 资源框架内催更按钮
- 催更弹窗：子比 Bootstrap Modal + 炫彩头部 + Tab 切换（提交催更/催更列表）
- 催更列表：按用户聚合，显示头像、用户名、催更次数、最后催更时间
- 提交催更 + 取消催更（催更后才显示取消按钮）
- 移动端适配：弹窗从底部滑入（Bottom Sheet），最大高度 80vh

**通知系统：**

- 站内消息通知作者（调用子比 ZibMsg）
- 邮件通知作者（调用子比 zib_send_email）
- 丰富的消息模板：文章名、催更次数、用户名、留言内容（灰色背景框）
- 文章更新后自动通知所有催更用户，并清空催更列表

**联动功能：**

- 催更后自动关注文章作者（写入子比 option_meta，更新粉丝计数缓存）
- 评论区催更角标（催更用户的评论显示黄色"催更"标识）
- 触发 `do_action('urge-update', $post_id, $count, $user_id)` 钩子

**小工具 — 催更站长：**

- 使用子比 `Zib_CFSwidget` 注册，支持自定义标题和描述
- 内联显示表单 + Tab 切换（提交催更/催更列表）
- 状态标签：未催更显示红色"立即催更"，已催更显示蓝色"催更中"

**后台配置（8+ 项）：**

- 启用开关、仅登录用户、留言必填
- 显示控制：操作栏按钮、资源框架按钮、评论角标、自动关注
- 通知设置：站内消息、邮件通知
- 频率限制：单篇间隔（1-720小时）、每日上限（1-50篇）
- 数据管理：一键清理全部催更数据

### 三、列表页增强

#### 3.1 资源卡片

将首页/归档页的卡片布局改为资源框架风格：

- V1 版本：经典资源卡片
- V2 版本：增强资源卡片
- 支持配置卡片样式版本

### 四、分类页增强

#### 4.1 分类封面美化

为分类页添加视觉丰富的封面区域：

- 左侧：分类图标 + 名称 + 描述 + 文章数量
- 右侧：分类封面图
- 底部导航：子分类菜单（flex-wrap 换行布局）
- 子菜单：hover 展开子分类列表（PC端），手机端隐藏子菜单和箭头
- 多种背景风格可选

#### 4.2 分类导航

分类页面的导航增强配置

## 更新日志

![ScreenShot_2026-03-23_224254_683.png](/uploads/2026-08/1787370875695-165-bf2daf8b88888.png)

![ScreenShot_2026-04-15_145853_207](/uploads/2026-08/1787370875806-166-pshw6c.png)

![ScreenShot_2026-04-15_150241_502](/uploads/2026-08/1787370875902-167-pshvn2.png)

![ScreenShot_2026-04-15_150252_159](https://img.lzzcc.cn/i/2026/04/15/pshsat.png)