- 使用现成的DedeCMS幻灯片插件（推荐，最简单）
- 手动修改模板文件，结合JS代码（灵活，需一定代码能力）
使用现成的DedeCMS幻灯片插件（推荐新手使用）
这种方法最简单，无需修改核心文件，安装后即可使用,安全性高。
步骤 1：下载合适的幻灯片插件
在网上搜索 "DedeCMS 幻灯片插件" 或 "DedeCMS 文章内容页图片轮播插件"，有很多免费的资源可以选择，选择一个评价好、下载量高的插件，一些插件的名字可能叫 "DedeCMS文章内容页图片幻灯片插件" 等。
步骤 2：上传并安装插件
-
上传文件：将下载的插件包解压，按照说明，将相应的文件和文件夹上传到你的 DedeCMS 网站根目录的指定位置,通常包括：
include/目录下的PHP文件（用于处理逻辑）。templets/目录下的HTML模板文件（用于展示幻灯片）。images/或static/目录下的JS和CSS文件（用于样式和效果）。- 有时还会有一个安装脚本
install.php。
-
运行安装：如果插件有
install.php，访问你的网站域名加上该文件名（http://www.yoursite.com/install.php），根据提示完成安装，如果没有安装脚本,通常只需要将文件上传到位即可。
步骤 3：修改文章内容页模板
这是最关键的一步,你需要告诉插件在哪个位置显示幻灯片。
-
找到模板文件：登录你的 DedeCMS 后台，进入
模板->默认模板管理->页模板 (article_article.htm)，点击修改。 -
插入调用代码：在
article_article.htm文件中，找到{dede:field.body/}这一行。在这行代码的上面,插入插件提供的调用代码。插件提供的调用代码通常看起来像这样（请以你下载的插件说明为准）：
{dede:php} // 这里是插件提供的PHP调用代码 // require_once(DEDEINC.'/幻灯片插件名.php'); // 然后执行一个函数来生成幻灯片HTML {/dede:php}或者是更简单的标签形式：
（图片来源网络，侵删）{dede:include filename='幻灯片模板文件.htm'/} -
保存模板：保存对
article_article.htm的修改。
步骤 4：更新文章并测试
- 进入“[内容发布]” -> “选择文档”，选中几篇已经发布并且内容中包含多张图片的文章，点击“更新HTML”。
- 打开更新后的文章页面,你应该就能看到图片幻灯片效果了。
优点：
- 操作简单,无需懂代码。
- 安全,不修改DedeCMS核心文件。
- 通常功能比较完善,支持多种幻灯片效果。
缺点：
- 可能会增加网站的加载负担（如果插件本身臃肿）。
- 灵活性相对较低,受限于插件的功能。
手动修改模板文件，结合JS代码（推荐有基础的用户）
这种方法更灵活，可以根据自己的喜好定制幻灯片样式和效果,但需要你手动编写或修改少量代码。
准备工作：准备一个幻灯片JS库
我们可以使用非常流行的轻量级库 Swiper，它免费、功能强大且易于使用。
- 下载Swiper：访问 Swiper官网，下载最新版本，你只需要
dist文件夹下的swiper-bundle.min.js和swiper-bundle.min.css这两个文件。 - 上传文件：将下载的
swiper-bundle.min.js和swiper-bundle.min.css上传到你模板的公共资源文件夹，/templets/你的默认模板/css/和/templets/你的默认模板/js/。
步骤 1：修改文章内容页模板 (article_article.htm)
-
引入Swiper资源：在
article_article.htm的<head>标签内，引入 Swiper 的 CSS 文件。<head> <meta charset="utf-8"> <title>{dede:field.title/}_{dede:global.cfg_webname/}</title> <!-- 引入Swiper的CSS --> <link rel="stylesheet" href="/templets/你的默认模板/css/swiper-bundle.min.css"> <!-- 其他原有样式... --> </head> -
在
{dede:field.body/}之前添加幻灯片HTML结构：<!-- 幻灯片容器开始 --> <div class="dede-article-slider"> <!-- 如果文章有图片，则显示幻灯片，否则不显示 --> {dede:field.body runphp='yes'} $body = @me; // 使用正则表达式提取所有img标签的src属性 preg_match_all('/<img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?>/i', $body, $matches); $image_count = count($matches[0]); // 如果图片数量大于1，则显示幻灯片 if ($image_count > 1) { echo '<div class="swiper mySwiper"> <div class="swiper-wrapper">'; foreach ($matches[2] as $img_src) { echo '<div class="swiper-slide"> <img src="' . $img_src . '" alt="文章配图"> </div>'; } echo '</div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>'; } // 如果图片只有一张或不满足条件，则输出空，不影响页面布局 @me = ''; {/dede:field.body} </div> <!-- 幻灯片容器结束 --> <!-- 原有的文章内容 --> {dede:field.body/} -
在页面底部引入Swiper的JS文件：在
article_article.htm文件的最底部，</body>标签之前，引入 Swiper 的 JS 文件。<!-- 在 </body> 标签之前 --> <!-- 引入Swiper的JS --> <script src="/templets/你的默认模板/js/swiper-bundle.min.js"></script> <!-- 初始化Swiper的JS代码 --> <script> document.addEventListener('DOMContentLoaded', function () { // 查找所有名为 mySwiper 的幻灯片实例 var swiper = new Swiper('.mySwiper', { loop: true, // 循环模式 pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, autoplay: { delay: 3000, // 自动切换的时间间隔（毫秒），0表示不自动切换 disableOnInteraction: false, }, }); }); </script> </body>
步骤 2：添加自定义CSS样式（可选）
为了美化幻灯片，你可以在模板的CSS文件（如 style.css）中添加以下样式：
.dede-article-slider {
width: 100%;
margin-bottom: 20px; /* 与下方内容的间距 */
border-radius: 8px;
overflow: hidden; /* 确保圆角效果 */
}
.dede-article-slider .mySwiper {
width: 100%;
height: 400px; /* 设置一个固定高度，可以根据需要调整 */
}
.dede-article-slider .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover; /* 保证图片填满容器且不变形 */
}
/* 如果只想在图片大于1张时才显示容器，可以加上这个样式 */
.dede-article-slider:empty {
display: none;
}步骤 3：更新并测试
发布”里更新几篇包含多张图片的文章,然后刷新页面查看效果。
优点：
- 极其灵活,可以完全控制幻灯片的样式和行为。
- 只加载必要的资源,性能较好。
- 学习后可以应用到其他项目中。
缺点：
- 需要一定的HTML、CSS和JavaScript知识。
- 需要自己处理图片提取逻辑和边界情况（如没有图片时）。
- 如果你是新手，或者想快速实现，强烈推荐使用 方法一（插件法）。
- 如果你有一定开发基础，希望幻灯片效果完全符合网站设计，并且不希望安装过多插件，方法二（手动法） 是更好的选择。
希望这个详细的教程能帮助你成功在DedeCMS文章内容页中加入图片幻灯片！
