织梦列表页如何实现多张缩略图？

下面我将为您提供两种最主流、最实用的方法：

1. 推荐方法：使用自定义模型和多图字段 (功能最强大，最灵活)
2. 快速方法：修改默认模型，增加多图字段 (适用于不想创建新模型的场景)

使用自定义模型和多图字段 (推荐)

这是最规范、最推荐的方法，它利用了织梦强大的自定义模型功能，不会影响默认的文章模型，安全且易于管理。

核心思路：

创建一个新的自定义模型（产品模型”或“图集模型”），在该模型中添加一个专门用于存储多张图片的自定义字段，然后在列表页调用这个字段里的图片。

详细步骤：

第一步：创建自定义模型

1. 登录织梦后台,进入【核心】 -> 【内容模型管理】。
2. 点击【增加新模型】。
3. 模型名称：填写一个你想要的名称，产品模型”。
4. 模型表前缀：保持默认的dede_即可，系统会自动生成一个唯一的表名，如dede_addonproduct。
5. 字段列表：点击【保存】，一个基础的自定义模型就创建好了。

第二步：添加多图字段

1. 继续在【内容模型管理】页面，找到你刚刚创建的“产品模型”，点击后面的【字段管理】。
2. 点击【增加新字段】。
3. 字段名称：pics (小写，不要加空格和特殊字符)。
4. 字段类型：选择 “多图片”。
5. 字段提示：填写“产品多图”，这个会在后台发布内容时显示。
6. 是否显示在发布页：选择“是”。
7. 其他选项：
   • 默认值：可以留空。
   • 最大上传数目：根据你的需求填写，10。
   • 显示顺序：可以设置为 5 或其他数字，决定它在表单中的位置。
8. 点击【保存】字段。

你的自定义模型就具备了上传和管理多张图片的能力。

第三步：修改列表页模板

这是最关键的一步,你需要修改列表页的模板文件，让它能读取并显示这个新字段里的图片。

1. 找到你的列表页模板文件,通常位于 /templets/default/ 目录下，文件名可能是 list_article.htm 或你自定义的模板文件。

2. 用代码编辑器打开它。

3. 找到循环文章列表的核心代码块,它通常是这样的：

   {dede:list pagesize='10'}
   <li>
       <a href="[field:arcurl/]">[field:title/]</a>
       <img src="[field:litpic/]" alt="[field:title/]">
   </li>
   {/dede:list}

4. 修改循环体，用 {dede:field name='pics'/} 来替换原来的单张缩略图 [field:litpic/]。

   
   （图片来源网络，侵删）

   {dede:list pagesize='10'}
   <li>
       <a href="[field:arcurl/]">[field:title/]</a>
       <!-- 在这里替换缩略图部分 -->
       <div class="multi-images">
           {dede:field name='pics' function='GetMultiPics(@me)'/}
       </div>
   </li>
   {/dede:list}

   代码解释：

   • {dede:field name='pics'/}：这是调用我们刚才创建的 pics 字段的内容，这个字段存储的是一个用 分隔的图片路径字符串，uploads/2025/pic1.jpg|||uploads/2025/pic2.jpg。
   • function='GetMultiPics(@me)'：这是织梦自带的一个非常有用的自定义函数，它的作用就是解析这个字符串，并输出一个 <img> 标签的列表，默认情况下，它只会取第一张图片，但我们可以修改它来显示多张。

第四步：修改或创建自定义函数以显示多张图片

GetMultiPics 函数在 /include/helpers/extend.helper.php 文件中，默认代码如下：

// /include/helpers/extend.helper.php
if ( ! function_exists('GetMultiPics'))
{
    function GetMultiPics($pics = '', $style = '')
    {
        if($pics == '') return '';
        $pics = explode("|||", $pics);
        $pic = $pics[0];
        if ($pic == "") return "";
        if($style != '')
        {
            $dtp = new DedeTagParse();
            $dtp->LoadString($style);
            $dtp->SetVar('picurl', $pic);
            $style = $dtp->GetResult();
            return $style;
        }
        return "<img src='$pic' border='0' />";
    }
}

