dede缩略图标签如何正确调用？

最基础和最常用的调用标签

这是在文章列表页（如 arclist.htm）或文章内容页（如 article_article.htm）中调用缩略图最直接的方法。

标签语法：

{dede:field name='litpic'/}

参数说明：

• name='litpic'：这是固定的，litpic 字段在数据库中专门用来存储缩略图的路径。
• 这个标签会直接输出图片的完整路径,/uploads/210101/1-2101011H5060.png。

使用场景示例：

在文章列表页 (arclist.htm) 中使用：

通常我们会把它放在 <a> 标签里，作为文章的封面链接。

{dede:arclist titlelen='30' row='10'}
    <li>
        <!-- 将缩略图作为文章链接的封面 -->
        <a href="[field:arcurl/]">
            <img src="[field:litpic/]" alt="[field:title/]" />
        </a>
        <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
        <p>[field:description function='cn_substr(@me,100)'/]...</p>
    </li>
{/dede:arclist}

页 (article_article.htm) 中使用：

在文章详情页,你可能想在文章标题上方或下方显示一张大图。

<h1>{dede:field.title/}</h1>
<!-- 在文章标题后显示缩略图 -->
{dede:field name='litpic'/}
<p>发布时间：{dede:field.pubdate function='GetDateTimeMk(@me)'/}</p>
<hr>
{dede:field.body/}

进阶用法：带默认图片和样式的调用

在实际开发中,我们通常会遇到两个问题：

1. 某些文章没有上传缩略图,会显示一个破损的图片或空白。
2. 我们希望给图片添加固定的样式,如宽度、高度、CSS类等。

解决方案：使用 if 判断和 default 属性

判断是否有缩略图并设置默认图：

使用 if 标签可以判断 litpic 是否为空，如果为空则显示一个默认的图片。

{dede:if field='litpic' value='yes'}
    <img src="{dede:field name='litpic'/}" alt="{dede:field.title/}" />
{else}
    <!-- 如果没有缩略图，则显示默认图片 -->
    <img src="/images/default.jpg" alt="{dede:field.title/}" />
{/dede:if}

或者,更简洁的 default 属性（适用于 arclist 标签内）：

{dede:arclist row='5'}
    <img src="[field:litpic default='/images/default.jpg'/]" alt="[field:title/]">
{/dede:arclist}

给缩略图添加样式（CSS类）：

直接在标签中写样式是不规范的,推荐使用 CSS 类，但如果必须内联，可以这样：

<!-- 方法一：使用CSS类（推荐） -->
{dede:field name='litpic'/}
<!-- 在CSS文件中定义 .article-img { width: 200px; height: 150px; } -->
<!-- 方法二：内联样式（不推荐，但简单） -->
<img src="{dede:field name='litpic'/}" style="width:200px; height:150px;" alt="{dede:field.title/}" />

arclist 标签中调用缩略图

arclist 是调用文章列表的核心标签，它在调用缩略图时有一些特殊的属性，非常实用。

标签语法：

{dede:arclist ...}
    [field:litpic/]
{/dede:arclist}

常用属性：

综合示例：

假设我们想调用5篇文章,强制显示缩略图，如果没有缩略图则使用系统默认的“小图”默认图（在后台-系统-基本参数中设置）。

{dede:arclist row='5' titlelen='30' orderby='pubdate' litpic='yes' type='1'}
    <div class="news-item">
        <a href="[field:arcurl/]" title="[field:title/]">
            <!-- 调用大图，并使用默认图 -->
            <img src="[field:litpic/]" alt="[field:title/]" />
        </a>
        <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
        <span>[field:pubdate function='MyDate('Y-m-d', @me)'/]</span>
    </div>
{/dede:arclist}

常见问题与解决方案

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

原因1：文章没有上传缩略图。

• 解决方案：检查后台编辑文章时，是否在“高级选项”中上传了缩略图，或者在 arclist 中添加 defaultpic 属性显示默认图。

原因2：图片路径错误，图片不存在。

• 解决方案：检查 uploads 目录下是否有对应的图片文件，有时是上传失败或服务器权限问题导致文件丢失。

原因3：标签写错了。

• 解决方案：仔细检查标签拼写，litpic 不要写成 ltpic 或 litpic/ 多了斜杠。

原因4：CSS 样式问题。

• 解决方案：图片可能被隐藏了（display:none 或 width:0），检查你的CSS文件。

问题2：如何调用不同尺寸的缩略图？

DedeCMS 在上传缩略图时，会自动生成三种尺寸（大、中、小），你可以通过 type 属性来调用。

• type='1'：调用大图
• type='2'：调用中图
• type='3'：调用小图

示例：

{dede:arclist row='5' type='2'}
    <!-- 调用中尺寸的缩略图 -->
    <img src="[field:litpic/]" alt="[field:title/]">
{/dede:arclist}

问题3：如何调用文章第一张图为缩略图？

如果文章没有上传缩略图,但你想自动将文章正文里的第一张图片作为缩略图显示，你需要修改程序或使用特定插件。

方法：修改系统文件（有一定风险，操作前请备份！）

1. 打开 /include/helpers/extend.helper.php 文件。
2. 在文件末尾,?> 之前，添加以下函数：

if ( ! function_exists('GetFirstImg'))
{
    function GetFirstImg($body)
    {
        if (preg_match_all("/<img([^>]*)\s*src=('|\")([^'\"]+)('|\")/i", $body, $matches)) {
            return $matches[3][0];
        }
        return '';
    }
}

3. 在模板中调用： 这个函数返回的是正文第一张图的地址，所以你需要结合 if 判断来使用。

{dede:field name='body' function='GetFirstImg(@me)'/}

完整模板示例：

{dede:if field='litpic' value='yes'}
    <!-- 如果有上传缩略图，优先使用上传的 -->
    <img src="{dede:field name='litpic'/}" alt="{dede:field.title/}">
{else}
    <!-- 如果没有，则调用正文第一张图 -->
    {dede:field name='body' function='GetFirstImg(@me)'/}
    {if $fields['bodyimg']} <!-- 再次判断，确保正文有图 -->
        <img src="{dede:field name='body' function='GetFirstImg(@me)'/}" alt="{dede:field.title/}">
    {else}
        <!-- 如果正文也没有图，则显示最终默认图 -->
        <img src="/images/no-image.jpg" alt="{dede:field.title/}">
    {/if}
{/dede:if}

注意：直接修改核心文件不是最佳实践，升级网站时可能会被覆盖，建议使用DedeCMS的“自定义模型”或安装现成的插件来实现此功能。

希望这份详细的指南能帮助你解决 DedeCMS 缩略图调用的问题！