dede5.7 图片集模板-网站模板-锦华智联科技

后台设置：确保你的图集内容正确填写。
列表页模板：用于展示多个图集的缩略图和简介。
内容页模板：用于展示单个图集的详细内容,包括所有图片和描述。

第一部分：后台图集内容设置

在制作模板之前，你必须先了解后台如何正确添加一个图集,这直接关系到模板里能调用出什么数据。

（图片来源网络，侵删）

进入后台：登录 DedeCMS 后台，找到「内容管理」 -> 「新增图集」。
填写基本信息：
- 图集的标题。
- 缩略图：非常重要！这是图集在列表页显示的封面图,点击上传一张图片。
- 关键字、来源、简介等：这些和普通文章一样,用于列表页的摘要和SEO。
核心步骤 - 添加图片：
- 在编辑框下方，找到「图集上传」或类似的按钮。
- 点击后，会弹出一个上传窗口,你可以在这里批量上传图片。
- 关键点：上传图片后，务必在右侧的“图片标题”和“图片说明”输入框中为每张图片填写内容将在内容页模板中被调用。
- 上传并填写完毕后，点击「确定」或「保存」,这些图片数据就会被保存到数据库中。

一个完整的 DedeCMS 图集 = 1张缩略图 + 和说明的图片。

第二部分：图集列表页模板

列表页通常用于首页、栏目页等，展示多个图集的概览，常用模板文件是 templets/default/list_imagelist.htm（如果不存在，可以复制 list_article.htm 修改）。

在列表页中，我们主要调用两个标签：{dede:arclist} 和 {dede:field}。

核心标签解析

{dede:arclist}：用于获取文章列表，但通过 typeid 和 channel 等属性可以筛选出图集。
- typeid='栏目ID'：指定在哪个栏目下获取图集。
- channelid='-8'：这是关键！ channelid 用于指定内容模型。-8 是 DedeCMS 默认的“图片集”模型的 ID，如果你想调用普通文章，这个值是 1。
- row='10'：获取的图集数量。
- imgwidth='120' 和 imgheight='90'：列表页缩略图的统一宽高。
{dede:field}：用于获取当前图集条目的字段。
- {dede:field.title/}：获取图集标题。
- {dede:field.description function='cn_substr(@me,100)'/}：获取图集简介，并用 cn_substr 函数截取前100个字符。
- {dede:field.litpic/}：获取图集的缩略图。

示例代码 (`list_imagelist.htm`)

这是一个非常经典的图集列表布局，使用 ul 和 li 实现多图排列。

（图片来源网络，侵删）

{dede:arificial typeid='栏目ID' row='8' channelid='-8' titlelen='30' imgwidth='150' imgheight='112'}
  <li>
    <div class="pic">
      <a href="[field:arcurl/]" title="[field:title/]">
        <img src="[field:litpic/]" alt="[field:title/]" width="150" height="112" />
      </a>
    </div>
    <div class="title">
      <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
    </div>
    <div class="summary">
      [field:description function='cn_substr(@me,80)'/]...
    </div>
  </li>
{/dede:arclist}

说明：

typeid 需要替换成你自己的图集栏目ID。
channelid='-8' 是调用图集的核心，千万不要忘记。
[field:litpic/] 调用的是后台设置的缩略图,而不是图集中的第一张图。

第三部分：图集内容页模板

页用于展示单个图集的完整内容，包括所有图片的幻灯片效果和描述，常用模板文件是 templets/default/article_imagelist.htm（如果不存在，可以复制 article_article.htm 修改）。页模板比列表页复杂,因为它需要循环输出图集中的所有图片。

核心标签解析

获取图集基本信息
- {dede:field.title/}。
- {dede:field.description/}：图集简介。
- {dede:field.litpic/}：图集缩略图。
循环输出图集所有图片 - 最核心的部分 我们使用 {dede:field name='imgurls'} 来获取图集中的所有图片信息，然后在内部使用 {dede:img} 标签进行循环。
（图片来源网络，侵删）
- {dede:field name='imgurls'}：这是一个数组,包含了图集中所有图片的数据。
- {dede:img}：在 {dede:field name='imgurls'} 内部使用，用于循环处理每一张图片。
  - [field:texturl/]：当前图片的原图地址。
  - [field:imgsrc/]：当前图片的地址（通常是后台设置的“远程/本地图片URL”）。
  - [field:title/]：当前图片的（后台填写）。
  - [field:alt/]：当前图片的说明文字（后台填写）。

