LECMS如何调用轮播图

学完这篇，你能在 LECMS 模板里正确把后台配置的轮播图调出来，并且知道调不出来时该去哪儿查。

第一步：先在后台把轮播数据建起来

模板标签只是"取数据"，数据本身必须先存在后台，否则前台调出来是空白。

登录 LECMS 后台，左侧菜单进入 **内容管理 → 幻灯片管理（部分版本叫"广告管理"或"轮播图管理"），点右上角 添加幻灯片**。需要填的字段通常是：

• 分组标识：例如 index 或 home，这是前台调用时的筛选条件，务必记住；
• 标题：{$vo.title}；
• 图片：上传后得到一个图片路径，对应 {$vo.pic}；
• 跳转链接：对应 {$vo.url}；
• 排序：数字越小越靠前。

保存 3～5 条，再点一次 更新缓存（后台首页右上角）。

注意：分组标识不要随手写中文或空格，只用小写字母，否则模板里传参容易匹配不到。

第二步：找到要插入轮播的模板文件

这一步是确定"改哪个文件"。LECMS 基于 ThinkPHP，视图文件一般在：

Application/Home/View/主题名/index/index.html

如果你的站换了模板包，路径也可能是 template/当前模板名/index.html。不确定时，后台进入 模板 → 模板管理，列表里会直接显示每个模板文件对应的磁盘路径，点「首页模板」后面的编辑按钮即可在线改。

第三步：写入轮播调用标签

在这一步你会得到一段能在浏览器里跑出图片列表的 HTML。在模板中轮播要出现的位置，写入循环标签：

<div class="swiper-container">
  <div class="swiper-wrapper">
    {le:slide name="index" limit="5" id="vo"}
    <div class="swiper-slide">
      <a href="{$vo.url}"><img src="{$vo.pic}" alt="{$vo.title}"></a>
    </div>
    {/le:slide}
  </div>
</div>

参数含义：name 填第一步设的分组标识，limit 是最多条数，id 是循环变量名。

如果你这一版 LECMS 的标签库没有 le:slide，改用通用写法：

{volist name="slide" id="vo" limit="5"}
  <div class="swiper-slide"><a href="{$vo.url}"><img src="{$vo.pic}"></a></div>
{/volist}

注意：到底用哪种写法，别猜。打开 Application/Home/TagLib/LeTagLib.class.php，搜索 slide，看方法里 $tag 的默认值和字段名；后台 模板 → 标签说明 页通常也列了全部可用标签和字段。

第四步：初始化前端轮播脚本

标签只输出结构，滑动效果靠 JS。在模板底部加：

<link rel="stylesheet" href="/Public/static/swiper/swiper.min.css">
<script src="/Public/static/swiper/swiper.min.js"></script>
<script>
new Swiper('.swiper-container', {
  loop: true,
  autoplay: { delay: 3000 },
  pagination: { el: '.swiper-pagination' }
});
</script>

保存后清一次后台缓存，用浏览器打开首页，按 F12 看 Network 里图片是否 404。

第五步：调不出来时按顺序排查

1. 页面源码里有没有 swiper-slide 这段 HTML——没有就是标签没生效；
2. 有 HTML 但无图——看 {$vo.pic} 输出的是相对路径还是完整地址，路径前少了 / 就在模板里补上；
3. 有图但不滑动——控制台是否报 Swiper is not defined，说明 JS 路径写错；
4. 改了后台不生效——99% 是缓存，回后台点「清除缓存」再刷新。

注意：loop: true 时若只有 1 张图，Swiper 会报错，建议后台至少配 2 条。

小结

• 顺序是：后台建幻灯片数据 → 找模板文件 → 写循环标签 → 初始化 Swiper；
• 分组标识 name 是关联后台数据和前台标签的关键，必须一致；
• 标签写法以 LeTagLib.class.php 里的定义为准，不要凭记忆写；
• 任何"改了没反应"先清缓存；
• 至少配 2 张图，避免 loop 模式报错。