我们要修改这个函数,让它循环输出所有图片。

修改后的 GetMultiPics 函数：

// /include/helpers/extend.helper.php
if ( ! function_exists('GetMultiPics'))
{
    function GetMultiPics($pics = '', $style = '')
    {
        if($pics == '') return '';
        $pics = explode("|||", $pics);
        $result = '';
        // 循环每一张图片
        foreach($pics as $pic)
        {
            if (empty($pic)) continue; // 跳过空图片
            // 获取图片的宽高信息
            $imginfos = @getimagesize($pic);
            $width = isset($imginfos[0]) ? $imginfos[0] : '';
            $height = isset($imginfos[1]) ? $imginfos[1] : '';
            // 如果有自定义样式模板
            if($style != '')
            {
                $dtp = new DedeTagParse();
                $dtp->LoadString($style);
                $dtp->SetVar('picurl', $pic);
                $dtp->SetVar('width', $width);
                $dtp->SetVar('height', $height);
                $result .= $dtp->GetResult();
            }
            else // 如果没有自定义样式，则使用默认样式
            {
                // 默认输出一个 <img> 标签
                // 你可以在这里修改为你想要的HTML结构，比如给图片加个链接
                $result .= "<img src='$pic' width='$width' height='$height' alt='' style='margin-right:5px;' />";
            }
        }
        return $result;
    }
}

修改说明：

• 我们用 foreach 循环 $pics 数组，处理每一张图片。
• 我增加了获取图片宽高的逻辑,这样在模板中就可以直接使用。
• 默认情况下,它会输出多个 <img> 标签，你可以直接修改 $result .= "<img ... />"; 这一行，改成你想要的HTML结构，

  // 示例：将图片包裹在一个链接里
  $result .= "<a href='{$pic}' target='_blank'><img src='$pic' width='100' height='100' style='margin-right:5px;' /></a>";

第五步：使用自定义样式（可选但推荐）

为了更灵活地控制图片显示,你可以使用 $style 参数。

1. 在列表页模板中,调用函数时传入样式：

   {dede:field name='pics' function='GetMultiPics(@me, "<img src=\'{picurl}\' width=\'100\' height=\'100\' style=\'margin-right:5px;\' />")'/}

2. 或者,定义一个 <style> 标签，然后用更复杂的HTML结构：

   {dede:field name='pics' function='GetMultiPics(@me, "<li><img src=\'{picurl}\' /></li>")'/}

   然后在CSS中定义 .multi-images ul { list-style: none; }。

完成以上步骤后,保存模板文件，清空一下缓存，刷新你的列表页，就能看到多张缩略图了。

修改默认文章模型

如果你不想创建新模型,只想在默认的文章列表里也显示多张图，可以采用此方法。注意：直接修改核心模型有一定风险，请务必备份数据库！

核心思路：

直接在默认的“普通文章”模型里增加一个多图字段，然后和方法一中的第三、四、五步一样，修改模板和函数。

详细步骤：

1. 备份数据库！
2. 进入后台【核心】 -> 【内容模型管理】，找到“普通文章”模型，点击【字段管理】。
3. 点击【增加新字段】，操作步骤与方法一的第二步完全一样，创建一个名为 pics 的“多图片”字段。
4. 重要：你需要为所有已存在的文章手动添加这个新字段，或者通过SQL批量给 dede_addonarticle 表增加一个 pics 字段并设置默认值为空。
5. 后续步骤（修改模板 /templets/default/list_article.htm 和修改函数 extend.helper.php）与方法一的第三、四、五步完全相同。

总结与建议

最终建议：

对于绝大多数项目,请优先选择 使用自定义模型和多图字段，这是最专业、最安全、最可扩展的解决方案，能让你未来的网站维护和功能扩展更加轻松。