dede文章页调用多张图片

这是最灵活的方法，因为它不依赖任何附加功能,可以在任何模板文件中使用。

准备工作

在您的文章模板（通常是 article_article.htm）中,找到您希望显示图片列表的位置。

添加 PHP 代码

在模板文件中，您需要使用 PHP 代码来执行正则匹配，织梦模板支持在 {dede:php} 和 {/dede:php} 标签内写 PHP 代码。

{dede:php}
    // 1. 获取文章内容
    $body = $this->Fields['body'];
    // 2. 定义正则表达式，匹配所有 img 标签
    // 这个表达式会匹配 src, alt, title 等常用属性，并提取 src 的值
    $pattern = "/<img.*?src=[\'|\"](.*?)[\'|\"].*?[\/]?>/i";
    // 3. 执行匹配，将结果存入 $matches 数组
    // $matches[0] 是包含完整 img 标签的数组
    // $matches[1] 是只包含 src 属性值的数组
    preg_match_all($pattern, $body, $matches);
    // 4. 检查是否找到了图片
    if (isset($matches[1]) && !empty($matches[1])) {
        // 5. 循环输出图片列表
        // 这里我们使用织梦的 runphp 标签来循环，但更简单的是直接在这里输出
        echo '<div class="article-gallery">';
        foreach ($matches[1] as $imgSrc) {
            // 为了更好的样式控制，我们可以给每个图片加一个 div 容器
            // 并且可以在这里对图片地址进行处理，例如添加缩略图参数
            // 假设原图是 /uploads/2025/10/xxx.jpg，你想调用大图，可以直接用 $imgSrc
            // 如果想调用缩略图，需要你的系统开启了远程图片本地化，并且缩略图规则已设置
            echo '<div class="gallery-item"><img src="' . $imgSrc . '" alt="文章图片"></div>';
        }
        echo '</div>';
    } else {
        echo '<p>本文暂无图片</p>';
    }
{/dede:php}

代码解析：

• $this->Fields['body']: 这是获取当前文章内容的标准方法。
• preg_match_all: 这是 PHP 的正则表达式函数,用于查找所有匹配项。
• $pattern: 正则表达式，<img.*?src=[\'|\"](.*?)[\'|\"].*?[\/]?> 的意思是：
  • <img: 匹配 <img 标签开头。
  • 匹配任意字符（除了换行符）,非贪婪模式。
  • src=[\'|\"]: 匹配 src=" 或 src='。
  • 这是核心捕获组，它会捕获 src 属性里的值。
  • [\'|\"]: 匹配结尾的 或 。
  • .*?[\/]?>: 匹配 img 标签的其他部分和结尾的 >。
• foreach ($matches[1] as $imgSrc): 循环 $matches[1] 数组，这个数组里存的就是所有图片的 src 地址。

添加 CSS 样式

为了让图片列表看起来更美观，请在您的 CSS 文件中添加以下样式：

.article-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 图片之间的间距 */
    margin: 20px 0;
}
.gallery-item {
    flex: 1 0 30%; /* 图片容器宽度，可以根据需要调整 */
    max-width: 300px; /* 最大宽度 */
    overflow: hidden; /* 隐藏超出部分 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 阴影效果 */
}
.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.gallery-item img:hover {
    transform: scale(1.05); /* 鼠标悬停时放大 */
}

使用图集模型（官方推荐的最佳实践）

如果你的文章本身就是“图集”类型，或者希望将一篇文章变成一个图集，那么使用 DedeCMS 自带的“图集”模型是最佳选择，这种方法更规范，后台管理方便,且自带了图片描述功能。

创建图集文章

• 在后台发布文章时，选择“图集”模型，编辑区域，上传图片并为每张图片填写（即图片描述）。
• 填写完毕后,保存文章。

在模板中调用

图集模型有专门的标签来调用图片。

调用所有图片（大图）：

{dede:field name='imgurls' alt='图片描述'}
    <a href="[field:imgsrc/]" title="[field:text/]">
        <img src="[field:imgsrc/]" alt="[field:text/]">
    </a>
{/dede:field}

调用所有图片（缩略图）：

图集模型在上传时会自动生成缩略图,调用方式如下：

{dede:field name='imgurls' alt='图片描述'}
    <!-- [field:imgsrc/] 是原图，[field:litpic/] 是缩略图 -->
    <a href="[field:imgsrc/]" title="[field:text/]">
        <img src="[field:litpic/]" alt="[field:text/]">
    </a>
{/dede:field}

标签解析：

• {dede:field name='imgurls'}: 调用文章的所有图片。
• [field:imgsrc/]: 输出图片的原始地址。
• [field:litpic/]: 输出图片的缩略图地址。
• [field:text/]: 输出你在后台为该图片填写的“标题”（即描述）。

使用第三方图集插件/标签（功能最强大）

如果你觉得方法一太麻烦，方法二又不想换模型，那么使用第三方开发的图集标签插件是很好的选择，网上有很多优秀的免费或付费插件，likearticle、picturerank 等，它们通常功能更强大，比如支持 Ajax 无刷新加载、瀑布流布局等。

使用方法通常很简单：

1. 下载插件并按照说明安装到你的 DedeCMS 系统中。
2. 在模板中调用插件提供的标签。

某个插件可能提供这样的标签：

{dede:likearticle imgnum='10' titlelen='20'}
    <li>
        <a href="[field:arcurl/]">
            <img src="[field:picname/]" alt="[field:title/]">
            <span>[field:title/]</span>
        </a>
    </li>
{/dede:likearticle}

优点：

• 功能丰富,效果炫酷。
• 使用简单,无需写复杂代码。
• 通常有详细的文档和社区支持。

缺点：

• 需要额外安装和配置。
• 可能与特定版本的 DedeCMS 兼容性不好。

总结与建议

给你的建议：

• 如果你正在新建一个文章，并且这篇文章的主要目的是展示图片，请直接使用 方法二（图集模型），这是最正确、最省力的方式。
• 如果你有一个已经写好的普通文章，想在里面提取图片做展示，方法一（正则表达式） 是你的不二之选。
• 如果你想让你的图片展示效果与众不同（如瀑布流、灯箱效果等），可以去研究一下 方法三（第三方插件）。