织梦列表页缩略图如何正确调用？

使用系统自带的 litpic 标签（最基础、最推荐）

这是最直接、最简单的方法，适用于绝大多数情况，织梦的文章默认字段中就包含了缩略图路径 litpic。

适用场景：

• 你上传文章时，已经通过“远程图片本地化”或“选择图片”等方式,为文章设置了缩略图。
• 列表页需要显示每篇文章的缩略图。

代码示例：

在列表模板文件 list_*.htm 中（list_article.htm），使用 field 标签来调用 litpic 字段。

{dede:list pagesize='10'}
    <li>
        <!-- 1. 调用缩略图 -->
        <a href="[field:arcurl/]">
            <img src="[field:litpic/]" alt="[field:title function='htmlspecialchars(@me)'/]" />
        </a>
        <!-- 2. 调用文章标题 -->
        <a href="[field:arcurl/]">[field:title/]</a>
        <!-- 3. 调用简介 -->
        [field:description function='cn_substr(@me, 100)'/]...
    </li>
{/dede:list}

代码解析：

• [field:litpic/]：直接输出文章的缩略图路径。
• [field:arcurl/]：输出文章的链接地址。
• [field:title function='htmlspecialchars(@me)'/]：输出文章标题，并用 htmlspecialchars 函数处理，防止XSS攻击，并作为 img 标签的 alt 属性,这对SEO非常重要。

自动提取文章第一张图为缩略图（非常实用）

有时候我们上传文章时忘记设置缩略图，或者希望文章中的第一张图片自动成为缩略图,这时就需要使用自定义函数来实现。

适用场景：

• 希望自动从文章内容（body字段）中提取第一张图片作为缩略图。
• 文章没有设置 litpic,但仍需在列表页显示图片。

实现步骤：

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

1. 打开织梦的 /include/extend.func.php 文件。
2. 在文件末尾的 ?> 之前,添加以下PHP代码：

/**
 * 自动提取文章第一张图为缩略图
 * @param string $body 文章内容
 * @param int $imgwidth 图片宽度
 * @param int $imgheight 图片高度
 * @return string 图片路径
 */
function GetFirstImg($body, $imgwidth = 268, $imgheight = 160)
{
    if (empty($body)) {
        return ''; // 如果文章内容为空，返回空字符串
    }
    // 匹配 img 标签的正则表达式
    $pattern = "/<img.*?src=[\'|\"](.*?)[\'|\"].*?[\/]?>/i";
    preg_match_all($pattern, $body, $matches);
    if (isset($matches[1]) && !empty($matches[1])) {
        // 获取第一张图片的路径
        $imgsrc = $matches[1][0];
        // 检查是否是外部图片，如果是，则返回原图（或根据需要处理）
        if (strpos($imgsrc, 'http') === 0) {
            return $imgsrc;
        }
        // 如果是内部图片，则返回完整的URL路径
        // 织梦的 $cfg_basehost 是网站根目录URL
        global $cfg_basehost;
        return $cfg_basehost . $imgsrc;
    }
    // 如果没有找到图片，可以返回一个默认图片
    return '/images/default.jpg'; // 请确保这个默认图片存在
}

第2步：在列表模板中调用

在列表模板 list_*.htm 中，使用 {dede:list} 标签的 function 属性来调用刚刚创建的函数。

{dede:list pagesize='10'}
    <li>
        <!-- 调用自定义函数，自动获取第一张图，并设置默认宽高 -->
        <a href="[field:arcurl/]">
            <img src="{dede:field.body function='GetFirstImg(@me, 268, 160)'/}" alt="[field:title function='htmlspecialchars(@me)'/]" />
        </a>
        <a href="[field:arcurl/]">[field:title/]</a>
        [field:description function='cn_substr(@me, 100)'/]...
    </li>
{/dede:list}

代码解析：

