这是一个非常常见的需求,但 DedeCMS 本身并没有直接提供“图片集幻灯片”这样的内容类型，我们需要通过组合使用 “图片集”内容模型 和 “幻灯片/焦点图”调用标签 来实现。
（图片来源网络，侵删）
下面我将分步为您讲解,从最简单的方法到更灵活的自定义方法。
核心概念理解
- 图片集：这是 DedeCMS 的一个内容模型，当你发布一篇文章时，可以选择“图片集”模型，然后上传多张图片，这些图片会保存在数据库的
dedu_addonimages表中，并以{dede:img text=''}{/dede:img}这样的格式存储在文章正文中。 - 幻灯片/焦点图：这是 DedeCMS 的一个频道，你需要在后台创建一个专门的“幻灯片”频道，然后将你想要展示的“图片集”文章推荐到这个频道，通过一个专门的调用标签（如
{dede:arclist}配合特定属性）在前端页面调用出来，形成轮播效果。
简单流程： 创建图片集文章 -> 推荐到幻灯片频道 -> 在前台页面调用幻灯片频道的内容
使用“推荐位”实现（最常用、最标准）
这是 DedeCMS 官方推荐且最稳定的方法，步骤如下：
步骤 1：创建“幻灯片”栏目（频道）
- 登录 DedeCMS 后台，进入「栏目管理」。
- 点击「添加顶级栏目」。
- 栏目名称：填写
幻灯片或焦点图。 - 栏目类型：选择「内部栏目」。
- 模型：选择「图片集」。（非常重要！）
- 是否允许投稿：根据需要选择，一般幻灯片都是管理员发布的，选“否”。
- 是否启用：勾选。
- 其他选项保持默认,点击「确定」保存。
你就拥有了一个专门用来存放幻灯片文章的栏目。
（图片来源网络，侵删）
步骤 2：发布图片集文章并推荐
- 进入「」，选择你刚刚创建的
幻灯片栏目。 - 填写文章标题、摘要等基本信息。
- 关键步骤：在文章编辑器中，点击“图片集”按钮（通常是一张小图和加号的图标），而不是直接上传图片。
- 在弹出的窗口中,上传你想要展示的图片，并为每张图片填写（这个标题会作为图片说明文字）。
- 上传完成后,点击“插入”。
- 在文章正文区域,你会看到类似
[field:img text=''/]的代码，这就是 DedeCMS 识别图片集的标记。 - 在文章编辑页面的右侧,找到“推荐位”设置。
- 勾选你想要展示的位置,DedeCMS 默认有一个名为“首页焦点图”的推荐位，你可以直接勾选它，你也可以自定义推荐位。
- 点击「保存」发布文章。
重复此步骤,为你的幻灯片频道添加多张图片集文章。
步骤 3：在前台模板中调用幻灯片
最关键的一步来了：在前台页面（通常是首页 index.htm）的相应位置，添加调用代码。
DedeCMS 有一个专门用于调用推荐位幻灯片的标签，非常方便。
在首页模板 index.htm 的 <head> 标签内引入 jQuery 和轮播插件（如 Slick 或 Swiper）的 CSS 和 JS 文件。
（图片来源网络，侵删）
示例（使用 Slick 轮播库）：
<!-- 在 <head> 中引入 --> <link rel="stylesheet" type="text/css" href="/static/css/slick.css" /> <script type="text/javascript" src="/static/js/jquery.min.js"></script> <script type="text/javascript" src="/static/js/slick.min.js"></script>
在 <body> 中，你想要显示幻灯片的位置，添加以下 HTML 结构：
<div class="slider-wrapper">
<div class="main-slider">
{dede:arclist flag='h' typeid='你的幻灯片栏目ID' row='5'}
<div>
<a href="[field:arcurl/]" title="[field:title/]">
<!-- 调用图片集的第一张图片作为封面 -->
<img src="[field:litpic/]" alt="[field:title/]">
<!-- 如果需要图片说明文字，可以加上 -->
<div class="slider-caption">[field:title/]</div>
</a>
</div>
{/dede:arclist}
</div>
</div>
代码解释：
{dede:arclist ...}：这是文章列表调用标签。flag='h'：这是关键！h代表调用设置了“首页焦点图”推荐位的文章，如果你在步骤2中勾选的是其他推荐位，请使用对应的 flag，flag='c'（首页头条）。typeid='你的幻灯片栏目ID'：指定只调用你创建的“幻灯片”栏目下的文章。这个参数非常重要，可以避免调用其他栏目的推荐文章。 你可以在「栏目管理」中鼠标悬停在“幻灯片”栏目上，浏览器底部状态栏会显示 ID。row='5'：调用5篇文章，也就是5张幻灯片。[field:litpic/]：调用文章的封面图片，对于图片集文章，这里通常显示的是你上传的第一张图片。[field:arcurl/]：调用文章的链接地址。[field:title/]：调用文章的标题。
在 <body> 的最后，轮播图容器下方，添加初始化轮播的 JS 代码：
<script type="text/javascript">
$(document).ready(function(){
$('.main-slider').slick({
dots: true, // 显示指示点
infinite: true, // 循环播放
speed: 500, // 动画速度
autoplay: true, // 自动播放
autoplaySpeed: 3000, // 自动播放间隔
arrows: true // 显示左右箭头
});
});
</script>
刷新你的首页,就能看到图片集幻灯片效果了。
手动调用图片集内容（更灵活）
如果你想做一个独立的图片展示模块,而不是“推荐位”那种，可以手动调用某个图片集文章内的所有图片。
这种方法不依赖于“推荐位”，而是直接读取文章内容里的图片。
在首页模板中定义一个变量，获取指定图片集文章的内容。
{dede:sql sql="SELECT body FROM `dede_addonarticle` WHERE aid = 1"}
{dede:getdata name='body'}
{dede:imglist}
<img src="[field:imgsrc/]" alt="[field:text/]">
{/dede:imglist}
{/dede:getdata}
{/dede:sql}
代码解释：
dede:sql：直接执行 SQL 语句查询数据库。dede_addonarticle是文章附加表，aid是文章 ID，你需要把1替换成你想要展示的那个图片集文章的 ID。dede:getdata：将查询到的body字段内容赋值给一个变量。dede:imglist：这个标签专门用来解析文章内容里的{dede:img text=''}{/dede:img}标记，并循环输出其中的图片。
将获取到的图片列表放入你的轮播图结构中，并用 JS 初始化轮播。
<div class="slider-wrapper">
<div class="manual-slider">
{dede:sql sql="SELECT body FROM `dede_addonarticle` WHERE aid = 1"}
{dede:getdata name='body'}
{dede:imglist}
<div>
<img src="[field:imgsrc/]" alt="[field/text/]">
</div>
{/dede:imglist}
{/dede:getdata}
{dede:sql}
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.manual-slider').slick({
dots: true,
infinite: true,
speed: 500,
autoplay: true,
autoplaySpeed: 3000,
arrows: true
});
});
</script>
方法的优缺点：
- 优点：非常灵活，可以调用任何一篇图片集文章，不涉及推荐位。
- 缺点：不够动态，每次更换图片集，都需要修改模板中的
aid值，不适合频繁更新的场景。
总结与建议
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 方法一（推荐位） | 官方标准，稳定可靠，与 DedeCMS 系统集成度高，更新方便（只需后台发布文章并勾选推荐位）。 | 需要额外创建一个栏目，理解推荐位概念。 | 绝大多数情况下的首选，特别是首页焦点图、频道页幻灯片等。 |
| 方法二（手动调用） | 灵活，不依赖栏目和推荐位，代码相对独立。 | 不够动态，修改内容需要编辑模板文件，不适合频繁更新。 | 制作一个固定的、不常更换的图片展示模块，比如某个产品介绍的图片轮播。 |
对于绝大多数用户来说,强烈推荐使用方法一，它最符合 DedeCMS 的设计理念，也最易于后期维护和管理。
希望这个详细的教程能帮助到你！如果在操作过程中遇到问题，可以检查一下栏目ID、推荐位flag是否正确，以及jQuery和轮播插件是否正确引入。
