dede首页缩略图标签怎么用？

在 DedeCMS 中，首页调用文章缩略图主要通过两个核心标签配合使用：{dede:arclist} 和 [field:picname/]。

核心标签解析

{dede:arclist} - 文章列表标签

这是用来在首页调用文章列表的万能标签,要实现缩略图功能，需要为其添加几个关键参数。

常用参数：

• typeid: 调用指定栏目ID下的文章，如果为空或不指定，则调用所有栏目的文章。
• row: 调用文章的数量，len`: 标题长度，截取标题多少个字符。
• infolen: 描述长度，截取文章摘要多少个字符。
• imgwidth: 缩略图宽度。
• imgheight: 缩略图高度。
• listtype: 设置为 image 时，会强制调用文章有缩略图的内容。
• orderby: 排序方式，如 pubdate (发布日期)、click (点击量)、id (文章ID) 等。

[field:picname/] - 缩略图地址字段

这个标签必须放在 {dede:arclist} 循环内部，用于获取当前文章的缩略图路径。

基础使用示例

这是最常用、最基础的首页缩略图调用方法。

代码示例：

{dede:arclist row='6' titlelen='30' imgwidth='200' imgheight='150'}
    <dl>
        <dt>
            <!-- [field:picname/] 就是缩略图标签 -->
            <a href="[field:arcurl/]" title="[field:title/]">
                <img src="[field:picname/]" alt="[field:title/]" />
            </a>
        </dt>
        <dd>
            <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
        </dd>
    </dl>
{/dede:arclist}

代码解释：

• {dede:arclist row='6' ...}: 表示调用6篇文章。
• imgwidth='200' imgheight='150': 表示为这6篇文章都生成或指定200x150像素的缩略图。
• <a href="[field:arcurl/]">: [field:arcurl/] 是文章的链接地址。
• <img src="[field:picname/]" />: 这就是核心的缩略图标签，src 属性的值就是缩略图的路径。
• alt="[field:title/]": 为了SEO和用户体验，图片的 alt 属性应该设置为文章标题。

进阶与常用技巧

在实际应用中,我们常常会遇到一些更复杂的需求，比如判断是否有缩略图、调用特定栏目等。

技巧1：只显示有缩略图的文章

如果你的网站内容很多,有些文章没有上传缩略图，希望只显示有缩略图的文章，可以使用 listtype='image' 参数。

{dede:arclist listtype='image' row='6' titlelen='30' imgwidth='200' imgheight='150'}
    <div class="news-item">
        <a href="[field:arcurl/]" title="[field:title/]">
            <img src="[field:picname/]" alt="[field:title/]" />
            <h3>[field:title/]</h3>
        </a>
    </div>
{/dede:arclist}

这样,即使文章内容里有图片，但如果没有在“缩略图”字段上传图片，这条文章也不会被调用出来。

技巧2：为缩略图添加默认图片

当某些文章没有缩略图时,图片位置会显示一个破损的图标，我们可以使用 if 标签来判断，如果没有缩略图，则显示一个默认的图片。

{dede:arclist row='6' titlelen='30' imgwidth='200' imgheight='150'}
    <div class="news-item">
        <a href="[field:arcurl/]" title="[field:title/]">
            <!-- 使用 if 判断缩略图是否存在 -->
            [field:picname runphp='yes']
                if(@me == '') @me = '/default/images/default_thumb.jpg'; // 默认图片路径
                else @me = @me;
            [/field:picname]
            <img src="[field:picname/]" alt="[field:title/]" />
        </a>
        <h3><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></h3>
    </div>
{/dede:arclist}

代码解释： [field:picname runphp='yes']...[/field:picname] 是 DedeCMS 的 PHP 代码执行功能。

• if(@me == ''): @me 代表当前字段的值，也就是 [field:picname/] 的值，这句代码判断缩略图路径是否为空。
• @me = '/default/images/default_thumb.jpg': 如果为空，就将 @me 的值设置为你默认图片的路径。
• else @me = @me;: 如果不为空，则保持原值不变。

技巧3：调用指定栏目（栏目ID）的缩略图

假设你想调用首页某个特定模块（产品展示”栏目，ID为 3）的缩略图，只需加上 typeid 参数。

<!-- 假设“产品展示”栏目的ID是3 -->
<h2>产品展示</h2>
<div class="product-list">
    {dede:arclist typeid='3' row='4' titlelen='20' imgwidth='150' imgheight='150'}
        <div class="product-item">
            <a href="[field:arcurl/]" title="[field:title/]">
                <img src="[field:picname/]" alt="[field:title/]" />
            </a>
            <p>[field:title/]</p>
        </div>
    {/dede:arclist}
</div>

重要前提：如何为文章添加缩略图？

无论标签写得多么完美,如果文章本身没有缩略图，标签也无法调用出来，为文章添加缩略图有两个主要方法：

方法1：在后台手动上传（最常用）

1. 登录 DedeCMS 后台。
2. 进入“[核心]” -> “[内容维护]” -> “[批量维护]” -> “[文档关键词自动维护]”。
3. 找到“文档维护”选项卡下的“选择文档”。
4. 选择你需要添加缩略图的文章（可以全选），然后点击“确定”。
5. 在弹出的页面中,找到“缩略图”这一栏，点击“上传”按钮，从本地上传图片即可。
6. 上传完成后,点击“保存”按钮。

方法2：利用文章内容中的第一张图自动生成

这是一个非常便捷的功能,可以自动将文章内容（body 字段）中的第一张图片作为缩略图。

1. 进入后台的“[系统]” -> “[系统基本参数]”。
2. 在左侧菜单选择“附件设置”。
3. 找到“自动提取关键字的第一张图片为缩略图”选项，选择“是”。
4. 保存设置。

注意： 此方法只对 新发布 的文章有效，对于已发布的旧文章，需要重新编辑并保存一次，才能生效。

常见问题排查 (FAQ)

Q: 为什么我用了缩略图标签，但是图片不显示？ A: 检查以下几点：

1. 文章是否有缩略图？ 进入文章编辑页查看“缩略图”字段是否已上传图片。
2. 图片路径是否正确？ 右键点击图片，选择“在新标签页中打开图片”，看是否能正常显示图片，如果路径错误（如404），说明上传或保存时出了问题。
3. imgwidth 和 imgheight 是否冲突？ 如果图片原始尺寸和设置尺寸差异过大，可能导致样式错乱，但图片本身应该会显示。
4. CSS 样式问题？ 检查 CSS 中是否有 display:none 或其他隐藏图片的样式。

Q: 缩略图尺寸不统一，如何解决？ A: 在 {dede:arclist} 标签中设置 imgwidth 和 imgheight 参数，系统会自动将图片裁剪或缩放到指定尺寸，你也可以在后台上传时就统一处理成固定尺寸的图片。

Q: 我想调用文章内容里的图片，而不是缩略图，怎么办？ A: 这需要更复杂的 PHP 代码来解析文章内容，提取第一张或任意一张图片的路径，这超出了 [field:picname/] 的范围，通常需要二次开发或使用更灵活的标签（如 {ded:sql}）。

希望这份详细的指南能帮助你完全掌握 DedeCMS 首页缩略图标签的使用！