使用 {dede:field.body} 自定义样式调用
这是最推荐的方法，因为它利用了DedeCMS自带的编辑器功能,简单且灵活。
（图片来源网络，侵删）
第一步：在内容页编辑器中插入图集
-
登录DedeCMS后台,打开你需要插入图集的文章。
-
将光标定位到你希望显示图集的位置。
-
点击编辑器工具栏上的 “图集” 按钮（通常是一个小相机的图标）。
-
在弹出的窗口中，你可以选择“上传新图片”或“从本地上传”。
（图片来源网络，侵删） -
上传完图片后，可以为每张图片填写 和 “备注”,这对于SEO和用户体验很重要。
-
设置完成后，点击“确定”,编辑器会自动在内容中插入一段特定的HTML代码。
插入后，内容页的源代码（{dede:field.body}）里会包含类似这样的结构：
<div class="dede_pages">
<ul class="lightBox">
<li>
<a href="/uploads/allimg/230101/1-2301011F0150-50-lp.jpg" target="_blank">
<img src="/uploads/allimg/230101/1-2301011F0150-50-lp.jpg" alt="图片标题1" />
</a>
<span>图片标题1</span>
</li>
<li>
<a href="/uploads/allimg/230101/1-2301011F0150-51-lp.jpg" target="_blank">
<img src="/uploads/allimg/230101/1-2301011F0150-51-lp.jpg" alt="图片标题2" />
</a>
<span>图片标题2</span>
</li>
<!-- 更多图片... -->
</ul>
</div>
第二步：在内容页模板中调用并美化
你只需要在内容页模板文件（通常是 article_article.htm）中,通过CSS来美化这段代码即可。
（图片来源网络，侵删）
-
打开你的内容页模板文件 (
/templets/default/article_article.htm或你自定义的模板)。 -
在
{dede:field.body}标签前后添加HTML结构,并应用CSS样式。
模板代码示例：
{dede:include filename="head.htm"/}
<div class="main">
<div class="path"><a href='{dede:global.cfg_cmsurl/}/'>首页</a> > <a href='{dede:type typeid='0'}'[field:typename/]{/dede:type}>栏目</a> > <a href='{dede:field name='arcurl'/}'>正文</a></div>
<h1 class="title">{dede:field.title/}</h1>
<div class="info">
<span>发布时间：{dede:field.pubdate function="MyDate('Y-m-d H:i',@me)"/}</span>
<span>来源：{dede:field.source/}</span>
<span>作者：{dede:field.writer/}</span>
<span>点击：<script src="{dede:field name='phpurl'/}/count.php?view=yes&aid={dede:field.aid/}&mid={dede:field.mid/}" type='text/javascript' language="javascript"></script></span>
</div>
<!-- 内容区域 -->
<div class="content">
{dede:field.body/}
</div>
<!-- 在这里调用并美化图集 -->
<div class="dede_pages">
<ul class="lightBox">
{dede:field.body/}
</ul>
</div>
<!-- 分页标签 -->
{dede:pagebreak/}
<!-- 上下篇 -->
{dede:prenext get='pre'/}
{dede:prenext get='next'/}
</div>
{dede:include filename="footer.htm"/}
CSS样式代码（可以放在模板的 <head> 部分或外部CSS文件中）：
/* 图集容器样式 */
.dede_pages {
margin: 20px 0;
padding: 15px;
border: 1px dashed #ccc;
background-color: #f9f9f9;
}
/* 图集列表样式 */
.lightBox {
list-style: none;
padding: 0;
margin: 0;
display: flex; /* 使用flex布局，让图片横向排列 */
flex-wrap: wrap; /* 允许换行 */
gap: 15px; /* 图片之间的间距 */
}
.lightBox li {
margin: 0;
padding: 0;
border: 1px solid #eee;
border-radius: 5px;
overflow: hidden; /* 让圆角生效 */
transition: transform 0.3s; /* 添加悬停动画效果 */
}
.lightBox li:hover {
transform: scale(1.05); /* 鼠标悬停时图片轻微放大 */
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* 图集图片样式 */
.lightBox li img {
width: 200px; /* 设置一个固定宽度 */
height: 150px; /* 设置一个固定高度 */
object-fit: cover; /* 保证图片填充且不变形 */
display: block;
cursor: pointer;
}
备注样式 */
.lightBox li span {
display: block;
text-align: center;
padding: 8px 5px;
background-color: #fff;
font-size: 14px;
color: #333;
word-break: break-all; /* 防止标题过长撑破布局 */
}
说明：
- 这种方法的好处是，你只需要在后台编辑文章时插入图集，模板里的代码是固定的,非常方便。
- CSS中的
object-fit: cover;是一个非常有用的属性，它能让图片在固定尺寸的容器内自适应并填满,同时保持不变形。
进阶方法：使用 {dede:field name='imgurls'} 标签调用
如果你对图片的尺寸、链接等有更精细的控制，或者不想依赖编辑器生成的HTML结构,可以使用这个更底层的方法。
第一步：理解数据结构
{dede:field name='imgurls'} 会调用文章附加表中的图片数据，每张图片的信息都存储在一个 <dd> 标签中。
数据结构示例：
<dd><img src='缩略图地址' width='宽度' height='高度' alt='图片说明'/></dd> <dd><a href='大图地址' target='_blank'><img src='缩略图地址' width='宽度' height='高度' alt='图片说明'/></a></dd>
第二步：在模板中使用
模板代码示例：
<!-- 在内容页模板中，{dede:field.body/} 的后面或任意合适位置添加 -->
<div class="my-album">
<h3>文章图集</h3>
<ul>
{dede:field name='imgurls'}
<li>
<!-- 这里使用[field:imgurl/]来获取缩略图 -->
<a href="[field:imgurl/]" target="_blank" rel="lightbox">
<img src="[field:imgurl/]" alt="[field:text/]" width="200" height="150" />
</a>
<p>[field:text/]</p>
</li>
{/dede:field}
</ul>
</div>
CSS样式代码：
/* 进阶方法图集样式 */
.my-album {
margin: 20px 0;
}
.my-album ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.my-album li {
border: 1px solid #eee;
border-radius: 5px;
overflow: hidden;
}
.my-album li img {
width: 200px;
height: 150px;
object-fit: cover;
display: block;
}
.my-album li p {
text-align: center;
padding: 5px;
margin: 0;
font-size: 14px;
background-color: #fff;
}
第三步：添加图片灯箱效果（Lightbox）
为了让点击图片后能在大图模式下浏览，可以集成一个灯箱效果库，lightbox2。
-
下载并引入Lightbox2库：从 lightbox2官网 下载,将CSS和JS文件放入你的模板目录。
-
修改模板头部：在
<head>标签内引入CSS和JS文件。<!-- 在 head.htm 或 article_article.htm 的 <head> 部分添加 --> <link rel="stylesheet" href="/templets/default/css/lightbox.css" /> <script src="/templets/default/js/lightbox.js"></script>
-
修改图集链接：将
{dede:field name='imgurls'}循环中的链接href指向大图，并添加data-lightbox="roadtrip"属性。{dede:field name='imgurls'} <li> <!-- [field:imgurl/] 是缩略图，[field:imgsrc/] 是大图地址 --> <a href="[field:imgsrc/]" data-lightbox="roadtrip" data-title="[field:text/]"> <img src="[field:imgurl/]" alt="[field:text/]" width="200" height="150" /> </a> <p>[field:text/]</p> </li> {/dede:field}
总结与对比
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
{dede:field.body} 自定义样式 |
最简单，只需在后台操作，模板代码固定，对编辑器友好。 | 灵活性稍差，样式受编辑器生成的HTML结构限制。 | 绝大多数场景，特别是对非技术人员维护的网站。 |
{dede:field name='imgurls'} |
灵活性最高，可以完全控制HTML结构，便于集成JS效果（如灯箱）。 | 需要手动编写模板代码，需要理解数据结构。 | 需要对图集进行高度定制化开发，或需要集成复杂JS效果时。 |
推荐：
对于绝大多数用户，直接使用 第一种方法 即可满足需求，它是最简单、最稳定的方案，如果你想让图集有更好的交互体验（如灯箱效果），可以在第一种方法的基础上，给编辑器生成的 <a> 标签手动添加 rel="lightbox" 等属性,或者直接采用第二种方法。
