3D动态彩色标签云
- ID: colorful_tags_3d
- 版本: 1.0.8
- 系统要求: Z-BlogPHP 1.7.5 Optimus以上
- 更新日期: 2026-06-24 14:10:02
- PHP版本: 7.0或更高
- 大小: 937KB
3D 动态彩色标签云
这是一款为 Z-BlogPHP 侧边栏打造的高颜值标签云插件。它能把原本枯燥单调的纯文字标签,一键转化为立体感十足的 3D 动态旋转球,或者色彩柔和的流式彩色气泡。插件生成的挂件前台采用纯静态输出,速度极快,不占用额外的服务器运行开销,是博客美化排版的不二之选。
使用步骤
启用插件:在 Z-Blog 后台「插件管理」中激活本插件。
参数设置:进入插件配置页,选择展现模式(3D 旋转球体或流式彩色气泡),并设置字号范围和配色方案。
模块挂载:在后台「模块管理」页面,将生成的「3D动态彩色标签云」挂件拖拽入所需的侧边栏位置。
查看效果:清理博客前台缓存并刷新页面,即可查看渲染效果。
核心配置项解析说明
所有配置参数解析
| 配置项名称 | 默认预设与范围 | 核心作用与工作原理 |
|---|---|---|
| 展现模式 (DisplayMode) | 3D 旋转球体 (3d_sphere) | 主导呈现形式。3D 旋转球体 (3d_sphere) 利用 CSS 3D 转换呈现斐波那契球面标签并支持鼠标磁性交互;流式彩色气泡 (color_badges) 呈现排列错落的横向流式 Badge 样式。 |
| 展示标签上限 (TagLimit) | 30 个 (限制范围 5 - 100) | 限制前台输出的最大标签数量,以防止标签过多拉长网页整体布局,或防止在 3D 旋转球体中产生文字密集重叠。 |
| 检索排序规则 (SortOrder) | 文章计数降序 (count) | 选择加载的标签排列依据。count 按文章数降序(热门优先),id 按标签新增顺序(最新优先),rand 在编译时打散排序(每次重构随机展示,利于长尾词曝光)。 |
| 最冷字号 (MinFontSize) | 12px (限制范围 8 - 30) | 文章关联数最少(最不热门)的标签在页面中所展现的字体像素大小。 |
| 最热字号 (MaxFontSize) | 22px (限制范围 12 - 40) | 文章关联数最多(最热门)的标签在页面中所展现的字体像素大小,介于两者之间的标签通过算法进行线性插值处理。 |
| 球体自转速度 (SphereSpeed) | 中速 (middle) | 3D球体模式下,在没有鼠标交互时球体自身的基础物理角速度。包含:slow(缓慢)、middle(中速)、fast(快速)。 |
| 滚球半径占比 (SphereRadiusRatio) | 75% (限制范围 30% - 95%) | 控制 3D 球体最大物理投影半径在侧栏挂件本身宽度中的百分比。越大则球体展示越撑满,通常 70%-80% 视觉效果最自然。 |
| 3D 标签颜色模式 (TextColorMode) | 随机彩色 (colorful) | 在 3D 球体中,可选随机彩色(colorful)利用标签ID散列生成固定色彩的高对比前景色,或统一文字色(custom)采用下方自定义的文字色。 |
| 3D 标签气泡材质 (SphereTagBg) | 浅色毛玻璃气泡 (glass_light) | 为 3D 旋转球体中的文字加入一层底色材质。包括:浅色毛玻璃、深色毛玻璃、跟随色彩策略气泡、传统纯文字无底色。可以有效避免浅色文字在白色背景下的反光看不清问题。 |
| 气泡整体形状 (BadgeShape) | 圆角胶囊 (capsule) | 在流式彩色气泡模式下标签外壳的轮廓。可选:圆角胶囊气泡 (capsule,圆角30px)、微小圆角矩形气泡 (rect,圆角4px)、纯文字排布。 |
| 气泡背景色策略 (BadgeBgStyle) | 马卡龙随机分配 (macaron) | 决定流式气泡的背景配色组合。可选马卡龙随机配色方案、基于标签ID的一对一渐变柔和色、或纯透明前景色细线条描边。 |
| 博客主题自适应 (BgType) | 开启自适应 (theme) | 开启后,插件将不会输出自定义的外壳背景,从而直接集成继承您博客所使用的主题自带的侧栏外框底色与圆角阴影。若要自定义,请设为关闭。 |
| 上内边距 (PaddingTop) | 16px | (关闭自适应时生效) 自定义外壳卡片内部,内容顶端与卡片上边缘的物理留白高度。 |
| 右内边距 (PaddingRight) | 16px | (关闭自适应时生效) 自定义外壳卡片内部,内容右端与卡片右边缘的物理留白宽度。 |
| 下内边距 (PaddingBottom) | 16px | (关闭自适应时生效) 自定义外壳卡片内部,内容底端与卡片下边缘的物理留白高度。 |
| 左内边距 (PaddingLeft) | 16px | (关闭自适应时生效) 自定义外壳卡片内部,内容左端与卡片左边缘的物理留白宽度。 |
| 上外边距 (MarginTop) | 12px | (关闭自适应时生效) 自定义挂件卡片上边缘与外部其他侧栏挂件下边缘的间隙物理距离。 |
| 右外边距 (MarginRight) | 0px | (关闭自适应时生效) 自定义挂件卡片右边缘与侧边栏容器右边缘的定位对齐微调间隙。 |
| 下外边距 (MarginBottom) | 12px | (关闭自适应时生效) 自定义挂件卡片下边缘与下方其他侧栏挂件上边缘的间隙物理距离。 |
| 左外边距 (MarginLeft) | 0px | (关闭自适应时生效) 自定义挂件卡片左边缘与侧边栏容器左边缘的定位对齐微调间隙。 |
| 左上圆角 (RadiusTL) | 8px | (关闭自适应时生效) 控制挂件自定义物理背景背景卡片左上角的圆角弧度半径。 |
| 右上圆角 (RadiusTR) | 8px | (关闭自适应时生效) 控制挂件自定义物理背景背景卡片右上角的圆角弧度半径。 |
| 右下圆角 (RadiusBR) | 8px | (关闭自适应时生效) 控制挂件自定义物理背景背景卡片右下角的圆角弧度半径。 |
| 左下圆角 (RadiusBL) | 8px | (关闭自适应时生效) 控制挂件自定义物理背景背景卡片左下角的圆角弧度半径。 |
| 自定义背景色 (BgColor) | #ffffff | (关闭自适应时生效) 挂件外壳卡片的整体背景色。建议选择与网页主题搭配的柔和底色。 |
| 自定义文字色 (TextColor) | #1e293b | (关闭自适应时生效) 控制非随机彩色模式下的标签初始文字颜色,以及可能产生的挂件内部非标签辅助说明文字颜色。 |
| 自定义强调色 (AccentColor) | #3182ce | (关闭自适应时生效) 控制描边状态气泡的线条轮廓和高亮状态色彩。 |
排版美化与常见问题提示
如何融入已有的网站主题?
如果发现保存配置后,标签云的两侧宽度不对,或者边框与原主题不一致,建议把设置里的「自适应博客主题」设置为「开启自适应」。有些浅色文字在白色背景下看不清怎么办?
在使用3D旋转球体时,强烈建议把「3D标签背景气泡」设置为「浅色毛玻璃气泡」。它会在文字后面加一层淡淡的半透明底色,既能保护文字清晰可见,又显得非常有立体感。每次保存配置后,前台网页没有变化?
插件在您点击保存时会自动生成最新的静态文件。如果网页没有立即更新,请进入 Z-Blog 后台首页,点击右上角的「清空缓存并重新编译模板」按钮,并刷新浏览器页面即可。
3D动态彩色标签云 v1.0.0 · by Yojack · PHP 7.0+ · Z-BlogPHP 1.7+
访客您好,Z-Blog相关网站已开启实名制,请登录后绑定您的手机,再发表评论,谢谢您的支持。
ZBLOG应用中心-软件购买及使用协议
1. 您在购买应用软件前,须要先确认该应用软件是否符合您的使用需求。依据《消费者权益保护法》第二十五条规定,该软件为在线下载的数字化商品,在购买后一经下载安装不能退款。
2. 您在应用中心购买的软件,仅是该软件的许可使用权。除软件外应用中心不提供任何形式的有偿提供信息或网页制作、服务器空间租用等服务。
3. 一个软件仅可用于单一账号使用,未经本站同意,不得二次发布、赠送、转售、租让、盗版等,否则我们将永久关闭用户账号并保留继续追究相关责任的权利。
4. 本应用为通用型产品,除解决BUG外不提供个人定制和其它修改服务。
5. 您使用软件中所存在的风险,完全由用户自己承担,包括系统受损、资料丢失以及其它任何风险。
6. 用户不得利用该软件以任何方式从事违反法律法规及社会公序良俗的行为,用户须对其不当使用行为可能带来的后果负全部法律责任,本站不承担任何责任。
7. 如发现用户将软件用于黄赌毒诈等非法用途,将停止用户相关的使用权,并将用户相关违法信息上报至网络监管部门。
购买指南
1. 请先注册账号,然后登录“应用中心”。
2. 直接点击“购买应用”,跟随指引即可。
下载指南
1. 购买者在自己的Z-Blog网站登录,进入后台,在左侧菜单栏点击“应用中心”菜单。
2. 在“应用中心”的首页,使用应用中心注册账号进行登录。
3. 进入“我的应用仓库”,即可看到已购买成功的应用,点击“下载”即可下载安装。
其它注意事项
1. 如果通过自己网站后台无法正常访问应用中心,请谨慎购买,因为这将可能导致应用无法顺利下载安装。
2. 如已购买收费应用无法正常下载,请在自己网站后台检查Z-Blog及应用更新,如均已更新至最新版本仍无法下载请及时与我们联系。
3. 应用更新时有可能覆盖本地设置,请在更新前做好备份。