织梦缩略图代码怎么调用？

核心标签

织梦调用缩略图的核心标签是 [field:picname/]。

这个标签会输出文章在后台设置的“缩略图”字段路径。

在首页、列表页调用文章缩略图

这是最常见的用法,通常与织梦的循环标签 {dede:arclist} 配合使用。

基础代码

{dede:arclist typeid='' row='10' titlelen='30'}
    <li>
        <a href="[field:arcurl/]">
            <!-- 核心缩略图调用代码 -->
            <img src="[field:picname/]" alt="[field:title/]" />
        </a>
        <a href="[field:arcurl/]">[field:title/]</a>
    </li>
{/dede:arclist}

代码解释：

• {dede:arilogy ...}: 这是一个循环标签，用于获取指定条件的文章列表。
• typeid='': 可选参数，指定要调用哪个栏目下的文章，留空表示调用所有栏目。
• row='10': 可选参数，指定要获取的文章数量，这里是10篇，len='30'`: 可选参数，截取文章标题的字符长度，防止标题过长影响布局。
• [field:arcurl/]: 获取文章的链接地址。
• [field:picname/]: 核心标签，获取文章的缩略图路径。
• [field:title/]: 获取文章的标题，通常用作img标签的alt` 属性，有利于SEO。

带样式的代码（推荐）

在实际开发中,我们通常会为图片添加一些样式，并处理图片不存在的情况。

{dede:arclist typeid='' row='10' titlelen='30'}
    <li>
        <a href="[field:arcurl/]" title="[field:title/]">
            <!-- 
              1. 使用 style="width:200px; height:150px;" 控制图片大小
              2. 使用 align="left" 让图片文字环绕
              3. 使用 alt="[field:title/]" 增加SEO友好度
            -->
            <img src="[field:picname/]" alt="[field:title/]" style="width:200px; height:150px;" />
        </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 模板），调用缩略图更简单，因为当前文章的数据是已知的。

基础代码

<article>
    <h1>[field:title/]</h1>
    <!-- 在文章顶部调用缩略图 -->
    <div class="article-main-img">
        <img src="[field:picname/]" alt="[field:title/]" />
    </div>
    <div class="article-content">
        [field:body/]
    </div>
</article>

常用技巧与高级用法

处理“没有缩略图”的情况

如果文章没有上传缩略图,直接调用 [field:picname/] 可能会显示一个破损的图标，我们可以使用 if 条件语句来判断。

{dede:arclist typeid='' row='10'}
    <li>
        <a href="[field:arcurl/]">
            <!-- 使用 if 判断，如果缩略图存在则显示，否则显示默认图 -->
            [field:picname runphp='yes']
                if(@me != '') {
                    @me = '<img src="' . @me . '" alt="[field:title/]" />';
                } else {
                    @me = '<img src="/images/default.jpg" alt="[field:title/]" />'; // 替换成你的默认图片路径
                }
            [/field:picname]
        </a>
        <a href="[field:arcurl/]">[field:title/]</a>
    </li>
{/dede:arclist}

代码解释：

• runphp='yes': 启用PHP运行功能。
• if(@me != ''): @me 变量代表了 [field:picname/] 的当前值，即缩略图路径，这里判断路径是否为空。
• 如果路径不为空,就生成一个带有真实缩略图的 <img>
• 如果路径为空,就生成一个带有默认图片的 <img>

{dede:arclist typeid='' row='10' addfields='body'}
    <li>
        <a href="[field:arcurl/]">
            <!-- 
              1. 使用 [field:imglink/] 获取图集第一张图片的链接
              2. 使用 [field:litpic/] 获取图集第一张图片的地址
            -->
            <img src="[field:litpic/]" alt="[field:title/]" />
        </a>
        <a href="[field:arcurl/]">[field:title/]</a>
    </li>
{/dede:arclist}

{dede:arclist typeid='' row='10' addfields='body'}
    <li>
        <a href="[field:arcurl/]">
            <!-- 使用PHP代码解析body中的第一张图片 -->
            [field:body runphp='yes']
                $dtp = new DedeTagParse();
                $dtp->SetNameSpace('field', '[', ']');
                $dtp->LoadSource(@me);
                $imgurl = $dtp->GetAtt('imgurl', 0); // 获取第一个imgurl属性
                if($imgurl != '') {
                    @me = '<img src="' . $imgurl . '" alt="[field:title/]" />';
                } else {
                    @me = '<img src="/images/default.jpg" alt="[field:title/]" />';
                }
            [/field:body]
        </a>
        <a href="[field:arcurl/]">[field:title/]</a>
    </li>
{/dede:arclist}