dede arclist缩略图调用如何实现？

litpic

在 arclist 标签中，缩略图是通过底层字段 litpic 来调用的。

基本语法：

[field:litpic/]

这个标签会直接输出文章在后台设置的缩略图路径。

完整的 arclist 调用示例

下面是一个最常用、最完整的 arclist 调用代码，它包含了标题、链接和缩略图。

{dede:arclist row='10' titlelen='30' typeid='1' orderby='pubdate'}
    <li>
        <!-- 1. 调用缩略图，并添加链接 -->
        <a href="[field:arcurl/]" title="[field:title/]">
            <img src="[field:litpic/]" alt="[field:title/]" width="200" height="150" />
        </a>
        <!-- 2. 调用文章标题 -->
        <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
        <!-- 3. 调用文章摘要（可选） -->
        <p>[field:description function='cn_substr(@me, 100)'/]...</p>
    </li>
{/dede:arclist}

代码详解

让我们逐行解析上面的代码：

1. {dede:arclist ...}

   • 这是 arclist 标签的开始,用于调用文章列表。
   • row='10': 表示调用 10 条文章记录。
   • titlelen='30': 表示标题最多显示 30 个字符，超出部分用省略号（需要在CSS中处理）。
   • typeid='1': 表示只调用 ID 为 1 的栏目（及其子栏目）下的文章，如果需要调用所有栏目,可以删除此属性。
   • orderby='pubdate': 表示按发布时间倒序排列，其他常用值：click (按点击量), id (按文章ID)。

2. <a href="[field:arcurl/]" ...>

   • [field:arcurl/]: 这是文章的完整链接地址。

3. <img src="[field:litpic/]" ... />

   • [field:litpic/]: 这就是调用缩略图的核心,它会输出文章的缩略图URL。
   • alt="[field:title/]": 为图片添加 alt 属性，这既是SEO优化的需要，也是无障碍访问的好习惯。alt 文本使用文章标题。
   • width="200" height="150": 直接设置图片的显示尺寸。注意：这种方式可能会导致图片变形，更推荐的方法是使用CSS来控制图片容器的尺寸,让图片自适应。

4. [field:title/]

   
   （图片来源网络，侵删）

   调用文章标题。

5. [field:description function='cn_substr(@me, 100)'/]

   • [field:description/] 调用文章摘要。
   • function='cn_substr(@me, 100)' 是一个函数，表示截取摘要的前 100 个中文字符。@me 代表当前字段的值。

进阶用法与常见问题

缩略图不存在时显示默认图片

如果文章没有上传缩略图，[field:litpic/] 会输出一个空路径或默认的 "未缩略图" 图片，我们可以使用 if 条件来判断，如果缩略图为空,则显示一个默认图片。

{dede:arclist row='10' titlelen='30' typeid='1'}
    <li>
        <a href="[field:arcurl/]" title="[field:title/]">
            <!-- 使用 if 判断，litpic 为空则显示默认图 -->
            [field:litpic runphp='yes']
                if(@me == '') {
                    @me = '/images/default.jpg'; // 设置你的默认图片路径
                } else {
                    @me = @me;
                }
            [/field:litpic]
            <img src="[field:litpic/]" alt="[field:title/]" />
        </a>
        <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
    </li>
{/dede:arclist}

更简洁的写法 (推荐)：

{dede:arclist row='10' titlelen='30' typeid='1'}
    <li>
        <a href="[field:arcurl/]" title="[field:title/]">
            <img src="[field:litpic function='(@me ? @me : "/images/default.jpg")'/]" alt="[field:title/]" />
        </a>
        <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
    </li>
{/dede:arclist}

这种写法使用了 function，@me (litpic的值) 存在，就使用它；否则,就使用默认图片路径。

调用多张图（首图）中的某一张

你可能需要从文章内容中提取的第一张图片作为缩略图，这需要用到 body 字段和正则表达式。

注意：此方法需要在后台开启“获取远程图片”和“自动提取第一个图片为缩略图”选项,或者在发布文章时手动设置。

{dede:arclist row='10' titlelen='30' typeid='1'}
    <li>
        <a href="[field:arcurl/]" title="[field:title/]">
            <!-- 从文章内容 body 中提取第一张图 -->
            [field:body function='preg_match("/<img.*?src=[\'|\"](.*?)[\'|\"].*?>/i", $row[body], $matches) ? $matches[1] : "/images/default.jpg";'/]
            <img src="[field:body function='preg_match("/<img.*?src=[\'|\"](.*?)[\'|\"].*?>/i", $row[body], $matches) ? $matches[1] : "/images/default.jpg";'/]" alt="[field:title/]" />
        </a>
        <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
    </li>
{/dede:arclist}

这段代码比较复杂，它的意思是：body 字段中能找到 <img> 标签，就提取出它的 src 属性值,否则就显示默认图。

缩略图不显示（最常见的问题）

[field:litpic/] 调用不出来图片,请按以下步骤排查：

1. 检查后台文章：进入“内容管理” -> “文档列表”，找到你调用列表中的任意一篇文章，检查它是否已经成功上传并保存了缩略图,这是最根本的原因。
2. 检查标签拼写：确保你写的是 litpic，而不是 litpic (少一个字母) 或其他错误拼写。
3. 检查目录权限：确保你的网站目录（如 /uploads/）有写入权限,否则缩略图可能无法上传或生成。
4. 检查缓存：DedeCMS有强大的缓存机制，修改模板后，请务必在后台的“系统” -> “一键更新网站” -> “更新HTML”中更新一下栏目页和首页,或者直接清除缓存。
5. 检查图片路径：右键点击页面上不显示的图片，选择“在新标签页中打开链接”，看看是否能直接访问到图片，如果能，说明是CSS样式问题（如 display: none）；如果路径错误,则需要检查步骤1和2。

希望这份详细的指南能帮助你顺利地在 DedeCMS 中使用 arclist 调用缩略图！