页如何调用图片缩略图？

使用官方自带的 {dede:field.body/} 标签（最简单）

这是最直接的方法，直接在内容页模板中调用 body 字段，DedeCMS 会自动提取其中的第一张图片作为缩略图。

适用场景：只需要快速显示文章中的第一张图片，不关心图片尺寸、样式等。

代码示例： 页模板文件（通常是 article_article.htm）中,将以下代码插入到你想要显示缩略图的位置：

{dede:field.body/}

工作原理： {dede:field.body/} 会输出文章的正文内容，DedeCMS 的底层机制会自动处理这个标签，如果文章正文中 <img> 标签，它会提取第一个 <img> 标签的 src 属性值,并直接输出。

优点：

• 使用极其简单,无需额外设置。

缺点：

• 不可控：你无法控制显示的图片尺寸,它会以原始尺寸显示。
• 样式单一：无法添加自定义的 CSS 类，img-responsive、rounded 等。
• 可能包含其他属性：输出的不仅仅是 src，可能还包含 width、height、style 等原始属性,影响页面布局。
• 依赖性强：完全依赖文章正文的第一张图片，如果文章没有图片或图片在代码后面,就无法显示。

使用自定义函数（最推荐，功能最强大）

这种方法通过自定义一个 PHP 函数，来精确地获取、处理并输出缩略图，你可以完全控制图片的路径、尺寸、样式等,是目前最主流和最灵活的解决方案。

实现步骤：

第 1 步：创建自定义函数文件

1. 打开你的 DedeCMS 根目录。
2. 找到并打开 /include/extend.func.php 文件，如果这个文件不存在,请手动创建一个。
3. 在这个文件中，添加以下 PHP 函数代码：

/**
 * 获取文章正文第一张图片路径
 * @param string $body 文章正文内容
 * @param string $prefix 图片路径前缀（如：/uploads/）
 * @return string 图片路径，如果没有则返回默认图片
 */
function GetFirstImg($body, $prefix = ''){
    // 如果内容为空，则返回默认图片
    if(empty($body)) return $prefix.'img/default.jpg';
    // 匹配 img 标签的正则表达式
    $pattern = "/<img.*?src=[\'|\"](.*?)[\'|\"].*?[\/]?>/i";
    preg_match_all($pattern, $body, $matches);
    // 如果找到了图片
    if(isset($matches[1][0]) && !empty($matches[1][0])){
        // 判断是否是绝对路径，如果不是，则加上前缀
        if(strpos($matches[1][0], 'http') !== 0){
            return $prefix . $matches[1][0];
        }
        return $matches[1][0];
    }
    // 如果没有找到图片，则返回默认图片
    return $prefix.'img/default.jpg';
}

代码解释：

• 这个函数接收两个参数：$body（文章正文）和 $prefix（可选的图片路径前缀）。
• 它使用正则表达式 preg_match_all 来查找正文中的所有 <img> 标签的 src 属性。
• isset($matches[1][0]) 判断是否找到了至少一张图片。
• strpos($matches[1][0], 'http') !== 0 判断图片路径是否为完整的网络地址，如果不是，就拼接上前缀（uploads/）,防止图片路径错误。
• 重要：请确保你的服务器上有一个默认图片，/img/default.jpg，当文章没有图片时就会显示它,你需要提前创建这个图片并放到相应目录。

第 2 步：在内容页模板中调用函数

回到你的内容页模板文件（article_article.htm），使用 {dede:field} 标签配合 function 属性来调用我们刚刚创建的函数。

代码示例：

<!-- 调用函数并输出图片 -->
<img src="{dede:field.body function='GetFirstImg(@me, "/uploads/")'/}" alt="{dede:field.title/}" class="img-thumbnail" />
<!-- 如果你不需要前缀，可以这样写 -->
<img src="{dede:field.body function='GetFirstImg(@me)'/}" alt="{dede:field.title/}" class="img-thumbnail" />

代码解释：

• {dede:field.body}：获取文章正文内容。
• function='GetFirstImg(@me, "/uploads/")'：这是关键部分。
  • function='...'：表示要对这个字段执行一个自定义函数。
  • GetFirstImg：是我们第一步创建的函数名。
  • @me：是 DedeCMS 的一个特殊变量，代表当前标签（这里是 {dede:field.body}）的值,也就是文章正文内容。
  • "/uploads/"：是传递给 GetFirstImg 函数的第二个参数，即图片路径前缀。请根据你的网站实际情况修改这个路径！
• alt="{dede:field.title/}"：为图片添加 alt 属性，这是 SEO 的最佳实践,通常使用文章标题。
• class="img-thumbnail"：添加一个 Bootstrap 的 CSS 类，让图片有圆角和边框，你可以换成任何你需要的 CSS 类，如 class="my-article-img"。

总结与对比

最终建议： 对于任何正式的网站项目，强烈推荐使用方法二（自定义函数），虽然前期需要多写几行代码，但它带来的灵活性、可控性和对 SEO 的友好性是方法一无法比拟的,能让你在后期的网站维护和样式调整中省去很多麻烦。