dede如何调用栏目导航？

理解 DedeCMS 的标签

DedeCMS 的核心是它的模板标签系统，调用数据主要使用 dede:channel 和 dede:arclist 等标签。

• dede:channel：专门用于调用栏目列表，它可以根据参数获取顶级栏目、子栏目、当前栏目的子栏目等。
• typeid：指定栏目ID，如果为空或为0,则默认调用顶级栏目。
• type：指定栏目类型。top 表示顶级栏目，son 或 self 表示当前栏目的子栏目。
• row：调用条数,即显示多少个栏目。
• currentstyle：用于高亮显示当前所在栏目,这是一个非常实用的属性。

调用顶级栏目（最常用）

这是最基本的需求,比如网站首页的顶部主导航。

适用场景：网站首页的主导航栏。

代码示例：

{dede:channel type='top' row='8'}
    <li><a href="[field:typeurl/]">[field:typename/]</a></li>
{/dede:channel}

代码解析：

• {dede:channel type='top' row='8'}：
  • type='top'：明确表示调用所有顶级栏目。
  • row='8'：限制只显示8个栏目，如果不需要限制，可以去掉 row 属性。
• [field:typeurl/]：调用栏目的链接地址。
• [field:typename/]：调用栏目的名称。

调用当前栏目的子栏目（带高亮）

当用户进入某个栏目（如“新闻中心”）时，我们希望在该页面显示其下的子栏目（如“公司新闻”、“行业动态”）,并且高亮显示当前栏目。

适用场景：网站侧边栏的“子栏目导航”或面包屑导航下方。

代码示例：

<h3>子栏目导航</h3>
<ul>
    {dede:channel type='son' currentstyle="<li class='thisclass'><a href='~typelink~'>~typename~</a></li>"}
        <li><a href="[field:typeurl/]">[field:typename/]</a></li>
    {/dede:channel}
</ul>

代码解析：

• {dede:channel type='son' ...}：
  • type='son'：表示调用当前栏目的直接子栏目。type='self' 也可以达到同样效果。
• currentstyle="..."：这是实现高亮的关键。
  • 当循环到的栏目是当前栏目时，[field:typeurl/] 和 [field:typename/] 会被替换成 ~typelink~ 和 ~typename~。
  • 你可以在 currentstyle 中自定义高亮样式，比如给 <li> 添加一个 class="thisclass"，然后通过CSS来定义样式（背景色加粗等）。

调用顶级栏目并高亮其当前子栏目

这是一个更复杂的场景，常用于主导航，当用户访问“新闻中心”下的“公司新闻”时，主导航中的“新闻中心”需要高亮显示。

适用场景：网站顶部主导航,需要根据当前页面所在的顶级栏目进行高亮。

实现思路：

1. 首先获取当前栏目的顶级栏目ID。
2. 然后使用这个ID作为 typeid 来调用顶级栏目列表。
3. 在循环中判断，如果调用的栏目ID和当前顶级栏目ID相同,则应用高亮样式。

代码示例：

<ul id="mainnav">
    {dede:channel type='top' row='8'}
        <li>
            <!-- 如果是当前顶级栏目，则添加currentclass -->
            <a href="[field:typeurl/]" [field:ID runphp='yes'] if(@me == GetTopid(@me)) @me="class='current'"; else @me=""; [/field:ID]>
                [field:typename/]
            </a>
        </li>
    {dede:channel}
</ul>

代码解析：

• [field:ID runphp='yes'] ... [/field:ID]：这是一个强大的PHP代码执行标签。
  • @me：代表当前标签的值,在这里是当前栏目的ID。
  • GetTopid(@me)：这是DedeCMS的一个内置函数,用来获取指定栏目ID的顶级栏目ID。
  • if(@me == GetTopid(@me))：判断当前栏目的ID是否等于它自己的顶级ID（即它本身就是顶级栏目），如果相等，则输出 class='current',否则输出空。
  • 这种方法虽然能实现，但相对复杂，且 GetTopid 函数在某些版本中可能不稳定。

更推荐的方法（利用 currentstyle 和外部变量）：

{dede:global name='typeid' runphp='yes'}
    $topid = GetTopid(@me);
    @me = $topid;
{/dede:global}
{dede:channel type='top' typeid='[field:global name='typeid'/]' currentstyle="<li class='thisclass'><a href='~typelink~'>~typename~</a></li>"}
    <li><a href="[field:typeurl/]">[field:typename/]</a></li>
{/dede:channel}

这种方法更清晰,但需要额外处理。

调用指定栏目的子栏目

有时候我们想在固定位置（如页脚）显示某个特定栏目的所有子栏目。

适用场景：页脚的“产品分类”或“关于我们”的子栏目列表。

代码示例：

假设“产品中心”这个栏目的ID是 2。

<h3>产品分类</h3>
<ul>
    {dede:channel typeid='2' type='son'}
        <li><a href="[field:typeurl/]">[field:typename/]</a></li>
    {dede:channel}
</ul>

代码解析：

• typeid='2'：明确指定要获取哪个栏目的子栏目，这里的 2 是“产品中心”栏目的ID，你可以在后台“栏目管理”中查看。
• type='son'：表示调用 typeid 指定栏目的子栏目。

CSS 样式示例

为了让导航更美观,通常会配合CSS使用。

/* 基础导航样式 */
#nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
#nav li {
    margin-right: 10px;
}
#nav a {
    text-decoration: none;
    color: #333;
    padding: 8px 15px;
    display: block;
}
#nav a:hover {
    background-color: #f0f0f0;
}
/* 高亮样式 */
#nav .thisclass a {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

希望这些详细的解释和示例能帮助你熟练地在 DedeCMS 中调用栏目导航！