dede如何实现多行多列显示文章标题和缩略图？-DEDE建站-盈思创科技

使用Dede的内置功能（推荐，最简单）
使用自由列表（更灵活，功能更强）

使用Dede的内置功能（arclist标签）

这是最直接、最简单的方法,适用于大多数常规的多行多列布局。

（图片来源网络，侵删）

第1步：创建模板文件

在你的DedeCMS模板目录（通常是 /templets/default/）下，创建一个新的HTML文件，index_article_multi.html。
在这个文件中，使用Dede的 {dede:arclist} 标签来获取文章列表。

第2步：编写arclist标签代码

在 index_article_multi.html 文件中，输入以下代码，这个例子将展示一个 2行3列 的图文列表。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">多行多列文章列表</title>
    <style>
        /* 清除默认样式 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: "Microsoft YaHei", Arial, sans-serif; }
        /* 外层容器，用于居中和设置总宽度 */
        .article-container {
            width: 900px; /* 总宽度，根据你的列数和图片宽度调整 */
            margin: 20px auto;
            display: flex; /* 使用Flexbox布局 */
            flex-wrap: wrap; /* 允许项目换行 */
            justify-content: space-between; /* 项目之间空间均匀分布 */
        }
        /* 每个文章项的样式 */
        .article-item {
            width: 300px; /* 每列的宽度，总宽度/列数 */
            margin-bottom: 20px; /* 行间距 */
            border: 1px solid #eee;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        .article-item:hover {
            transform: translateY(-5px);
        }
        /* 缩略图样式 */
        .article-item img {
            width: 100%; /* 图片宽度填满容器 */
            height: 180px; /* 固定图片高度，保证整齐 */
            object-fit: cover; /* 保证图片不变形，覆盖整个区域 */
            border-radius: 4px;
            display: block;
        }
        /* 标题样式 */
        .article-item h3 {
            font-size: 16px;
            font-weight: normal;
            margin: 10px 0 5px;
            height: 40px; /* 固定标题高度，防止长短不一 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .article-item h3 a {
            color: #333;
            text-decoration: none;
        }
        .article-item h3 a:hover {
            color: #0066cc;
        }
        /* 摘要和日期样式 */
        .article-summary {
            font-size: 12px;
            color: #666;
            height: 40px; /* 固定高度，可选 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .article-date {
            font-size: 12px;
            color: #999;
            text-align: right;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <h1>文章推荐</h1>
    <div class="article-container">
        {dede:arclist typeid='0' titlelen='30' row='6' col='3'}
        <div class="article-item">
            <!-- [field:picname/] 是调用缩略图，如果文章没有缩略图则不显示此div -->
            [field:array runphp='yes']
                if(@me['litpic'] != '') {
                    @me = '<a href="'.@me['arcurl'].'" title="'.@me['title'].'"><img src="'.@me['litpic'].'" alt="'.@me['title'].'" /></a>';
                } else {
                    @me = ''; // 如果没有缩略图，可以设置一个默认图或留空
                }
            [/field:array]
            <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
            <p class="article-summary">[field:description function='cn_substr(@me, 100)'/]...</p>
            <p class="article-date">[field:pubdate function="MyDate('Y-m-d', @me)"/]</p>
        </div>
        {/dede:arclist}
    </div>
</body>
</html>

第3步：代码详解

HTML结构:
- 一个外层 .article-container 使用 display: flex 和 flex-wrap: wrap 实现多行多列的弹性布局。
- 内部的 .article-item 每个代表一篇文章，通过设置固定的 width（如300px）来控制每列的宽度。
CSS样式:
- object-fit: cover 是关键,它确保图片能填满指定区域而不会变形。
- -webkit-line-clamp 用于限制标题和摘要的显示行数，超出部分显示省略号,使布局更整齐。
Dede标签 {dede:arclist}:
- typeid='0': 调用所有栏目的文章，如果想指定栏目，改成对应的栏目ID，如 typeid='1'。
- row='6': 总共要显示的文章数量，这个值必须是 col 的整数倍，否则最后一行可能会不完整，2行3列,总共就是6篇。
- col='3': 每行显示的列数。
- titlelen='30': 标题最多显示30个字符。
- [field:picname/]: 调用文章的缩略图，上面的代码使用了 runphp 判断，如果文章没有缩略图，则不显示图片标签,避免显示破损图片或占位图。
- [field:arcurl/]: 文章链接。
- [field:title/]: 文章标题。
- [field:description/]: 并用 cn_substr 函数截取前100个字符。
- [field:pubdate/]: 发布日期，并用 MyDate 函数格式化。

第4步：在首页调用

打开你的首页模板文件（通常是 /templets/default/index.html）。
在你希望显示这个多行多列列表的位置，使用 include 标签引入你刚刚创建的模板文件：
```
{dede:include filename="index_article_multi.html"/}
```
保存模板，然后到Dede后台 “生成” -> “更新主页”,刷新首页即可看到效果。

使用自由列表（更灵活）

自由列表功能非常强大，它可以在后台可视化管理栏目、文章和列表，而无需直接修改模板代码,适合不熟悉代码或者需要频繁调整内容的管理员。

第1步：创建自由列表

登录DedeCMS后台。
在顶部菜单栏找到 “核心” -> “自由列表”。
（图片来源网络，侵删）
点击 “增加一个自由列表”。

填写基本信息:

列表名称: 给你的列表起个名字，如“首页图文推荐”。
列表目录: 系统会自动生成,保持默认即可。
（图片来源网络，侵删）

列表模板: 这是关键！ 选择或创建一个专门的列表模板，这个模板只需要循环输出单个文章项的HTML结构,不需要外层的容器和CSS。

创建一个模板 list_article_item.htm如下：

<div class="article-item">
    <!-- [field:picname/] 是调用缩略图 -->
    [field:array runphp='yes']
        if(@me['litpic'] != '') {
            @me = '<a href="'.@me['arcurl'].'" title="'.@me['title'].'"><img src="'.@me['litpic'].'" alt="'.@me['title'].'" /></a>';
        } else {
            @me = '';
        }
    [/field:array]
    <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
    <p class="article-summary">[field:description function='cn_substr(@me, 100)'/]...</p>
    <p class="article-date">[field:pubdate function="MyDate('Y-m-d', @me)"/]</p>
</div>

命名规则: 保持默认。

第2步：设置查询条件

在 “文档查询条件” 部分，你可以像SQL查询一样筛选文章。
- 只显示某个栏目：typeid = '1'
- 只显示推荐位：flag = 'c' (c代表首页推荐)
- 按发布时间倒序：sortup datetime DESC
在 “分页单位” 部分：
- 每页记录数: 设置你想要显示的文章总数，6。

第3步：保存并获取代码

填写完所有信息后，点击 “保存” 按钮。
保存成功后，页面会显示一个 “[获取代码]” 的按钮。
点击这个按钮，系统会生成一段 {dede:freelist} 标签代码。复制这段代码。

第4步：在首页调用

打开你的首页模板文件 index.html。
在合适的位置，粘贴你刚刚复制的 {dede:freelist} 代码。
重要: 你还需要在 index.html 的 <head> 部分添加前面示例中的 CSS样式，或者将CSS单独放到一个文件中并用 <link> 引入。
保存模板，到后台 “生成” -> “更新主页”,刷新首页。

总结与对比

特性	方法一 (arclist)	方法二 (自由列表)
优点	简单直接，代码在模板中一目了然。适合静态化，对SEO友好。不需要后台额外操作。	极度灵活，后台可随时修改栏目、排序、数量。可视化操作，对不熟悉代码的管理员非常友好。内容与模板分离，维护方便。
缺点	（如换栏目）需要修改模板代码。如果需要调整显示逻辑，需要编辑模板。	增加了后台管理的复杂度。依赖后台生成，有时性能略逊于直接模板调用。
适用场景	- 布局固定，内容明确的栏目或首页模块。 - 开发者或熟悉代码的用户。	- 需要经常更换内容来源的推荐位。 - 多个页面需要调用相似但参数不同的列表。 - 非技术人员需要维护内容。

对于大多数用户，方法一 已经足够强大且易于上手，如果你发现你需要频繁调整列表的内容和排序，那么学习并使用方法二会给你带来极大的便利。

dede如何实现多行多列显示文章标题和缩略图？

使用Dede的内置功能（arclist标签）

第1步：创建模板文件

第2步：编写arclist标签代码

第3步：代码详解

第4步：在首页调用

使用自由列表（更灵活）

第1步：创建自由列表

第2步：设置查询条件

第3步：保存并获取代码

第4步：在首页调用

总结与对比

相关文章

目录[+]