织梦首页如何调取缩略图？

调用最新文章的缩略图

这是最常见的需求,即在首页某个位置显示最新发布的文章的缩略图。

方法1：使用DedeCMS自带的arclist标签（推荐）

arclist是织梦最强大的列表标签，可以灵活地调用文章，并包含缩略图。

基本语法：

{dede:arclist row='5' titlelen='30' typeid=''}
    <li>
        <a href="[field:arcurl/]" title="[field:title/]">
            <img src="[field:litpic/]" alt="[field:title/]" />
        </a>
        <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
    </li>
{/dede:arclist}

参数详解：

• row='5'：表示调用5条文章记录，len='30'`：表示标题最多显示30个字符（汉字）。
• typeid=''：留空表示调用所有栏目，如果你想指定调用某个栏目的文章，就填入栏目ID，typeid='1'。
• [field:litpic/]：这是调用缩略图的核心标签，它会获取文章的“缩略图”字段。
• [field:title/]：调用文章标题。
• [field:arcurl/]：调用文章的完整链接地址。

完整示例（带样式）：

假设你想在首页右侧显示一个“最新图文”模块，每行显示一条，包含图片和标题。

<div class="latest-news">
    <h3>最新图文</h3>
    <ul>
        {dede:arclist row='5' titlelen='24' typeid=''}
        <li>
            <a href="[field:arcurl/]" class="img-link">
                <img src="[field:litpic/]" alt="[field:title/]" />
            </a>
            <a href="[field:arcurl/]" class="title-link">[field:title/]</a>
        </li>
        {/dede:arclist}
    </ul>
</div>

对应的CSS样式：

.latest-news { width: 300px; }
.latest-news h3 { border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 15px; }
.latest-news ul { list-style: none; padding: 0; }
.latest-news li { margin-bottom: 15px; overflow: hidden; } /* 清除浮动 */
.latest-news .img-link { float: left; margin-right: 10px; }
.latest-news .img-link img { width: 100px; height: 75px; object-fit: cover; } /* 控制图片大小和比例 */
.latest-news .title-link { display: block; line-height: 1.5; font-size: 14px; color: #333; text-decoration: none; }
.latest-news .title-link:hover { color: #0066cc; }

调用指定栏目（如“新闻”）下的缩略图

这个需求和方法1几乎一样,只需要在arclist标签中指定typeid即可。

步骤：

1. 找到栏目ID：登录织梦后台，进入“栏目管理”，找到你想要调用的栏目（新闻”），记下它的ID（比如是“2”）。
2. 使用typeid参数：在arclist标签中填入对应的ID。

代码示例：

<div class="news-list">
    <h3>新闻资讯</h3>
    <ul>
        {dede:arclist row='6' titlelen='30' typeid='2'}  <!-- 这里typeid='2' -->
        <li>
            <span class="date">[field:pubdate function="MyDate('Y-m-d', @me)"/]</span>
            <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
        </li>
        {/dede:arclist}
    </ul>
</div>

这个例子调用了ID为“2”的“新闻”栏目下的6条记录，并显示了发布日期和标题。

调用自定义图集的缩略图

图集和普通文章不同,它的缩略图调用方式略有区别。

方法1：调用图集列表，并显示封面图

图集的封面图就是文章的litpic，所以调用方式和方法一完全一样。

{dede:arclist row='4' titlelen='20' typeid='3'} <!-- 假设图集栏目ID是3 -->
    <div class="album-item">
        <a href="[field:arcurl/]">
            <img src="[field:litpic/]" alt="[field:title/]" />
        </a>
        <p>[field:title/]</p>
    </div>
{/dede:arclist}

方法2：在文章页/内容页调用图集内的所有图片

如果你想页显示这个图集内的所有图片，需要使用field

在文章模板（article_article.htm）中使用：

{dede:field name='body'/} <!-- 这是文章正文，里面可能已经有图集标签了 -->
<!-- 如果你需要在正文外单独调用图集的所有图片 -->
{dede:field name='imgurls' alt='图片集'}
    <li>
        <a href="[field:imgurl/]" target="_blank">
            <img src="[field:imgurl/]" alt="[field:text/]" width="120" height="90" />
        </a>
    </li>
{/dede:field}

<img src="[field:litpic/]" alt="[field:title/]" width="200" height="150" />

<style>
.img-wrapper img {
    width: 200px;
    height: 150px;
    object-fit: cover; /* 让图片填充容器，保持比例，超出部分裁剪 */
}
</style>
<div class="img-wrapper">
    <img src="[field:litpic/]" alt="[field:title/]" />
</div>

{dede:arclist row='5' typeid='' templet='mylist.htm'}

<li>
    <a href="[field:arcurl/]" title="[field:title/]">
        <!-- 使用正则表达式获取body中的第一张图片 -->
        [field:body function="preg_replace('/<img.*?src="(.*?)".*?>/i', '\\1', @me)"/]
    </a>
    <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
</li>