dedecms模板如何实现全屏轮播效果？-网站模板-锦华智联科技

我们将使用当前最流行、最灵活的 Swiper.js 库来实现，它功能强大，性能优秀，且易于定制。

（图片来源网络，侵删）

教程总览

准备工作: 下载 Swiper.js 文件。
上传文件: 将 Swiper 文件上传到您的 DedeCMS 模板目录。
制作HTML结构: 在模板文件中编写轮播图的 HTML 结构。
调用数据: 使用 DedeCMS 的标签 {dede:arclist} 调用指定栏目下的文章作为轮播图数据。
编写CSS样式: 设置轮播图为全屏，并美化样式。
编写JS脚本: 初始化 Swiper 轮播组件。
最终效果与文件结构。

第一步：准备工作

访问 Swiper 官网: https://swiperjs.com/
下载文件:
- 在官网首页,点击 "Get Started" 或 "Download"。
- 在 "Download" 页面，选择您需要的版本，对于大多数情况，选择 "Production" (生产版本) 即可。
- 点击 "Download" 按钮，会得到一个 .zip 压缩包。
解压并找到核心文件:
- 解压下载的 swiper-bundle.min.js 和 swiper-bundle.min.css 这两个文件。

第二步：上传文件到DedeCMS

登录您的 DedeCMS 后台。
进入 “模板” -> “默认模板管理”。
找到您当前正在使用的模板文件夹（default），进入该文件夹。
在模板文件夹内,创建一个新的文件夹，命名为 assets (或其他您喜欢的名字，如 js, css)，用于存放第三方库文件。
将上一步解压出的 swiper-bundle.min.js 和 swiper-bundle.min.css 文件上传到这个 assets 文件夹中。

最终文件路径示例: /templets/your_template_name/assets/swiper-bundle.min.css /templets/your_template_name/assets/swiper-bundle.min.js

第三步：制作HTML结构

我们需要在您的首页模板文件（通常是 index.htm）中添加轮播图的 HTML 结构。

打开您的首页模板文件 index.htm。
在您希望显示轮播图的位置（<head> 标签之后，<body> 内容的顶部），添加以下代码：

<!-- 轮播图容器 -->
<div class="swiper mySwiper">
    <!-- 轮播图内容包裹层 -->
    <div class="swiper-wrapper">
        <!-- 这里将通过DedeCMS标签动态生成轮播图项 -->
        {dede:arclist flag='c' typeid='栏目ID' row='5'}
        <div class="swiper-slide">
            <!-- 轮播图图片 -->
            <img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]">
            <!-- 可选：轮播图上的文字标题 -->
            <div class="swiper-slide-caption">
                <h3>[field:title/]</h3>
                <p>这里是副标题或简短描述</p>
            </div>
        </div>
        {/dede:arclist}
    </div>
    <!-- 如果需要分页器（小圆点） -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮（左右箭头） -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

代码解释:

{dede:arclist ...}: 这是DedeCMS的核心标签，用于调用文章列表。
- flag='c': 这个属性非常重要，它表示调用“首页推荐”的文章，您需要在DedeCMS后台“文档模型” -> “普通文章” -> “增加字段”中，为文章增加一个 isrecommend 字段（类型为 枚举，选项为 推荐,不推荐），然后在发布文章时勾选“推荐”，或者，更简单的是，直接使用 typeid 来指定一个专门存放轮播图的栏目。
- typeid='栏目ID': 指定一个栏目ID，只调用该栏目下的文章作为轮播图。这是最推荐的方式，您可以新建一个“轮播图”隐藏栏目，专门用于存放轮播图内容。
- row='5': 调用5篇文章作为轮播图。
- [field:litpic/]: 获取文章的缩略图地址。
- [field:title/...]: 获取文章标题，并用 html2text 函数过滤掉HTML标签，防止标题中包含特殊字符导致页面报错。
.swiper: 这是 Swiper 轮播图的主容器。
.swiper-wrapper: 这是包裹所有轮播项的容器。
.swiper-slide: 这是每一个轮播项。
.swiper-pagination, .swiper-button-next, .swiper-scrollbar: 这些是 Swiper 的功能模块，您可以根据需要选择是否添加。

第四步：编写CSS样式

为了实现全屏效果,我们需要添加一些 CSS 样式。

（图片来源网络，侵删）

在您的模板文件 index.htm 中，找到 <head> 标签内的 <link> 标签区域，引入 Swiper 的 CSS 文件。
在 <link> 标签后，可以添加一个 <style> 标签来编写自定义样式。

