织梦列表页如何调用图片？

使用 {dede:field.body/} 和 preg_match (最推荐、最灵活)

这是最常用且最灵活的方法,它通过正则表达式直接从文章内容（body字段）中提取第一张图片的地址。

适用场景：

• 里插入了图片。
• 需要动态获取,而不是依赖文章的缩略图字段。

代码示例：

在你的列表页模板文件（通常是 /templets/default/list_article.htm）中，找到需要显示图片的位置，将以下代码粘贴进去。

{dede:list pagesize='10'}
    <li>
        <!-- 使用 preg_match 提取第一张图片 -->
        <img src="[field:body function='preg_replace("/.*?(<img src=\")(.*?)(\".*?)/is", "\\2", @me)'/]" alt="[field:title function='html2text(@me)'/]" width="200" height="150">
        <!-- 其他字段调用 -->
        <a href="[field:arcurl/]">[field:title/]</a>
        <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
    </li>
{/dede:list}

代码解析：

1. [field:body/]：这是调用文章完整内容的标签。
2. function='preg_replace(...)'：这是对 body 字段内容执行一个PHP函数，这里我们用的是 preg_replace 来实现提取。
3. preg_replace("/.*?(<img src=\")(.*?)(\".*?)/is", "\\2", @me)：
   • *正则表达式部分 `"/.?(<img src=\")(.?)(\".?)/is"`**：
     • 非贪婪匹配任意字符（除换行符），直到找到下一个模式。
     • (<img src=\")：匹配 <img src=" 这个字符串，并作为一个捕获组。
     • 这是关键！ 它会匹配 src= 后面的URL地址，这是我们想要提取的内容，作为第二个捕获组。
     • (\".*?>)：匹配 "> 这个字符串。
     • /is：i 表示不区分大小写，s 表示让 匹配包括换行符在内的所有字符（因为HTML内容可能跨行）。
   • 替换部分 "\\2"：
     • preg_replace 的第二个参数是替换字符串，我们并不想替换，只想提取，所以这里用 \\2 来引用正则表达式中*第二个捕获组 `(.?)`** 的内容，也就是图片的URL。
4. @me：这是DedeCMS模板引擎中的一个特殊变量，代表当前正在处理的数据（在这里就是 [field:body/] 的内容）。
5. alt="[field:title function='html2text(@me)'/]"：为图片添加 alt 属性，这有助于SEO。html2text 函数可以将HTML标题转换为纯文本。
6. width="200" height="150"：建议给图片设置固定的宽高，防止页面布局错乱。

使用文章缩略图 {dede:litpic/} (最简单、最规范)

如果你的文章在发布时,已经通过“高级选项” -> “缩略图”上传或指定了图片，那么直接调用缩略图字段是最高效、最规范的做法。

适用场景：

• 后台发布文章时已经填写了缩略图。
• 对性能有要求,不希望在前端进行复杂的正则匹配。

代码示例：

{dede:list pagesize='10'}
    <li>
        <!-- 直接调用文章缩略图 -->
        <img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]" width="200" height="150">
        <!-- 其他字段调用 -->
        <a href="[field:arcurl/]">[field:title/]</a>
        <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
    </li>
{/dede:list}

代码解析：

• [field:litpic/]：这个标签直接调用文章在数据库 dede_archives 表中 litpic 字段存储的缩略图路径。
• 优点：效率极高，代码简洁。
• 缺点：依赖于后台手动设置，如果文章没有设置缩略图，这里可能会显示一个默认的或空白的图片路径。

自定义函数 (功能最强大、可扩展性最好)

当你需要更复杂的逻辑时,如果缩略图存在则用缩略图，否则从内容里取”，或者需要对图片进行裁剪、加水印等处理，最好的方式是自定义一个PHP函数。

适用场景：

• 需要组合多种逻辑判断。
• 需要对图片进行统一处理（如裁剪、改变大小）。
• 代码更清晰,易于维护。

操作步骤：

第一步：在include/common.func.php中添加自定义函数

打开 /include/common.func.php 文件，在文件末尾 ?> 之前添加以下代码：

/**
 * 获取文章第一张图或缩略图
 * @param string $body 文章内容
 * @param string $litpic 文章缩略图
 * @return string 图片URL
 */
function GetFirstImg($body, $litpic = '') {
    // 1. 如果缩略图存在且不为空，则优先使用缩略图
    if (!empty($litpic) && $litpic != '/images/defaultpic.gif') {
        return $litpic;
    }
    // 2. 如果缩略图不存在，则从文章内容中提取第一张图
    preg_match_all('/<img.*?src="(.*?)".*?>/i', $body, $matches);
    if (!empty($matches[1][0])) {
        return $matches[1][0];
    }
    // 3. 如果以上都没有，返回一个默认图片
    return '/images/defaultpic.gif';
}

代码解析：

1. 这个函数接收两个参数：$body）和 $litpic（缩略图）。
2. 它首先检查 $litpic 是否存在且不是织梦的默认占位图，如果是，则直接返回缩略图路径。
3. 如果没有缩略图,则使用 preg_match_all 提取内容中所有的 <img> 标签的 src 属性，并返回第一个。
4. 如果文章里一张图片都没有,则返回一个你指定的默认图片路径（织梦自带的是 /images/defaultpic.gif）。

第二步：在列表页模板中调用该函数

现在你可以在列表页模板中非常方便地调用这个函数。

{dede:list pagesize='10'}
    <li>
        <!-- 调用我们自定义的函数，传入 body 和 litpic 字段 -->
        <img src="[field:body function='GetFirstImg(@me, litpic)'/]" alt="[field:title function='html2text(@me)'/]" width="200" height="150">
        <!-- 其他字段调用 -->
        <a href="[field:arcurl/]">[field:title/]</a>
        <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
    </li>
{/dede:list}

代码解析：

• [field:body function='GetFirstImg(@me, litpic)'/]：
  • @me 在这里代表了 [field:body/] 的值，作为第一个参数传递给 GetFirstImg 函数。
  • litpic 是第二个参数，这里DedeCMS会自动将当前文章的 litpic 字段值传递进去。

总结与建议

给你的建议：

• 新手或快速实现：直接使用 方法一，它解决了80%的需求。
• 追求规范和性能：如果你的工作流程保证了每篇文章都有缩略图，直接使用 方法二。
• 专业开发：强烈推荐使用 方法三，它虽然多了一步，但为未来的功能扩展和维护打下了坚实的基础，是专业开发的最佳实践。