搜索
DEDE建站

dede 图片列表模板

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 1 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 28 分钟
位置： 首页 › DEDE建站 › 正文

核心概念：图片列表模板的工作原理

在 DedeCMS 中，一个完整的图片列表效果,通常需要两个文件协同工作：

dede 图片列表模板
（图片来源网络，侵删）
  1. 列表模板文件：定义了整个列表页的 HTML 结构，包括页头、页脚、以及循环输出文章列表的代码块，这个文件本身不包含具体的文章数据，它只是一个“模具”。
  2. 页中的字段：文章的具体内容，比如标题、缩略图、简介等，都存储在每篇文章对应的数据库表字段中，列表模板通过特定的标签（如 {dede:arclist}）从数据库中读取这些字段，并填充到“模具”中，最终生成完整的 HTML 页面。

制作图片列表模板的关键在于：

  • 编写正确的列表模板 HTML 结构。
  • 使用正确的 DedeCMS 标签来调用文章数据。
  • 在后台为每篇文章上传并设置好缩略图。

制作步骤详解

步骤 1：准备后台数据（文章和缩略图）

这是最基础也是最重要的一步，在制作模板之前,请确保：

  1. 创建栏目：在后台“栏目管理”中,创建一个新栏目。
  2. 选择栏目类型：创建栏目时，“栏目列表选项” 必须选择 “图片列表”,这是启用图片列表模板的前提。
  3. 上传文章：为该栏目添加文章。
  4. 上传并设置缩略图：在添加或编辑文章时，找到“缩略图”选项，点击“上传新文件”或“选择已上传的图片”，为文章设置一张缩略图，这张图片将被 {dede:field.litpic /} 或 {dede:img} 标签调用。

步骤 2：创建和编辑列表模板文件

  1. 进入模板管理：在后台，找到“模板” -> “默认模板管理”。
  2. 选择对应栏目：在左侧的栏目列表中，找到你刚刚创建的“图片列表”类型的栏目。
  3. 修改或创建模板：
    • 如果系统已经为该栏目生成了一个默认的列表模板（如 list_image.htm），你可以直接点击“修改”。
    • 如果没有，或者你想创建一个全新的，可以点击“增加模板”，然后选择“从默认模板创建”,或者直接上传你写好的模板文件。

步骤 3：编写模板代码（核心部分）

下面是一个最常用、最经典的图片列表模板代码结构,我们以此为例进行详细讲解。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">{dede:field.title/} - {dede:global.cfg_webname/}</title>
    <link rel="stylesheet" href="/templets/default/style/style.css">
</head>
<body>
    <!-- 页头部分 (header) -->
    {dede:include filename="header.htm"/}
    <!-- 主要内容区域 -->
    <div class="main-container">
        <div class="wrap">
            <!-- 左侧边栏 -->
            {dede:include filename="left.htm"/}
            <!-- 右侧列表内容区 -->
            <div class="list-content">
                <!-- 当前栏目位置 -->
                <div class="position">
                    <a href="/">首页</a> > {dede:type typeid='0'}<a href="[field:typelink/]">[field:typename/]</a>{/dede:type}
                </div>
                <!-- 列表标题 -->
                <h2 class="list-title">{dede:field.title/}</h2>
                <!-- 图片列表主体部分 - 使用 arclist 标签 -->
                <ul class="img-list">
                    {dede:arclist titlelen='30' row='6' typeid='' col='2'}
                    <li>
                        <!-- 文章链接 -->
                        <a href="[field:arcurl/]">
                            <!-- 缩略图 -->
                            <img src="[field:litpic/]" alt="[field:title/]" width="200" height="150">
                            <!-- 文章标题 -->
                            <h3>[field:title/]</h3>
                            <!-- 文章简介 -->
                            <p>[field:description function='cn_substr(@me, 100)'/]...</p>
                        </a>
                    </li>
                    {/dede:arclist}
                </ul>
                <!-- 分页 -->
                <div class="page-nav">
                    {dede:pagelist listsize='4' listitem='info,index,nextend,pre,end,pageno'}
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚部分 (footer) -->
    {dede:include filename="footer.htm"/}
</body>
</html>

核心标签详解

{dede:arclist}

这是调用文章列表的核心标签,功能非常强大。

dede 图片列表模板
（图片来源网络，侵删）

  • 基本用法：

    {dede:arclist ...}...循环内容...{/dede:arclist}

  • 常用属性：

    • row='6'：获取文章的数量，这里表示获取 6 篇。
    • typeid=''：指定调用哪个栏目的文章，如果为空,则默认调用当前栏目及其子栏目的文章。
    • col='2'：每行显示的列数，结合 CSS 可以实现网格布局。
    • titlelen='30'长度，截取 30 个字符。
    • infolen='100'：简介长度，截取 100 个字符。
    • imgwidth='200' 和 imgheight='150'：设置缩略图的宽度和高度。注意：这不会改变图片文件本身的大小，只是在页面上用 CSS 控制显示尺寸，可能会导致图片变形，更推荐用 CSS 控制。
    • orderby='pubdate'：排序方式。pubdate 按发布日期排序，hot 按点击量排序，rand 随机排序。
    • channelid='1'：指定调用模型的 ID，1 代表文章模型。

内部字段标签（在 {dede:arclist} 循环内使用）