示例代码 (`article_imagelist.htm`)

这是一个完整的图集内容页模板，包含了标题、简介、图片轮播区和图片列表区。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">{dede:field.title/}_网站名称</title>
    <!-- 可以在这里引入 jQuery 和图片轮播插件，如 Swiper.js -->
    <link rel="stylesheet" href="/static/css/swiper.min.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/swiper.min.js"></script>
</head>
<body>
    <!-- 图集标题和简介 -->
    <h1>{dede:field.title/}</h1>
    <p class="description">{dede:field.description/}</p>
    <!-- 图片轮播区 -->
    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            <!-- 循环输出大图 -->
            {dede:field name='imgurls'}
              <div class="swiper-slide">
                  <img src="[field:imgsrc/]" alt="[field:title/]" />
              </div>
            {/dede:field}
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination gallery-top"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <!-- 图片缩略列表区 -->
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            <!-- 循环输出缩略图和标题 -->
            {dede:field name='imgurls'}
              <div class="swiper-slide">
                  <img src="[field:imgsrc/]" alt="[field:title/]" />
                  <p class="img-title">[field:title/]</p>
              </div>
            {/dede:field}
        </div>
    </div>
    <!-- 图片列表（简单的HTML列表，不依赖JS） -->
    <!--
    <div class="image-list">
        <ul>
            {dede:field name='imgurls'}
            <li>
                <img src="[field:imgsrc/]" alt="[field:title/]" />
                <div class="img-info">
                    <h3>[field:title/]</h3>
                    <p>[field:alt/]</p>
                </div>
            </li>
            {/dede:field}
        </ul>
    </div>
    -->
    <script>
        // 初始化 Swiper 轮播
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction',
            },
            thumbs: {
                swiper: galleryThumbs,
            },
        });
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
    </script>
</body>
</html>

代码解析：

{dede:field name='imgurls'}：这是图集内容页的灵魂,它获取了所有图片数据。
[field:imgsrc/]：调用了每张图片的地址，用于 <img> 标签的 src 属性。
[field:title/] 和 [field:alt/]：分别调用了后台为每张图片填写的标题和说明,增加了用户体验和SEO。
轮播效果：上面的示例使用了流行的 Swiper.js 轮播插件，实现了点击缩略图切换大图、左右箭头导航、分页器显示“1/10”等效果，你可以根据自己的喜好选择其他轮播插件或自己编写 JS。
简单列表：被注释掉的部分是一个更简单的实现，它不依赖 JS，直接用 ul 和 li 列出所有图片和说明,适合对性能要求极高或样式简单的场景。

总结与常见问题

列表页调不出图集？
- 检查 {dede:arclist} 中的 channelid 是否为 -8。
- 检查 typeid 是否正确，或者删除 typeid 属性,让它从全站调用。
- 确认栏目设置中，该栏目是否使用了“图片集”模型。
内容页没有图片？
- 检查后台添加图集时,是否真的上传了图片并为每张图片填写了标题和说明。
- 检查模板中的 {dede:field name='imgurls'} 标签是否拼写错误。
缩略图不显示或样式错乱？
- 检查后台系统 -> 系统设置 -> 图片设置，确保“远程站点目录”和“本地保存目录”路径正确且有写入权限。
- 检查 <img> 标签中是否设置了 width 和 height 属性，或者用 CSS 控制好图片容器的尺寸。
如何修改图集模板的样式？
- 所有模板代码都放在 article_imagelist.htm 和 list_imagelist.htm 文件中。
- 你可以在这些文件中直接写入 <style> 标签来写 CSS，或者像示例中一样，链接外部的 CSS 文件（如 /static/css/swiper.min.css）。
- 修改 class 名（如 swiper-slide, pic, title 等），然后在外部 CSS 文件中定义这些 class 的样式。

希望这份详细的指南能帮助你顺利完成 DedeCMS 5.7 图片集模板的制作！

dede5.7 图片集模板

第一部分：后台图集内容设置

第二部分：图集列表页模板

核心标签解析

示例代码 (list_imagelist.htm)

第三部分：图集内容页模板

核心标签解析

示例代码 (article_imagelist.htm)

总结与常见问题

示例代码 (`list_imagelist.htm`)

示例代码 (`article_imagelist.htm`)