dede wap如何调用栏目文章列表?

99ANYc3cd6
预计阅读时长 21 分钟
位置: 首页 DEDE建站 正文

WAP 模板通常有其独立的目录(如 /templets/default/wap/),并且为了适应手机屏幕,其样式和布局会有所不同。

dede wap调用栏目文章列表
(图片来源网络,侵删)

下面我将为你详细讲解如何在不同版本的 DedeCMS 中实现 WAP 栏目文章列表的调用,并提供一些常用的参数示例。


核心思路

  1. 确定模板位置:确保你正在编辑的是 WAP 模板文件,这个文件通常位于 你的网站根目录/templets/你的默认模板目录/wap/ 文件夹下。
  2. 使用 {dede:arclist}:这是调用文章列表最核心、最灵活的标签。
  3. 通过 typeid 参数指定栏目:告诉系统你要调用哪个栏目的文章。
  4. 结合 WAP 样式:在列表标签外层用 <div class="list"> 等容器包裹,并编写 CSS 样式以适应手机显示。

调用指定栏目的文章列表

这是最基本的需求,调用某个 ID 的栏目下的文章。

标签代码

{dede:arclist typeid='栏目ID' titlelen='30' row='10'}
    <li>
        <a href="[field:arcurl/]">[field:title/]</a>
        <span>[field:pubdate function="MyDate('m-d',@me)"/]</span>
    </li>
{/dede:arclist}