这些标签用于获取单篇文章的具体信息。

  • [field:arcurl/]：文章的链接地址。
  • [field:litpic/]：文章的缩略图地址,这是实现图片列表的关键。
  • [field:title/]：文章的标题。
  • [field:description/]：文章的简介，通常会用 function='cn_substr(@me, 100)' 来截取前 100 个字符,避免简介过长。
  • [field:pubdate function='strftime("%Y-%m-%d", @me)'/]：文章的发布日期，并格式化为 年-月-日。
  • [field:click/]：文章的点击量。

CSS 样式配合

光有 HTML 模板是不够的，还需要 CSS 来美化布局，下面是配合上面 HTML 代码的 CSS 样例。

dede 图片列表模板
（图片来源网络，侵删）
/* 清除默认样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", sans-serif; }
区域 */
.main-container { padding: 20px 0; }
.wrap { width: 1200px; margin: 0 auto; }
.list-content { float: right; width: 880px; }
.left { float: left; width: 300px; } /* 假设左边栏宽度 */
/* 图片列表样式 */
.img-list { list-style: none; display: flex; flex-wrap: wrap; }
.img-list li { 
    width: 280px; /* (880 / 2) - 间距 */
    margin: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.3s;
}
.img-list li:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}
.img-list li a { display: block; text-decoration: none; color: #333; }
.img-list li img { 
    width: 100%; 
    height: 180px; /* 固定高度，保持整齐 */
    object-fit: cover; /* 关键：图片会填充区域，并保持比例，不变形 */
    display: block;
}
.img-list li h3 { 
    padding: 10px; 
    font-size: 16px; 
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.img-list li p { 
    padding: 0 10px 10px; 
    font-size: 14px; 
    color: #666;
    height: 40px; /* 固定高度，确保整齐 */
    overflow: hidden;
}
/* 分页样式 */
.page-nav { text-align: center; margin-top: 30px; }
.page-nav a, .page-nav span { margin: 0 5px; padding: 5px 10px; border: 1px solid #ddd; }
.page-nav a:hover, .page-nav .thisclass { background-color: #007bff; color: #fff; border-color: #007bff; }

常见问题与高级技巧

如何调用指定栏目的图片列表？

在 {dede:arclist} 标签中，使用 typeid 属性，并填入目标栏目的 ID。 要调用栏目 ID 为 5 的文章：

{dede:arclist typeid='5' row='8' col='4'}
...
{/dede:arclist}

如何不使用缩略图，直接调用文章内容中的第一张图？

是使用编辑器（如ckeditor）填写的，并且第一张图不是通过缩略图功能上传的，可以使用 {dede:img} 

{dede:arclist row='6'}
<li>
    <a href="[field:arcurl/]">
        <!-- 调用文章内容中的第一张图 -->
        [field:img /]
        <h3>[field:title/]</h3>
    </a>
</li>
{/dede:arclist}

注意：{dede:img} 标签会自动匹配 body 字段中的第一张 <img> 标签并输出。

如何实现瀑布流布局？

瀑布流布局通常需要 JavaScript（如 jQuery Masonry 或 Isotope）配合,基本思路是：

  1. HTML 结构：使用一个容器包裹所有图片列表项，列表项使用 <div> 而不是 <li>，并移除固定高度。
    <div class="waterfall-container">
    {dede:arclist row='12'}
    <div class="waterfall-item">
        <a href="[field:arcurl/]">
            <img src="[field:litpic/]" alt="[field:title/]">
            <h3>[field:title/]</h3>
        </a>
    </div>
    {/dede:arclist}
</div>
  2. CSS 样式：设置容器为相对定位，每个项目为绝对定位,并设置一个固定的宽度。
  3. JavaScript：引入瀑布流插件，在页面加载完成后对 .waterfall-container 进行初始化，插件会自动计算并设置每个项目的 top 和 left 值,形成瀑布流效果。

如何自定义分页样式？

{dede:pagelist} 标签的 listitem 属性可以控制分页导航栏显示哪些部分。

  • listitem='info,index,nextend,pre,end,pageno' 是一个常用的组合，显示：
    • info：显示总页数、总记录数等信息。
    • index：显示首页。
    • pre：显示上一页。
    • pageno：显示页码列表。
    • next：显示下一页。
    • nextend：显示末页。
    • end：显示末页。 你可以根据需要增删这些项。

制作 DedeCMS 图片列表模板的流程可以概括为：

  1. 后台准备：创建“图片列表”栏目,并为文章上传缩略图。
  2. 编写 HTML 模板：使用 {dede:arclist} 标签作为循环核心，并用 [field:*] 系列标签调用文章数据。
  3. 编写 CSS 样式：通过 CSS 控制列表的布局、间距、图片显示效果等。
  4. 高级应用：根据需求使用 typeid、{dede:img} 等标签实现更复杂的功能，或结合 JavaScript 实现瀑布流等特效。

掌握 {dede:arclist} 标签是制作所有列表模板（包括图片列表、普通文章列表等）的基础,请务必熟悉其常用属性和内部字段。

-- 展开阅读全文 --
头像
dede如何单独调用指定栏目信息？
« 上一篇 今天
C指针与C++指针有何本质区别？
下一篇 » 今天

相关文章

取消
微信二维码
支付宝二维码

盈思创科技

侵权处理与合作：473708564#qq.com，#换成@就是邮箱

页面执行：2,167.46 ms

icp沪ICP备2024102905号

目录[+]