• {dede:field.body function='GetFirstImg(@me, 268, 160)'/}：
  • dede:field.body：获取文章内容（body字段）。
  • function='GetFirstImg(@me, 268, 160)'：将获取到的文章内容（@me代表当前值）作为参数，传递给 GetFirstImg 函数，函数会返回图片路径,并显示在这里。
  • 268, 160：是传递给函数的宽度和高度参数（虽然在这个函数示例中没用到，但可以扩展函数以支持缩放）。

通过修改 arclist 标签参数调用（适用于首页等）

如果你想在首页、频道页等非列表页调用缩略图，通常使用 {dede:arclist} 标签,它本身就提供了强大的缩略图调用参数。

适用场景：

• 在首页、栏目首页等调用文章列表并显示缩略图。

代码示例：

{dede:arclist typeid='1' titlelen='30' row='10'}
    <li>
        <!-- 1. 调用缩略图，并设置固定大小 -->
        <a href="[field:arcurl/]">
            <img src="[field:litpic/]" alt="[field:title/]" width="268" height="160" />
        </a>
        <!-- 2. 调用标题 -->
        <a href="[field:arcurl/]">[field:title/]</a>
        <!-- 3. 调用时间 -->
        [field:pubdate function='strftime("%Y-%m-%d", @me)'/]
    </li>
{/dede:arclist}

arclist 标签中与缩略图相关的常用参数：

• innertext：单条记录的模板,可以自定义HTML结构。
• litpic：是否调用缩略图，默认为 yes，可以设置 no 来不调用。
• imgwidth：缩略图宽度。
• imgheight：缩略图高度。
• type：图片来源，image 表示文章第一张图，litpic 表示后台设置的缩略图。

示例：强制使用文章第一张图

{dede:arclist type='image' imgwidth='268' imgheight='160' row='5'}
    <a href="[field:arcurl/]" title="[field:title/]">
        <img src="[field:litpic/]" alt="[field:title/]" />
    </a>
{/dede:arclist}

常见问题与注意事项

1. 图片路径问题（404错误）

   • 原因：织梦存储的图片路径可能是相对路径（如 /uploads/2025/10/xx.jpg）,直接使用可能会因为网站根目录配置问题导致404。
   • 解决方案：
     • 最佳实践：使用 {dede:global.cfg_basehost/} 拼接出绝对路径。

       <img src="{dede:global.cfg_basehost/}/[field:litpic/]" alt="[field:title/]" />

     • 在函数中处理：像方法二中的 GetFirstImg 函数那样，自动拼接上 $cfg_basehost。

2. 缩略图尺寸不统一

   • 原因：上传的图片尺寸不一,导致列表页排版混乱。
   • 解决方案：
     • CSS控制：在 img 标签上使用 CSS 设置固定宽高，图片会自动拉伸或裁剪（object-fit 属性可以更好地控制）。

       .list-img img {
           width: 268px;
           height: 160px;
           object-fit: cover; /* 保持比例，覆盖整个区域，超出部分裁剪 */
       }

     • 服务器缩略图：更高级的做法是使用织梦的缩略图功能或配置服务器（如Nginx的image_filter）来动态生成固定尺寸的缩略图,但配置较复杂。

3. 没有缩略图时显示默认图片

   • 需求：当 litpic 为空时，显示一张默认图片,避免空白。
   • 解决方案：使用 if 条件语句。

     {dede:list}
         <li>
             <a href="[field:arcurl/]">
                 [field:litpic runphp='yes']
                     if(@me == '') @me = '/images/nothumb.jpg';
                     else @me = '<img src="' . @me . '" alt="[field:title function="htmlspecialchars(@me)"/]" />';
                 [/field:litpic]
             </a>
             ...
         </li>
     {/dede:list}

     注意：runphp='yes' 会将字段的值作为PHP代码执行，这里我们判断 litpic 是否为空，如果为空则设置默认图片路径，否则输出标准的 img 标签。请确保 /images/nothumb.jpg 这个默认图片存在。

对于绝大多数列表页，强烈推荐使用方法一，如果对自动化要求高，方法二是最佳选择,希望这些详细的解释能帮助您完美解决织梦列表页缩略图的调用问题！