dede多张图CSS样式如何设置？

1. 文章列表页：显示文章的缩略图和多图字段。
2. 页：在文章正文中，对body字段里的图片进行样式化。
3. 自定义模型/表单：在专门的多图字段中展示图片。

下面我将针对这几种最常见的场景,提供详细的CSS代码示例和实现思路。

文章列表页 - 显示多张缩略图

这是最常见的需求,在文章列表中，我们希望文章除了主缩略图外，还能展示多张图片作为预览。

修改模板文件 (list_article.htm)

你需要找到并修改你的列表模板文件,通常位于 /templets/default/ 目录下，文件名可能是 list_article.htm 或你自定义的模板。

在模板中,找到循环文章列表的代码块，通常是这样的结构：

{dede:list pagesize='10'}
    <li>
        <a href="[field:arcurl/]">
            <img src="[field:litpic/]" alt="[field:title/]">
        </a>
        <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
        <p>[field:description function='cn_substr(@me, 100)'/]...</p>
    </li>
{/dede:list}

关键步骤： 在这个循环内部，我们需要调用多图字段 imgList。imgList 字段存储的是用 分隔的图片路径字符串。

修改后的代码示例：

{dede:list pagesize='10'}
    <li>
        <!-- 主缩略图 -->
        <div class="main-thumb">
            <a href="[field:arcurl/]">
                <img src="[field:litpic/]" alt="[field:title/]">
            </a>
        </div>
        <!-- 多张缩略图预览区 -->
        <div class="multi-thumb">
            <!-- 使用 [field:imglist/] 来获取多图字段 -->
            <!-- 注意：imglist 默认只取第一张，我们需要用自定义函数来处理 -->
            <!-- 这里我们假设你有一个自定义函数 GetMultiImg，下面会教你怎么做 -->
            [field:imglist function='GetMultiImg(@me, 3)'/]
        </div>
        <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
        <p>[field:description function='cn_substr(@me, 100)'/]...</p>
    </li>
{/dede:list}

GetMultiImg 自定义函数 (非常重要！)

上面的代码中用到了 GetMultiImg 函数，但DedeCMS默认没有这个函数，你需要自己创建。

1. 创建函数文件： 在 /include/extend.func.php 文件中（如果没有就创建一个）添加以下PHP代码：

   /**
    * 处理多图字段，返回指定数量的HTML图片标签
    * @param string $imglistStr 多图字段字符串，格式为 "图片1|图片2|图片3..."
    * @param int $num 要显示的图片数量
    * @return string 返回HTML字符串
    */
   function GetMultiImg($imglistStr, $num = 3) {
       if (empty($imglistStr)) {
           return '';
       }
       // 将字符串分割成数组
       $imgArray = explode('|', $imglistStr);
       // 确保只取我们需要的数量
       $imgArray = array_slice($imgArray, 0, $num);
       $html = '';
       foreach ($imgArray as $imgUrl) {
           // 确保图片路径不为空
           if (!empty($imgUrl)) {
               // 拼接HTML，这里可以根据需要添加样式类
               $html .= '<img src="' . $imgUrl . '" alt="" class="thumb-item">';
           }
       }
       return $html;
   }

2. 保存文件：保存 /include/extend.func.php 文件。

编写CSS样式

在你的CSS文件（/templets/default/style/dedecms.css）中，为刚才添加的HTML结构添加样式。

/* 列表项容器 */
/* .list li { ... } (你的现有样式) */
/* 多图缩略图预览区容器 */
.multi-thumb {
    display: flex; /* 使用flex布局让图片水平排列 */
    gap: 8px; /* 图片之间的间距 */
    margin-top: 8px;
    overflow: hidden; /* 防止图片溢出 */
}
/* 每张小图的样式 */
.multi-thumb .thumb-item {
    width: 60px; /* 设置固定宽度 */
    height: 60px; /* 设置固定高度 */
    object-fit: cover; /* 保证图片填满容器且不变形 */
    border-radius: 4px; /* 圆角 */
    border: 1px solid #eee; /* 细边框 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    transition: transform 0.2s ease; /* 添加一个简单的放大动画 */
}
/* 鼠标悬停时的效果 */
.multi-thumb .thumb-item:hover {
    transform: scale(1.1); /* 放大1.1倍 */
    border-color: #007bff; /* 边框变色 */
    box-shadow: 0 2px 8px rgba(0,123,255,0.25); /* 添加阴影 */
}

效果：列表中的每个文章项会显示一张主图，下面水平排列3张小图，鼠标悬停小图时会有放大和边框高亮效果。

页 - 对正文图片进行样式化

页 (article_article.htm)，我们通常需要对 body 字段中的图片进行统一美化，比如给所有内容图添加边框、阴影、最大宽度限制等。

修改模板文件 (article_article.htm)

页模板中,[field:body/] 标签会直接输出文章的HTML内容，我们不需要修改这里的标签，而是通过CSS来直接作用于它内部的 <img>

编写CSS样式

/* 假设文章内容区的 class 或 id 是 article-content */
.article-content img {
    /* 1. 响应式：图片最大宽度为100%，不会超出容器 */
    max-width: 100%;
    height: auto; /* 高度自动调整，保持比例 */
    /* 2. 美化：添加样式 */
    display: block; /* 避免图片下方出现奇怪的间隙 */
    margin: 15px auto; /* 上下间距，左右居中 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加柔和的阴影 */
    /* 3. 过渡效果：当图片加载或交互时更平滑 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 鼠标悬停在文章图片上时的效果 */
.article-content img:hover {
    transform: scale(1.02); /* 轻微放大 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* 阴影加深 */
}
/* 如果需要为第一张图或特定图片添加不同样式，可以这样做 */
.article-content img:first-child {
    margin-top: 0; /* 第一张图片去掉上边距 */
}

<div class="custom-gallery">
    {dede:field.my_gallery function='GetMultiImg(@me, 5)'/}
</div>

/* 自定义图集容器 */
.custom-gallery {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 15px; /* 图片间距 */
    margin: 20px 0;
}
/* 图集中的每张图片 */
.custom-gallery .thumb-item {
    width: calc(20% - 12px); /* 5列布局，减去间距 */
    aspect-ratio: 1 / 1; /* 保持1:1的正方形比例 */
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
}
/* 响应式调整：在小屏幕上变为2列 */
@media (max-width: 768px) {
    .custom-gallery .thumb-item {
        width: calc(50% - 8px);
    }
}
/* 在更小的屏幕上变为1列 */
@media (max-width: 480px) {
    .custom-gallery .thumb-item {
        width: 100%;
    }
}