如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Topic Tabs 专题选项卡装修模块
概述
Topic Tabs 是一个为商城后台「设计 → 装修」功能增加专题选项卡展示模块的插件。你可以添加多个「分组」（每个分组为一个选项卡），每个分组通过「专题多选」挑选若干「专题」（即文章分类）。前台以选项卡形式展示——顶部是各分组的标题导航，切换选项卡即可展示对应分组下的专题卡片。每张卡片包含封面图、标题、简短描述和「Read More」链接，点击跳转到该专题（文章分类）页。非常适合用于首页资讯聚合、博客分类导航、品牌故事展示等场景。
主要功能
🏷️ 选项卡式专题展示
| 特性 | 说明 |
|---|---|
| 多分组支持 | 可创建多个选项卡分组，每个分组独立配置专题集合 |
| 专题多选 | 弹窗式专题多选器，支持搜索和批量选择文章分类 |
| 专题卡片 | 每张卡片含封面图、标题、简短描述和「Read More」链接 |
| 两种切换方式 | 支持鼠标移动悬停切换 / 点击切换 |
🖼️ 专题卡片特性
| 特性 | 说明 |
|---|---|
| 封面图片 | 自动取该文章分类下最新一篇启用文章的封面图（可选显示/隐藏） |
| 图片边距 | 可设置封面图四周留白（0~40px），留白处显示图片背景颜色 |
| 图片背景色 | 可自定义图片区域背景色（支持透明度） |
| 简短描述 | 显示文章分类的摘要描述（可选显示/隐藏） |
| 标题与链接 | 点击标题或「Read More」跳转到该文章分类页 |
| 阅读全文文案 | 可自定义「Read More」按钮文字 |
📐 丰富的配置选项
| 配置项 | 说明 |
|---|---|
| 标题 | 模块主标题（支持多语言） |
| 简短描述 | 模块描述文字（支持富文本） |
| 显示封面图片 | 开关控制是否显示专题封面图 |
| 图片边距 | 封面图四周留白（0~40px） |
| 图片背景颜色 | 自定义图片区域背景色 |
| 显示简短描述 | 开关控制是否显示摘要 |
| 文字对齐方式 | 左对齐 / 居中 / 右对齐 |
| PC端每排数量 | 可设置 2~6 列 |
| 移动端每排数量 | 可设置 1~3 列 |
| 阅读全文文案 | 自定义按钮文字（支持多语言） |
| 专题切换方式 | 鼠标移动 / 点击 |
| 模块宽度 | 窄屏(container) / 宽屏(container-fluid) / 全屏(w-100) |
📋 分组（选项卡）管理
| 特性 | 说明 |
|---|---|
| 拖拽排序 | 选项卡分组支持拖拽调整顺序 |
| 分组标题 | 每个分组可独立设置选项卡标题（支持多语言） |
| 专题多选器 | 弹窗式专题选择器，支持搜索和批量选择 |
| 已选专题管理 | 已选专题以标签形式展示，支持单个移除 |
| 自动解析 | 自动拉取专题封面图、标题和跳转链接 |
技术特点
-
✅ 选项卡切换流畅：支持鼠标悬停和点击两种切换模式，切换时有淡入动画
-
✅ 封面图智能获取：自动取该文章分类下最新一篇启用文章的封面图
-
✅ 响应式网格：PC 端 2~6 列，移动端 1~3 列，自动适配
-
✅ 图片边距与背景色：封面图四周留白可调，留白处显示自定义背景色
-
✅ 多选器友好：弹窗式专题选择器，支持搜索和批量选择
-
✅ 预览模式友好：装修预览时自动显示占位卡片，所见即所得
-
✅ 拖拽排序：选项卡分组支持拖拽调整顺序
-
✅ 任意主题兼容：前台视图由插件自带，样式使用 CSS 变量适配主题
-
✅ 装修编辑器完美支持：实时预览，分组和专题配置直观易用
适用场景
-
首页资讯/博客分类导航（科技/时尚/生活/美食）
-
品牌故事专区（品牌历程/文化/荣誉）
-
帮助中心分类入口（使用指南/常见问题/售后政策）
-
活动专题聚合（限时活动/节日专题/促销专题）
-
内容营销展示区
