织梦首页导航标签如何正确调用？

channel

织梦首页导航栏最核心的标签是 channel，它用于获取栏目列表,并根据参数输出不同的HTML结构。

最常用和推荐的写法（推荐使用）

这种方法使用 channel 标签的 type='top' 属性，专门用于获取顶级栏目,非常适合导航栏。

标签代码

<ul id="nav">
    <li><a href="{dede:global.cfg_cmsurl/}/">网站首页</a></li>
    {dede:channel type='top' row='8'}
    <li><a href="[field:typelink/]">[field:typename/]</a></li>
    {/dede:channel}
</ul>

代码详解

1. <ul id="nav">:

   • 这是导航栏的HTML容器，ul (无序列表) 是最标准的结构，id="nav" 方便你用CSS进行样式设计。

2. <li><a href="{dede:global.cfg_cmsurl/}/">网站首页</a></li>:

   • 这是“网站首页”的链接。{dede:global.cfg_cmsurl/} 是一个全局变量，它会自动获取你网站在后台设置的“站点根网址”，这样即使你更换域名,链接也是正确的。

3. {dede:channel type='top' row='8'}:

   
   （图片来源网络，侵删）
   • 这是循环开始,它会调用顶级栏目。
   • type='top': 关键参数，表示只调用顶级栏目，如果你的导航栏只需要显示一级菜单,这个参数必不可少。
   • row='8': 可选参数，表示调用的栏目数量。'8' 代表调用8个栏目，如果省略,默认调用所有顶级栏目。

4. <li><a href="[field:typelink/]">[field:typename/]</a></li>:

   • 这是每个栏目的HTML结构。
   • [field:typelink/]: 字段标签，用于获取当前栏目的完整链接地址（https://www.yoursite.com/news/）。
   • [field:typename/]: 字段标签，用于获取当前栏目的栏目名称（新闻中心”）。

5. {/dede:channel}:

   循环结束标签。

带当前栏目高亮的写法（进阶）

在实际应用中，我们希望当前所在页面对应的导航项能高亮显示，以便用户知道自己在哪个位置，这需要结合 typeid 和 currentstyle 属性。

标签代码

<ul id="nav">
    <li><a href="{dede:global.cfg_cmsurl/}/" {dede:global.itemindex/}='0'>网站首页</a></li>
    {dede:channel type='top' row='8' currentstyle="<li class='nav-active'><a href='~typelink~'>~typename~</a></li>"}
    <li><a href="[field:typelink/]">[field:typename/]</a></li>
    {/dede:channel}
</ul>

代码详解

1. currentstyle="<li class='nav-active'><a href='~typelink~'>~typename~</a></li>":

   • currentstyle: 这是 channel 标签的一个特殊属性，用于定义“当前栏目”的HTML样式。
   • 当用户访问的页面属于某个顶级栏目时，channel 标签会自动为该栏目应用 currentstyle 中定义的样式。
   • ~typelink~ 和 ~typename~: 在 currentstyle 中，使用 字段名 的方式来调用字段，而不是 [field:字段名/]。

2. <li class='nav-active'>:

   • 我们为当前栏目的 li 元素添加了一个 nav-active 类，你可以在你的CSS文件中定义这个类的样式，

     .nav-active {
     background-color: #ff6600; /* 背景色变橙色 */
     }
     .nav-active a {
     color: #fff; /* 文字颜色变白 */
     font-weight: bold; /* 文字加粗 */
     }

3. {dede:global.itemindex/}='0':

   • 这个是为首页链接添加高亮准备的，它给首页的 a 标签添加一个自定义属性 itemindex="0"，然后你需要配合JS来判断，当首页是当前页面时，手动给首页的 li 添加 nav-active 类,这部分逻辑通常在JS文件中实现。

调用所有栏目（包括子栏目）

如果你的导航栏需要下拉菜单，显示顶级栏目及其子栏目，则需要使用 channel 标签的 sonlevel 属性。

标签代码

<ul id="nav">
    <li><a href="{dede:global.cfg_cmsurl/}/">网站首页</a></li>
    {dede:channel type='top' row='8'}
    <li>
        <a href="[field:typelink/]">[field:typename/]</a>
        {dede:channel type='son' noself='yes'}
        <ul class="sub-nav">
            <li><a href="[field:typelink/]">[field:typename/]</a></li>
        </ul>
        {/dede:channel}
    </li>
    {/dede:channel}
</ul>

代码详解

1. 外层 {dede:channel type='top'}: 循环所有顶级栏目。
2. {dede:channel type='son' noself='yes'}:
   • 嵌套标签：放在顶级栏目循环内部,用于获取当前顶级栏目的子栏目。
   • type='son': 关键参数，表示调用当前栏目的子栏目。
   • noself='yes': 可选参数，表示不调用栏目本身,只调用子栏目。
3. <ul class="sub-nav">: 这是子栏目的容器，通常我们会用CSS将其设置为隐藏，并在鼠标移到父级 li 上时显示（CSS hover 或 JS）。

常见问题与注意事项 (FAQ)

我的导航栏为什么只显示“首页”，栏目调不出来？

• 检查缓存：这是最常见的原因，在调用栏目后，请务必去后台点击 “生成” -> “更新主页HTML”,或者直接清空所有缓存。
• 检查标签：确保标签写法正确，特别是 type='top' 不要漏掉。
• 检查栏目设置：去后台的“栏目管理”中，确认你的栏目都是“顶级栏目”,并且没有被禁用。

如何让首页也高亮？

首页没有 typeid，currentstyle 对它无效,通常的解决方案是：

1. 给首页链接的 li 一个固定的 id，id="home-link"。
2. 编写一段简单的JavaScript，判断当前页面的URL是否是网站首页，如果是，就给 id="home-link" 的 li 元素添加一个高亮用的 class。

// 示例JS代码
$(document).ready(function() {
    // 获取当前页面的URL路径
    var currentPath = window.location.pathname;
    // 获取网站根URL
    var sitePath = "{dede:global.cfg_cmsurl/}/";
    // 如果当前路径等于网站根路径，说明是首页
    if (currentPath === sitePath || currentPath === '/') {
        $('#home-link').addClass('nav-active');
    }
});

织梦V5.7和V5.6的标签有区别吗？

核心的 channel 标签用法基本一致，但在V5.7版本之后，官方推荐使用更规范的 arclist、list 等标签，但对于导航这种简单的栏目列表调用，channel 标签依然是最高效、最直接的,你可以放心使用上述所有方法。

希望这份详细的教程能帮助你完美地调用织梦首页的导航！如果还有其他问题,随时可以提问。