dede图集表现方式有哪些常见样式？-DEDE建站-盈思创科技

DedeCMS 图集的表现方式可以分为两大类：

（图片来源网络，侵删）

列表页调用：在文章列表、栏目页等地方,以缩略图列表的形式展示多个图集。
内容页展示：在点击图集文章进入的详情页,进行全功能的图集展示。

下面我们分别对这两类进行详细说明。

图集在列表页的表现方式

在列表页，我们通常不希望展示所有图片，而是选取一张或几张有代表性的缩略图,作为吸引点击的入口。

单张缩略图调用（最常用）

这是最基础也是最常用的方式,只显示图集中的第一张图片作为封面。

使用标签： [field:litpic/]

（图片来源网络，侵删）

作用：获取该图集文章的第一张图片地址。
使用场景：用在文章列表的 arclist 或 list 标签循环中。

示例代码：

{dede:arclist typeid='1' row='8'}
<li>
    <a href="[field:arcurl/]">
        <img src="[field:litpic/]" alt="[field:title/]" />
    </a>
    <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
</li>
{/dede:arclist}

多张缩略图调用（幻灯片式/画廊式）

如果想展示图集中的多张图片,可以创建一个小的图片轮播或画廊效果。

使用标签： [field:imgurls/]

作用：获取该图集所有图片的地址，以分隔。
实现思路：
1. 使用 str_replace 或 explode 函数将分隔符转换成数组。
2. 使用 array_slice 函数截取数组的前 N 张图片（例如前3张）。
3. 循环输出这 N 张图片。

示例代码（在列表页模板中）：

{dede:arclist typeid='1' row='4'}
<li>
    <div class="album-preview">
        <!-- 循环输出前3张图片 -->
        [field:array function="str_replace('||||', ',', @me)"]
        <?php 
        // 将字符串转为数组
        $img_array = explode(',', $fields['imgurls']); 
        // 取前3张
        $show_imgs = array_slice($img_array, 0, 3);
        ?>
        {/field:array}
        {dede:global name='autoindex' runphp='yes'}
        $i = @me;
        if($i == 1) echo '<div class="img-list">';
        {/dede:global}
        {dede:loop}
        <img src="[field:imgsrc/]" alt="[field:alttext/]" />
        {/dede:loop}
        {dede:global name='autoindex' runphp='yes'}
        $i = @me;
        if($i == 3) echo '</div>';
        {/dede:global}
        <!-- 如果图片超过3张，显示一个“+”提示 -->
        [field:array function="count(explode(',', @me))"]
        <?php 
        $total_img = @me;
        if ($total_img > 3) {
            echo '<div class="more-indicator">+' . ($total_img - 3) . '</div>';
        }
        ?>
        {/field:array}
    </div>
    <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
</li>
{/dede:arclist}

注意：上述代码在模板中直接写PHP代码需要开启模板PHP支持，或者更推荐的方式是在后台写一个自定义函数，然后在模板中调用。

（图片来源网络，侵删）

图集在内容页的表现方式

页是图集功能的核心,提供了丰富的展示选项。

基础图片列表调用

这是最简单的展示方式,按顺序列出所有图片。

使用标签： {dede:field name='body'/}

作用：直接调用文章正文内容，如果图集是通过图集模型添加的，正文里通常只有 [page] 标签,而图片是在图集字段里。
更准确的标签：{dede:field name='imgurls'/}
实现方式：
- 在后台添加图集时，图片会自动上传并保存在 imgurls 字段中。
- 使用 dede:field name='imgurls' 可以直接输出所有图片的HTML结构。

示例代码（在内容页模板 article_article.htm 中）：

{dede:field name='imgurls'/}

默认情况下,这个标签会生成类似这样的HTML：

<dd><img src='/uploads/xxxx.jpg' width='90%' alt='' /></dd>
<dd><img src='/uploads/yyyy.jpg' width='90%' alt='' /></dd>
...

你可以用CSS来美化这个列表。

带缩略图的大图展示（经典模式）

这是最经典、最常用的图集展示模式，左侧是缩略图列表,右侧是大图预览。

使用标签： {dede:pagestyle/} 和 {dede:imglist/}, {dede:imglink/}

{dede:pagestyle/}：用于生成页面样式和JS，通常放在 <head> 标签内。
{dede:imglist/}：循环输出所有图片的缩略图。
{dede:imglink/}：循环输出所有图片的大图链接。

示例代码（在内容页模板中）：

