我会从基础到高级,分几个部分来讲解：
- 基础：在列表页和内容页调用缩略图
- 核心：
<img>标签的完整写法 - 高级：根据文章内容自动提取缩略图
- 进阶：自定义缩略图样式（如响应式、懒加载）
基础：在列表页和内容页调用缩略图
这是最常用、最基本的功能，DedeCMS 提供了简单的标签来调用文章的缩略图。
在列表页（如 index.htm, list_article.htm）调用
列表页通常使用 arclist 标签来循环输出文章列表，在 arclist 标签内，使用 [field:picname/] 来获取每篇文章的缩略图地址。
示例代码：
{dede:arclist row='10' titlelen='30'}
<div class="list-item">
<!-- 调用缩略图 -->
<a href="[field:arcurl/]">
<img src="[field:picname/]" alt="[field:title/]" />
</a>
<h3><a href="[field:arcurl/]">[field:title/]</a></h3>
</div>
{/dede:arclist}
代码解释：
{dede:arclist ...}: 调用文章列表。row='10': 显示 10 条文章。[field:picname/]: 获取文章的缩略图路径。[field:arcurl/]: 获取文章的链接地址。[field:title/]: 获取文章的标题，用作img标签的alt属性，这有利于 SEO。
页（如 article_article.htm）调用
页是显示单篇文章详情的页面，通常使用 {dede:field name='picname'/} 来获取当前文章的缩略图。
示例代码：
{dede:field name='body'/}
<!-- 文章缩略图，通常放在文章内容上方或下方 -->
<div class="article-thumb">
<img src="{dede:field name='picname'/}" alt="{dede:field name='title'/}" />
</div>
核心：<img> 标签的完整写法
直接使用 [field:picname/] 得到的可能只是一个路径，有时我们需要对图片进行一些控制，比如添加默认图、控制尺寸、添加样式类等。
(1) 添加默认图片
如果文章没有上传缩略图，可以显示一个默认的图片，这需要结合 PHP 的三元运算符来实现。
列表页中的写法：
{dede:arclist row='10' titlelen='30'}
<div class="list-item">
<a href="[field:arcurl/]">
<!-- 如果有缩略图则显示，否则显示默认图 /images/default.jpg -->
<img src="[field:picname function='(@me ? @me : "/images/default.jpg")'/]" alt="[field:title/]" />
</a>
</div>
{/dede:arclist}
代码解释：
function='(@me ? @me : "/images/default.jpg")': 这是一个 DedeCMS 的函数修饰。@me: 代表当前字段的原始值，在这里就是[field:picname/]的值（缩略图路径）。@me ? @me : "/images/default.jpg": 这是一个三元判断，@me不为空（即有缩略图），就使用@me；否则，使用"/images/default.jpg"。- 注意：请确保
/images/default.jpg这个默认图片路径在你的网站上是存在的。
(2) 控制图片尺寸
DedeCMS 默认不会自动缩放你上传的图片，它只是引用原图，如果需要在前端控制显示尺寸，可以在 CSS 中设置，或者在 img 标签中直接使用 width 和 height 属性（不推荐，会拉伸图片）。
推荐方法：使用 CSS 控制尺寸
<style>
.list-item img {
width: 200px; /* 设置一个固定宽度 */
height: 150px; /* 设置一个固定高度 */
object-fit: cover; /* 保持图片比例，并覆盖整个区域，避免变形 */
}
</style>
{dede:arclist row='10' titlelen='30'}
<div class="list-item">
<a href="[field:arcurl/]">
<img src="[field:picname/]" alt="[field:title/]" />
</a>
</div>
{/dede:arclist}
高级：根据文章内容自动提取缩略图
这是 DedeCMS 一个非常实用的功能，你可以在发布文章时，如果没有上传缩略图，系统会自动从文章内容（body）中提取第一张图片作为缩略图。
操作步骤：
-
后台设置：
- 登录 DedeCMS 后台。
- 进入
系统->系统基本参数->核心设置。 - 找到
（是/否）自动提取内容第一张图为缩略图这个选项，选择“是”。 - 保存。
-
修改模板标签：
- 仅仅开启后台设置是不够的，模板标签也需要相应修改,让它去调用这个自动生成的缩略图。
- 在
arclist或list标签中，使用[field:litpic/]代替[field:picname/]。 [field:litpic/]会优先显示手动上传的缩略图（picname），如果没有,则显示自动提取的缩略图。
修改后的列表页代码：
{dede:arclist row='10' titlelen='30'}
<div class="list-item">
<a href="[field:arcurl/]">
<!-- 使用 litpic，它会优先使用手动上传的，没有则使用自动提取的 -->
<img src="[field:litpic/]" alt="[field:title/]" />
</a>
</div>
{/dede:arclist}
同时结合默认图片：
{dede:arclist row='10' titlelen='30'}
<div class="list-item">
<a href="[field:arcurl/]">
<!-- litpic 为空，则显示默认图 -->
<img src="[field:litpic function='(@me ? @me : "/images/default.jpg")'/]" alt="[field:title/]" />
</a>
</div>
{/dede:arclist}
进阶：自定义缩略图样式（如响应式、懒加载）
为了提升网站性能和用户体验,我们经常需要使用响应式图片和懒加载。
(1) 响应式图片
使用 srcset 和 sizes 属性可以让浏览器根据设备的屏幕尺寸选择最合适的图片，从而加快加载速度，DedeCMS 本身不直接支持,但可以通过修改模型或使用自定义函数实现。
一个更简单的方法是使用 CSS 的 background-image 和 picture 标签，但最常用的是配合 JavaScript 库（如 lazysizes）来实现懒加载和响应式。
(2) 懒加载
懒加载是指图片进入可视区域时才进行加载,可以显著减少首页的初始加载时间。
实现方法（推荐使用成熟的 JS 库，如 lozad.js 或 lazysizes）：
-
引入 JS 库：在网站的
<head>或底部<body>中引入懒加载库的 JS 文件。<!-- 在 footer.htm 中引入 --> <script src="/js/lazysizes.min.js" async=""></script>
-
修改模板中的
img：- 将
src属性改为data-src。 - 添加一个
loading="lazy"属性（现代浏览器原生支持）。 - 添加一个占位图
src,防止布局抖动。
- 将
修改后的列表页代码（配合懒加载库）：
{dede:arclist row='10' titlelen='30'}
<div class="list-item">
<a href="[field:arcurl/]">
<!--
src: 加载一个极小的占位图，防止页面布局跳动。
data-src: 真正的图片地址，由 JS 库读取。
class="lazyload": JS 库会查找这个 class。
loading="lazy": 浏览器原生懒加载，与 JS 库形成双重保障。
-->
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3C/svg%3E"
data-src="[field:litpic function='(@me ? @me : "/images/default.jpg")'/]"
alt="[field:title/]"
class="lazyload"
loading="lazy"
/>
</a>
</div>
{/dede:arclist}
| 需求 | 核心标签/代码 | 说明 |
|---|---|---|
| 基本调用 | [field:picname/] |
获取手动上传的缩略图。 |
| 列表页调用 | {dede:arclist}...[field:picname/]...{/dede:arclist} |
在文章列表循环中使用。 |
| 自动提取缩略图 | [field:litpic/] |
优先手动上传，无则自动从内容提取，需后台开启。 |
| 添加默认图 | [field:picname function='(@me ? @me : "/default.jpg")'/] |
使用三元运算符判断。 |
| 响应式/懒加载 | <img data-src="..." class="lazyload" loading="lazy"> |
配合 JS 库实现，提升性能。 |
希望这份详细的代码和解释能帮助你完全掌握 DedeCMS 的缩略图功能！
