加截中...

PbootCMS 模板幻灯片调用代码


PbootCMS 模板幻灯片调用代码

一、功能需求

在 PbootCMS 模板开发中,需高效调用幻灯片(轮播图) 并实现以下效果:


  • 按分组(gid)精准调用指定幻灯片;

  • 自定义显示数量(num),适配不同布局(如首页大图、侧边小图);

  • 支持图片、链接、标题等多字段关联,满足复杂场景(如 Banner 图 + 跳转链接);

  • 兼容前端轮播插件(如 Swiper.js),实现自动轮播、懒加载等交互效果。

二、核心标签与参数解析

PbootCMS 通过 {pboot:slide} 标签调用幻灯片,支持多参数组合控制输出,关键参数及字段说明如下:


标签 / 字段作用说明示例值
{pboot:slide}幻灯片调用主标签,需配合参数使用-
gid=*分组标识(必填),对应后台 “幻灯片管理” 的分组 IDgid=1(调用 ID 为 1 的分组)
num=*显示数量(非必填),默认显示 5 条,可自定义(如num=10num=8(显示 8 张幻灯片)
[slide:id]幻灯片 ID(用于唯一标识)123
[slide:src]图片地址(后台上传的幻灯片原图)/uploads/slide/1.jpg
[slide:link]跳转链接(后台设置的幻灯片链接)https://www.example.com
[slide:title]图片标题(后台填写的幻灯片标题)首页轮播图
[slide:subtitle]图片副标题(后台填写的幻灯片副标题)2024新品首发
[slide:n]序号(从 0 开始),用于控制轮播顺序0(第一张)
[slide:i]序号(从 1 开始),用于计数或分页1(第一张)


三、基础调用示例(纯静态输出)

以下为最简单的幻灯片调用代码,直接输出图片 + 链接,适用于基础场景:

{pboot:slide gid=1 num=5}
    <a href="[slide:link]" target="_blank">
        <img src="[slide:src]" alt="[slide:title]">
    </a>
{/pboot:slide}


代码解析

  • gid=1:调用后台 “分组 ID 为 1” 的幻灯片(需提前在后台→幻灯片管理中创建分组并上传图片)。

  • num=5:限制显示 5 张幻灯片(若分组内不足 5 张,则显示实际数量)。

  • [slide:link] + [slide:src]:分别输出图片链接和图片地址,实现 “点击图片跳转” 功能。


四、注意事项

  1. 分组 ID 一致性:后台 “幻灯片管理” 中创建的分组 ID 需与代码中gid严格一致,否则无法调用。

  2. 图片尺寸统一性:上传幻灯片时建议统一尺寸(如 1920×600px),避免前端显示变形。

  3. 链接有效性:后台设置的幻灯片链接需验证有效性,避免 404 错误。

  4. 缓存问题:若修改幻灯片后前端无变化,需清理 PbootCMS 缓存(后台→系统设置→缓存设置)。



在线客服
服务热线

服务热线

13648088499

微信咨询
二维码
返回顶部