<!-- 1. 在head部分引入JS和CSS -->
{dede:pagestyle/}
<!-- 2. 图集展示主体 -->
<div class="dede_pages">
    <div class="dede_img">
        <!-- 左侧缩略图列表 -->
        <div class="dede_img_left">
            <ul>
                {dede:imglist}
                <li><img src="[field:imgsrc/]" alt="[field:alttext/]" width="76" height="56" /></li>
                {/dede:imglist}
            </ul>
        </div>
        <!-- 右侧大图预览区 -->
        <div class="dede_img_right">
            <a href="javascript:;" id="img_prev"></a>
            <a href="javascript:;" id="img_next"></a>
            <img id="bigimg" src="[field:imgsrc function='str_replace("small", "big", @me)'/]" alt="[field:title/]" />
            <div class="dede_img_txt">
                <span>[field:pagestyle/]</span>
                <p id="img_txt">[field:text/]</p>
            </div>
        </div>
    </div>
</div>

[field:imgsrc function='str_replace("small", "big", @me)'/]：这是一个非常实用的技巧，它会自动将缩略图路径中的 small 文件夹名替换为 big，从而获取大图地址，如果你的图片路径结构不同,需要相应调整。

幻灯片/轮播图模式

如果图集的图片顺序很重要，或者希望有更强的视觉冲击力,可以使用轮播图模式。

实现方式：这通常需要结合第三方的JS库（如 Swiper, Slick, Bootstrap Carousel）来实现。

实现步骤：

引入JS和CSS：在模板的 <head> 部分引入你选择的轮播图库的文件。
准备HTML结构：按照所选JS库的要求,构建HTML结构。
填充图片数据：使用 {dede:imglist/} 标签循环生成图片项。

示例代码（使用 Swiper.js）：

<!-- 1. 在head部分引入Swiper的CSS和JS -->
<link rel="stylesheet" href="/static/swiper/swiper.min.css">
<script src="/static/swiper/swiper.min.js"></script>
<!-- 2. 构建轮播图HTML结构 -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        {dede:imglist}
        <div class="swiper-slide">
            <img src="[field:imgsrc function='str_replace("small", "big", @me)'/]" alt="[field:alttext/]" />
        </div>
        {/dede:imglist}
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<!-- 3. 在页面底部初始化Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true, // 循环模式
    });
</script>

瀑布流模式

瀑布流非常适合展示大量图片，能让页面布局更灵活、美观。

实现方式：通常需要使用第三方的JS库（如 Masonry, Isotope, Waterfall）。

实现步骤：

引入JS库。
准备HTML结构：通常是一个包裹着多个图片项的容器。
填充图片数据：使用 {dede:imglist/} 生成图片项。
调用JS进行布局。

示例代码（简化版，需配合Masonry.js）：

<!-- 1. 引入Masonry.js -->
<script src="/static/masonry/masonry.pkgd.min.js"></script>
<!-- 2. 构建瀑布流HTML结构 -->
<div class="waterfall-container">
    {dede:imglist}
    <div class="waterfall-item">
        <img src="[field:imgsrc/]" alt="[field:alttext/]" />
        <p class="img-caption">[field:text/]</p>
    </div>
    {/dede:imglist}
</div>
<!-- 3. 初始化瀑布流 -->
<script>
    var container = document.querySelector('.waterfall-container');
    var msnry = new Masonry(container, {
        itemSelector: '.waterfall-item',
        columnWidth: 200, // 设置列宽
        gutter: 10 // 设置间距
    });
</script>

注意：瀑布流对图片加载有一定要求,通常需要监听图片加载完成事件后重新布局。

后台设置与优化

选择正确的模型：发布图集文章时，务必选择 “图集” 模型，而不是“文章”模型。
缩略图设置：在后台“系统 -> 图片设置”中，可以设置缩略图的默认大小、命名规则等，这会影响 [field:litpic/] 的输出。
图片上传：使用图集模型发布时，系统会提供一个专门的图片上传界面,方便批量上传和管理。
使用 [page]：如果图集图片非常多，可以在正文中插入 [page] 标签，将图集分页显示,避免单页内容过长。

表现方式适用场景核心标签/技术备注列表页单图文章列表、栏目页 [field:litpic/] 最常用，简洁明了。列表页多图画廊首页、推荐图集 [field:imgurls/] + PHP处理需要一定的代码处理能力。选择哪种表现方式，取决于你的网站定位、设计风格以及图集内容的数量和重要性，对于大多数网站，列表页用单图，内容页用经典模式是最稳妥和功能最全面的选择。

dede图集表现方式有哪些常见样式？

图集在列表页的表现方式

单张缩略图调用（最常用）

多张缩略图调用（幻灯片式/画廊式）

图集在内容页的表现方式

基础图片列表调用

带缩略图的大图展示（经典模式）

幻灯片/轮播图模式

瀑布流模式

后台设置与优化

相关文章

目录[+]

表现方式	适用场景	核心标签/技术	备注
列表页单图	文章列表、栏目页	`[field:litpic/]`	最常用，简洁明了。
列表页多图	画廊首页、推荐图集	`[field:imgurls/]` + PHP处理	需要一定的代码处理能力。