<head>
    <!-- ... 其他 meta 和 title 标签 ... -->
    <!-- 1. 引入 Swiper CSS -->
    <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/assets/swiper-bundle.min.css">
    <!-- 2. 添加自定义样式 -->
    <style>
        /* 确保 html 和 body 元素的高度是 100% */
        html, body {
            position: relative;
            height: 100%;
        }
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        /* 轮播图容器设置全屏高度 */
        .swiper {
            width: 100%;
            height: 100vh; /* 使用视口高度单位，确保是全屏 */
        }
        /* 轮播项内的图片设置，使其覆盖整个slide并居中 */
        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover; /* 关键：使图片覆盖整个区域，不变形 */
        }
        /* 轮播图上的文字样式（可选） */
        .swiper-slide-caption {
            position: absolute; /* 绝对定位 */
            left: 0;
            bottom: 0;
            width: 100%;
            padding: 20px;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            color: #fff;
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>

关键点:

height: 100vh;: 这是实现全屏的核心。vh 是视口高度单位，100vh 就等于浏览器窗口的高度。
object-fit: cover;: 这是处理图片的关键，它会让图片（如 img）在保持其宽高比的同时，被缩放以完全填充其内容框，可能会被裁剪，但不会留有空隙或变形。

第五步：编写JS脚本

我们需要在页面底部引入 Swiper 的 JS 文件，并初始化轮播图。

在您的模板文件 index.htm 的最底部，</body> 标签之前，添加以下代码：

<!-- 1. 引入 Swiper JS -->
<script src="{dede:global.cfg_templets_skin/}/assets/swiper-bundle.min.js"></script>
<!-- 2. 初始化 Swiper -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var swiper = new Swiper(".mySwiper", {
            // 循环模式
            loop: true,
            // 自动切换
            autoplay: {
                delay: 3000, // 3秒切换一次
                disableOnInteraction: false, // 用户操作后是否停止自动切换
            },
            // 分页器
            pagination: {
                el: ".swiper-pagination",
                clickable: true, // 点击分页器切换slide
            },
            // 导航按钮
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    });
</script>
</body>

代码解释:

new Swiper(".mySwiper", {...}): 初始化一个 Swiper 实例，.mySwiper 是我们给轮播图主容器设置的 class 名。
loop: true: 开启循环模式，让轮播图可以无限循环播放。
autoplay: 配置自动播放功能。
pagination, navigation: 分别对应我们之前在 HTML 中添加的分页器和导航按钮。

第六步：最终效果与文件结构

完成以上步骤后,保存 index.htm 文件，并刷新您的网站首页，您应该就能看到一个功能完善的全屏轮播图了。

推荐的 DedeCMS 后台设置:

新建栏目: 在后台“栏目管理”中，新建一个顶级栏目，首页轮播图”。
设置栏目属性:
- 栏目列表选项: 勾选“不生成栏目页”。
- : 勾选“使用摘要”。
设置栏目列表: 勾选“隐藏”。
发布文章: 将您想展示在轮播图上的文章发布到这个“首页轮播图”栏目中，并上传好缩略图。
修改模板: 将 {dede:arclist} 标签中的 typeid='栏目ID' 修改为您新建的这个“首页轮播图”栏目的ID。

最终模板文件结构示例:

/templets/your_template_name/
├── index.htm
├── head.htm
├── footer.htm
└── assets/
    ├── swiper-bundle.min.css
    └── swiper-bundle.min.js

常见问题与解决方案

Q1: 轮播图不显示，或者图片显示不全？

原因: CSS 样式未生效或路径错误。
解决:
1. 检查浏览器开发者工具 (F12) 的 Console 面板，是否有 JS 或 CSS 文件加载失败的 404 错误，确保 {dede:global.cfg_templets_skin/}/assets/... 路径正确。
2. 检查浏览器开发者工具的 Elements 面板，确认 .swiper 和 img 的 CSS 样式是否被正确应用（特别是 height: 100vh 和 object-fit: cover）。
3. 确保调用的文章 [field:litpic/] 有正确的缩略图地址。

Q2: 轮播图切换时卡顿，不流畅？

原因: 图片过大，或者 Swiper 性能未优化。
解决:
1. 压缩图片: 确保轮播图图片的体积不要太大，建议每张图片控制在 100KB ~ 300KB 之间。
2. 开启硬件加速: 在 .swiper-slide 的 CSS 中添加 transform: translateZ(0); 有时能提升性能。
3. 检查插件: 确保没有其他 JS 插件与 Swiper 产生冲突。

Q3: 如何让点击轮播图跳转到对应文章？

解决: 将 .swiper-slide 用 <a> 标签包裹起来。

{dede:arclist typeid='栏目ID' row='5'}
<a href="[field:arcurl/]">
    <div class="swiper-slide">
        <img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]">
    </div>
</a>
{/dede:arclist}

注意: 如果这样做，请确保 CSS 中的 a 标签样式（如 display: block; width: 100%; height: 100%;）正确，否则点击区域可能不完整。

通过以上步骤,您就可以在 DedeCMS 中轻松实现一个功能强大、视觉效果出色的全屏轮播图了。