织梦详情页调用缩略图

上面的标签会直接输出一个完整的 <img> 标签，

<img src='/uploads/240318/1-24031Q12345.jpg' alt='文章标题' width='...' height='...' style='width:; height:; border:0px;' />

进阶用法：自定义图片样式

如果你需要给图片添加自定义的CSS类、控制大小等，可以使用 style 属性。

<!-- 给图片添加一个 'thumb-img' 的CSS类，并设置最大宽度为200px -->
{dede:field name='litpic' function='GetImage(@me, 1)'}
    <img src='{dede:field name='litpic'/}' alt='{dede:field.title/}' class='thumb-img' style='max-width: 200px;' />
{/dede:field}

注意：这种写法需要判断 litpic 是否为空，否则会显示一个空的 <img> 标签,方法一更简洁。

调用多图中的第一张图（备用方案）

你可能没有上传单张缩略图，而是在内容里上传了多图,并希望用多图的第一张作为缩略图展示。

代码示例：

{dede:field name='array' runphp='yes'}
    $dtp = new DedeTagParse();
    $dtp->LoadSource(@me);
    $litpic = $dtp->GetTag('litpic');
    $imgurls = $dtp->GetTag('imgurls');
    // 如果litpic不为空，优先使用litpic
    if(!empty($litpic)) {
        @me = $litpic;
    } 
    // 如果litpic为空，则从imgurls中提取第一张
    else if(!empty($imgurls)) {
        preg_match_all("/<img([^>]*)\s*src=['\"]([^'\"]*)['\"][^>]*>/i", $imgurls, $matches);
        if(isset($matches[2][0])) {
            @me = $matches[2][0];
        } else {
            @me = '';
        }
    } else {
        @me = '';
    }
    @me = GetImage(@me);
{/dede:field}

代码解析：

这段PHP代码逻辑是：

1. 获取文章的所有字段，存入 $array。
2. 分别提取 litpic（单图）和 imgurls（多图）字段。
3. 优先判断：litpic 有值,就使用它。
4. 其次判断：litpic 为空但 imgurls 有值，就用正则表达式从 imgurls 字符串中解析出第一张 <img> 标签的 src 路径。
5. 用 GetImage() 函数处理得到的路径。
6. @me = ... 将最终结果赋值给标签的输出。

这种方法非常灵活,能适应多种情况。

使用自定义函数（高级、灵活）

如果你想在多个模板中复用这个逻辑，或者需要更复杂的处理,可以创建一个自定义函数。

创建自定义函数文件

1. 打开织梦的 include/extend.func.php 文件（如果不存在，请自行创建）。
2. 在文件末尾添加如下PHP函数代码：

/**
 * 获取文章缩略图
 * 优先使用litpic，如果为空则从imgurls中获取第一张
 * @param string $imgurls 文章的多图字段值
 * @param string $litpic 文章的缩略图字段值
 * @return string 返回处理后的图片标签或空字符串
 */
function GetArticleFirstImg($imgurls = '', $litpic = '') {
    // 如果litpic不为空，优先使用litpic
    if (!empty($litpic)) {
        return GetImage($litpic);
    }
    // 如果litpic为空，则从imgurls中提取第一张
    if (!empty($imgurls)) {
        preg_match_all("/<img([^>]*)\s*src=['\"]([^'\"]*)['\"][^>]*>/i", $imgurls, $matches);
        if (isset($matches[2][0])) {
            return GetImage($matches[2][0]);
        }
    }
    // 如果都为空，可以返回一个默认图片或者空字符串
    // return '<img src="/images/default.jpg" alt="暂无图片" />';
    return '';
}

在模板中调用自定义函数

你可以在任何详情页模板中非常简洁地调用这个函数。

代码示例：

{dede:field name='litpic' function='GetArticleFirstImg(@me, @me)'/}

代码解析：

• function='GetArticleFirstImg(@me, @me)':
  • 我们调用了刚刚创建的 GetArticleFirstImg 函数。
  • 第一个 @me 传递的是 litpic 的值，作为函数的 $litpic 参数。
  • 第二个 @me 同样传递的是 litpic 的值，作为函数的 $imgurls 参数，虽然这里有点冗余，但为了函数接口的统一性，可以这样写，更精确的写法是分别获取两个字段,但这样调用最简单。

更精确的调用方式：

{dede:field name='imgurls' function='GetArticleFirstImg(@me, dede:field name='litpic'/)'/}

注意：在 function 参数里嵌套调用其他标签有时会不稳定，所以第一种传递两个 @me 的方法更常用。

常见问题与解决方案 (FAQ)

为什么我的缩略图不显示，或者显示不出来？

• 文章本身没有上传缩略图。
  • 解决：检查后台编辑文章时，是否在“高级选项”->“缩略图”中上传了图片，或者检查数据库 #@__archives 表中该文章的 litpic 字段是否为空。
• 图片路径错误，图片不存在。
  • 解决：检查 uploads 目录下是否存在你调用路径的图片，可能是上传失败或图片被移动/删除了。
• 标签写错。
  • 解决：仔细检查标签名称，litpic 不要写成 lithpic 或 pic。
• 模板缓存问题。
  • 解决：登录织梦后台 -> 系统 -> 一键更新缓存,然后更新一下你的页面。

如何给缩略图添加CSS样式或控制尺寸？

直接在 {dede:field} 标签外面包裹一个 <img> 标签,并添加你的属性。

<!-- 推荐方法：使用 function 输出完整标签，然后通过CSS控制 -->
{dede:field name='litpic' function='GetImage(@me, 1)'/}
<!-- 或者，如果你想完全控制HTML结构 -->
{dede:field name='litpic' function='str_replace("<img ", "<img class='my-class' style='max-width:100%;height:auto;' ", @me)'/}

上面的第二种方法，通过 str_replace 函数直接替换输出的 <img> 标签的字符串，添加自定义的 class 和 style。

我想调用文章内容里的第一张图怎么办？

这和方法二的“备用方案”类似，可以直接使用那段PHP代码,或者把它封装成一个更专门的函数。

直接在模板中使用（不推荐用于复杂逻辑，但可用）：

{dede:field.body runphp='yes'}
    $body = @me;
    preg_match_all("/<img([^>]*)\s*src=['\"]([^'\"]*)['\"][^>]*>/i", $body, $matches);
    if(isset($matches[2][0])) {
        @me = GetImage($matches[2][0]);
    } else {
        @me = ''; // 或者输出一个默认图片
    }
{/dede:field}

对于绝大多数用户，直接使用方法一中的 {dede:field name='litpic' function='GetImage(@me, 1)'/} 是最简单、最可靠的选择，如果遇到特殊需求,再考虑使用方法二的自定义函数。