dede栏目中更多标签如何自定义或调用?

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

“更多”标签的核心作用是:在当前栏目页中,展示其他子栏目或同级栏目的链接,方便用户快速导航到网站的其他相关部分。

dede栏目中更多标签
(图片来源网络,侵删)

在DedeCMS中,实现“更多”功能最常用的标签是 channeltype 标签,下面我们分场景详细介绍。


最常用:channel

channel 标签是DedeCMS中最灵活、最强大的栏目调用标签,可以实现“更多”的绝大多数需求。

场景1:调用当前栏目的所有子栏目(最经典的“更多”)

这是最常见的用法,通常放在一个栏目列表的末尾,用于展示该栏目下的所有子栏目。

标签代码:

dede栏目中更多标签
(图片来源网络,侵删)
{dede:channel type='son' currentstyle="<li><a href='~typelink~' class='thisclass'>~typename~</a></li>"}
    <li><a href='[field:typelink/]'>[field:typename/]</a></li>
{/dede:channel}

参数解析:

  • type='son': 这是关键参数,表示调用当前栏目的直接子栏目
  • currentstyle: 用于定义当前栏目的HTML样式。~typename~~typelink~ 会被替换为当前栏目的名称和链接。class='thisclass' 是一个常用的CSS类名,方便你为当前栏目添加高亮样式。
  • [field:typelink/]: 子栏目的链接。
  • [field:typename/]: 子栏目的名称。

示例效果: 假设你在“产品中心”栏目页,使用此标签会列出“产品中心”下的所有一级子栏目,如“产品A”、“产品B”、“产品C”。

场景2:调用同级栏目(兄弟栏目)

有时你可能想在某个栏目页,展示与它同级的其他栏目。

标签代码:

dede栏目中更多标签
(图片来源网络,侵删)
{dede:channel type='self' currentstyle="<li><a href='~typelink~' class='thisclass'>~typename~</a></li>"}
    <li><a href='[field:typelink/]'>[field:typename/]</a></li>
{/dede:channel}

参数解析:

  • type='self': 表示调用与当前栏目同级的栏目(不包括自身和父级栏目)。

示例效果: 假设你在“产品A”栏目页,使用此标签会列出“产品B”和“产品C”。

场景3:调用顶级栏目

如果你想调用网站最顶级的栏目(一级栏目),无论当前在哪一个栏目下。

标签代码:

{dede:channel type='top' currentstyle="<li><a href='~typelink~' class='thisclass'>~typename~</a></li>"}
    <li><a href='[field:typelink/]'>[field:typename/]</a></li>
{/dede:channel}

参数解析:

  • type='top': 表示调用顶级栏目(即没有父级栏目的栏目)。

场景4:调用指定父栏目的子栏目

如果你想调用一个特定栏目的子栏目,而不是当前栏目的。

标签代码:

{dede:channel type='son' typeid='父栏目的ID' currentstyle="<li><a href='~typelink~' class='thisclass'>~typename~</a></li>"}
    <li><a href='[field:typelink/]'>[field:typename/]</a></li>
{/dede:channel}

参数解析:

  • typeid='父栏目的ID': 通过指定栏目ID,来调用该ID栏目的子栏目。typeid='5' 就会调用ID为5的栏目的所有子栏目。

备选方案:type

type 标签是 channel 标签的一个简化版本,功能相对单一,但在某些特定场景下使用更方便。

场景:调用当前栏目的直接子栏目

这是 type 标签最主要的用途,效果与 channel type='son' 类似。

标签代码:

{dede:type typeid='0'}
    <a href="[field:typelink/]">[field:typename/]</a>
{/dede:type}

参数解析:

  • typeid='0': 这个参数很特殊,当 typeid0 时,它表示当前栏目,这个标签会调用当前栏目的子栏目。

channel 的区别: type 标签不能循环,它只会返回第一个子栏目,如果你想一次性列出所有子栏目,必须使用 channel。type 标签通常用于只想获取一个栏目信息(比如栏目名称和链接)的场景。


进阶用法与样式美化

调用栏目并显示文章数

很多“更多”列表希望显示每个栏目下有多少篇文章,这能增加用户点击的吸引力。

方法: 使用 GetSonCat 函数获取子栏目信息,然后循环输出。

标签代码:

{dede:channel type='son' currentstyle="<li class='active'><a href='~typelink~'>~typename~</a></li>"}
    <li>
        <a href="[field:typelink/]">[field:typename/]</a>
        <!-- 调用当前子栏目下的文章数 -->
        <span>(<span id="arcsoncount[field:id/]">加载中...</span>)</span>
    </li>
{/dede:channel}
<!-- 在页面底部加入JS,用于异步获取文章数 -->
<script language="javascript">
    function GetArcsCount(typeid) {
        var url = "{dede:global.cfg_cmspath/}/count.php?typeid=" + typeid;
        var myajax = new DedeAjax(url, false, '', '', '', 0);
        myajax.SendGet();
        var result = myajax.GetAjaxBody();
        document.getElementById('arcsoncount' + typeid).innerHTML = result;
        myajax = null;
    }
    // 遍历所有栏目ID并调用
    {dede:channel type='son'}
        GetArcsCount([field:id/]);
    {/dede:channel}
</script>

说明:

  • id="arcsoncount[field:id/]" 为每个栏目创建一个唯一的ID。
  • count.php 是DedeCMS自带的用于统计文章数的脚本。
  • 这段JS会在页面加载后,异步获取每个子栏目的文章数并填充到对应的 <span> 标签中。

使用CSS美化“更多”列表

为了让“更多”列表更好看,通常会用CSS来定义样式。

HTML结构示例:

<ul class="more-links">
    {dede:channel type='son' currentstyle="<li class='current'><a href='~typelink~'>~typename~</a></li>"}
        <li><a href="[field:typelink/]">[field:typename/]</a></li>
    {/dede:channel}
</ul>

CSS样式示例:

.more-links {
    list-style: none; /* 去掉默认列表前的点 */
    padding: 0;
    margin: 0;
    display: flex; /* 使用flex布局,让列表项水平排列 */
    gap: 20px; /* 列表项之间的间距 */
}
.more-links li {
    /* 可以给每个列表项添加一些样式 */
}
.more-links a {
    text-decoration: none; /* 去掉下划线 */
    color: #333;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s; /* 添加鼠标悬停过渡效果 */
}
.more-links a:hover {
    background-color: #f0f0f0;
}
.more-links .current a {
    /* 当前栏目高亮样式 */
    color: #fff;
    background-color: #007bff;
}

总结与选择

需求场景 推荐标签 关键参数 说明
调用当前栏目的所有子栏目 {dede:channel} type='son' 最常用、最标准的“更多”标签
调用同级栏目 {dede:channel} type='self' 用于展示兄弟栏目
调用顶级栏目 {dede:channel} type='top' 用于网站主导航等
调用指定栏目的子栏目 {dede:channel} typeid='指定ID' 灵活调用任意层级的子栏目
仅获取一个栏目信息 {dede:type} typeid='0' 功能单一,不能循环列表

核心建议: 在99%的情况下,你需要实现“更多”功能,直接使用 {dede:channel type='son'} 就能满足需求,记住它的基本结构,并根据你的需要调整 type 参数和 currentstyle 样式即可。

-- 展开阅读全文 --
头像
C语言算法目的为何是求解?
« 上一篇 今天
dede产品页模板下载哪里找?
下一篇 » 今天

相关文章

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