dede列表产品tr td如何实现表格布局？-DEDE建站-盈思创科技

核心概念

{dede:list}: 这是 DedeCMS 的核心列表循环标签，它的作用是获取指定栏目下的文章列表，并对列表中的每一篇文章执行一次循环。

[field:属性/]: 这是在 {dede:list} 循环内部使用的字段标签，用于获取当前循环文章的特定信息，比如标题、图片、链接、简介等。 tr (Table Row): HTML 中的表格行标签。 td (Table Data): HTML 中的表格单元格标签。

我们的目标就是用 {dede:list} 循环生成多行 (tr)，每行内再生成多个单元格 (td) 来展示产品信息。（图片来源网络，侵删）基础用法：单行单列最简单的用法是,每篇文章占一行，每行只有一个单元格显示标题。 <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>产品名称</td> </tr> {dede:list pagesize='10'} <tr> <td> <a href="[field:arcurl/]">[field:title/]</a> </td> </tr> {/dede:list} </table> 代码解析: {dede:list pagesize='10'}: 开始一个列表循环，pagesize='10' 表示每页显示 10 条产品。 [field:arcurl/]: 获取当前文章的链接地址。 [field:title/]: 获取当前文章的标题。 {/dede:list}: 循环结束。进阶用法：多列布局（最常用）在实际应用中,我们通常希望一行能显示多个产品，比如一行显示 3 个或 4 个，这需要一些技巧，因为 {dede:list} 是按文章循环的，而不是按我们想要的列数循环。使用 mod 判断符（推荐）这是最标准、最灵活的方法，我们可以利用 mod 变量来判断当前是第几个产品，从而控制 tr 和 td 的开启和闭合。（图片来源网络，侵删）示例：一行显示 3 个产品 <table width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#e8e8e8">  <tr bgcolor="#f5f5f5"> <td width="33%">产品图片</td> <td width="33%">产品名称</td> <td width="34%">产品简介</td> </tr>  {dede:list pagesize='12'}   [field:mod runphp='yes'] if(@me % 3 == 0) @me = "</tr><tr>"; else @me = ""; [/field:mod] <tr bgcolor="#ffffff"> <td width="33%" align="center"> <a href="[field:arcurl/]"> <img src="[field:litpic/]" alt="[field:title/]" width="120" /> </a> </td> <td width="33%" align="center"> <a href="[field:arcurl/]">[field:title/]</a> </td> <td width="34%" align="center"> [field:description function='cn_substr(@me, 100)'/]... </td> </tr> {/dede:list}  <tr> <td colspan="3" align="center"> {dede:pagelist listsize='4' listitem='info,index,end,pre,next,pageno'} </td> </tr> </table> 代码解析: [field:mod runphp='yes']: mod 是一个内置变量，表示当前文章是列表中的第几个（从1开始）。 if(@me % 3 == 0): 判断当前序号是否能被 3 整除。 @me = "</tr><tr>";: 如果能整除（即第3、6、9...个产品），就输出 </tr><tr>，用来关闭上一行的 </tr> 和开启新行的 <tr>。 else @me = "";: 如果不能整除，则输出空，不进行任何操作。注意: 这段代码必须放在 <tr> 标签的前面，这样才能在正确的时机换行。 [field:litpic/]: 获取文章的缩略图路径，对于产品列表，这是非常重要的字段。（图片来源网络，侵删） [field:description function='cn_substr(@me, 100)'/]: description 是文章摘要/简介。 function='cn_substr(@me, 100)' 是一个函数，用于截取字符串，这里表示将简介截取前 100 个中文字符。 {dede:pagelist}: 用于生成分页导航。 <tr><td colspan="3">...</td></tr>: 这是分页导航所在的行，colspan="3" 表示这个单元格横跨 3 列。固定行数法（适用于已知总数）如果你非常确定列表总数是某个数的倍数（比如正好12条，一行3个，共4行），可以简化结构。 <table> <tr> {dede:list pagesize='12'} <td> <a href="[field:arcurl/]"> <img src="[field:litpic/]" alt="[field:title/]" /> </a> <p>[field:title/]</p> </td> [field:mod runphp='yes'] if(@me % 3 == 0) @me = "</tr><tr>"; else @me = ""; [/field:mod] {/dede:list} </tr> </table> 这种方法结构更简单,但不够灵活，如果列表总数不是3的倍数，最后一行的布局就会被破坏。强烈推荐使用方法一。完整示例模板文件 (list_product.htm) 这是一个可以直接在 DedeCMS 后台“模板管理”中创建和使用的完整列表页模板文件示例。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">{dede:field.title/}</title> </head> <body> <h1>{dede:field.title/}</h1>  <table width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#e8e8e8">  <tr bgcolor="#f5f5f5"> <td width="25%">产品图片</td> <td width="25%">产品名称</td> <td width="50%">产品简介</td> </tr> {dede:list pagesize='9'}  [field:mod runphp='yes'] if(@me % 3 == 0) @me = "</tr><tr>"; else @me = ""; [/field:mod] <tr bgcolor="#ffffff"> <td width="25%" align="center"> <a href="[field:arcurl/]"> <img src="[field:litpic/]" alt="[field:title/]" width="150" height="150" /> </a> </td> <td width="25%" align="center"> <a href="[field:arcurl/]">[field:title/]</a> </td> <td width="50%" align="left"> [field:description function='cn_substr(@me, 120)'/]... </td> </tr> {/dede:list}  <tr> <td colspan="3" align="center" bgcolor="#f5f5f5"> {dede:pagelist listsize='3' listitem='info,index,end,pre,next,pageno'} </td> </tr> </table>  </body> </html> 总结与注意事项 [field:mod/] 是关键: 实现多列布局的核心就是利用 mod 变量和 runphp 来动态插入 </tr><tr>。缩略图: 产品列表一定要使用 [field:litpic/] 来调用缩略图，确保你在发布产品时已经上传了缩略图。内容过滤: [field:description/] 的内容可能包含 HTML 标签，如果只想显示纯文本，可以使用 function='htmlspecialchars(@me)' 来转义。 CSS 优先: 虽然我们用 table 布局，但更现代的做法是使用 div + css 来实现网格布局，在 DedeCMS 中，table 布局因其结构简单、兼容性好，仍然是许多开发者的首选。栏目设置: 确保你的产品所在的栏目列表模板已经设置为这个模板文件，在后台“栏目管理” -> “选择对应栏目” -> “高级选项” -> “列表模板”中进行设置。