参数详解

  • typeid='栏目ID'这是最重要的参数,将 '栏目ID' 替换成你想要调用文章的栏目 ID。typeid='2' 就是调用栏目 ID 为 2 的所有文章。
    • 如何获取栏目 ID?登录 DedeCMS 后台,【核心】-> 【栏目管理】,鼠标移到目标栏目上,浏览器状态栏会显示 cid=数字,这个数字就是栏目 ID,len='30'`:标题长度,截取 30 个字符。
  • row='10':调用文章的数量,显示 10 篇。
  • [field:arcurl/]:文章的链接地址。
  • [field:title/]:文章的标题。
  • [field:pubdate function="MyDate('m-d',@me)"/]:文章的发布日期,这里使用了 function 对日期进行了格式化,显示为 "月-日" 的格式。

完整的 WAP 列表示例

将上面的列表代码放入一个容器中,并添加一些基本的 CSS 样式。

WAP 模板文件 (list_article_wap.htm)

dede wap调用栏目文章列表
(图片来源网络,侵删)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">{dede:field.title/}_{dede:global.cfg_webname/}</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
        .list-container { padding: 10px; }
        .list-title { font-size: 1.2em; font-weight: bold; margin-bottom: 10px; color: #333; }
        ul.news-list { list-style: none; padding: 0; margin: 0; }
        ul.news-list li { background: #fff; border-bottom: 1px solid #eee; padding: 12px 0; }
        ul.news-list li:last-child { border-bottom: none; }
        ul.news-list li a { text-decoration: none; color: #333; font-size: 1em; display: block; }
        ul.news-list li a:active { color: #0066cc; }
        .news-date { font-size: 0.8em; color: #999; float: right; }
    </style>
</head>
<body>
    <div class="list-container">
        <h1 class="list-title">{dede:field.title/}</h1>
        <!-- 这里是核心的列表调用代码 -->
        <ul class="news-list">
            {dede:arclist typeid='2' titlelen='30' row='10'}
            <li>
                <a href="[field:arcurl/]">
                    [field:title/]
                    <span class="news-date">[field:pubdate function="MyDate('m-d',@me)"/]</span>
                </a>
            </li>
            {/dede:arclist}
        </ul>
    </div>
</body>
</html>

进阶用法与常用参数

{dede:arclist} 非常强大,可以通过组合不同的参数实现各种效果。

调用多个栏目的文章

用逗号隔开多个栏目 ID。

{dede:arclist typeid='2,5,8' row='15'}
    ...
{/dede:arclist}

这会同时调用 ID 为 2, 5, 8 的三个栏目下的文章。

调用子栏目的文章(递归调用)

使用 typeid 参数,DedeCMS 默认就会递归调用该栏目及其所有子栏目的文章,无需额外设置。

dede wap调用栏目文章列表
(图片来源网络,侵删)
{dede:arclist typeid='3' row='10'}
    ...
{/dede:arclist}

如果栏目 ID 为 3 的栏目下有子栏目 3-1 和 3-2,那么这段代码会调用 3, 3-1, 3-2 三个栏目下的所有文章。

调用当前栏目及其子栏目的文章

在列表页模板(list_*.htm)中,可以直接使用 {dede:field.id/} 来获取当前栏目的 ID。

{dede:arclist typeid='{dede:field.id/}' row='10'}
    ...
{/dede:arclist}

这是制作通用列表模板最常用的方法。

显示文章缩略图

添加 imgwidthimgheight 参数,并使用 [field:picname/] 调用图片。

{dede:arclist typeid='2' row='5' imgwidth='80' imgheight='60'}
    <div class="item">
        <a href="[field:arcurl/]">
            <img src="[field:picname/]" alt="[field:title/]" />
            <span>[field:title/]</span>
        </a>
    </div>
{/dede:arclist}

显示文章摘要(描述)

使用 [field:description function='html2text(@me)'/] 来调用文章摘要,并用 html2text 函数过滤掉 HTML 标签。

{dede:arclist typeid='2' row='5' titlelen='40' infolen='100'}
    <li>
        <a href="[field:arcurl/]">
            <h3>[field:title/]</h3>
            <p>[field:description function='html2text(@me)'/]</p>
        </a>
    </li>
{/dede:arclist}
  • infolen='100':设置摘要的长度。

排序方式

通过 orderbyorderway 参数控制。

  • orderby='hot':按点击数排序
  • orderby='pubdate':按发布时间排序(默认)
  • orderby='sortrank':按文章排序值排序
  • orderway='desc':降序(默认)
  • orderway='asc':升序

示例:按点击数从高到低排序

{dede:arclist typeid='2' row='10' orderby='hot' orderway='desc'}
    ...
{/dede:arclist}

注意事项(针对旧版 DedeCMS)

如果你使用的是非常旧版本的 DedeCMS(如 5.7 之前),可能会遇到一个问题:在 WAP 模板中调用文章列表时,系统可能仍然会读取 PC 端的列表模板。

解决方法:

  1. 检查模板路径:确保你的 WAP 模板文件(如 list_wap.htm)放在正确的 WAP 模板目录下,/templets/default/wap/
  2. 修改标签:在某些旧版本中,可能需要使用 {dede:list} 标签来调用列表,而不是 {dede:arclist},但在绝大多数现代版本中(包括 5.7 及以后),{dede:arclist} 是标准且推荐使用的。

{dede:arclist} 不生效,可以尝试 {dede:list}

{dede:list pagesize='10'}
    <li>
        <a href="[field:arcurl/]">[field:title/]</a>
        <span>[field:pubdate function="MyDate('m-d',@me)"/]</span>
    </li>
{/dede:list}

{dede:list} 的参数与 {dede:arclist 略有不同,例如用 pagesize 代替 row


  1. 定位:找到并编辑你的 WAP 模板文件。
  2. 核心标签:使用 {dede:arclist}
  3. 指定栏目:通过 typeid='栏目ID'typeid='{dede:field.id/}' 来调用目标栏目的文章。
  4. 灵活组合:根据需要使用 titlelen, row, imgwidth, orderby 等参数来定制列表的显示效果。
  5. 样式适配:编写适合手机的 CSS 样式,确保良好的移动端用户体验。

希望这份详细的指南能帮助你成功调用 DedeCMS WAP 端的栏目文章列表!

-- 展开阅读全文 --
头像
c语言版 flappy bird
« 上一篇 2025-12-23
C语言int转double会丢失精度吗?
下一篇 » 2025-12-23

相关文章

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