织梦导航标签标题如何自定义设置？

核心导航标签

织梦制作导航栏最核心、最常用的标签是 channel 和 channelartlist。

1. {dede:channel}：用于调用一级栏目，它是最基础、最常用的导航标签。
2. {dede:channelartlist}：用于调用一级栏目及其对应的二级栏目，常用于制作带有下拉子菜单的导航栏。

使用 {dede:channel} 标签制作简单导航

这个标签主要用于显示网站的顶级栏目,结构清晰，配置简单。

基本语法和属性

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

核心属性解析（控制标题的关键）

的底层字段

在标签内部,通过 [field:xxx/] 来获取栏目的各种信息，其中控制标题的是：

• [field:typename/]：输出栏目的名称，这是最常用的字段，就是你看到的导航文字。
• [field:typelink/]：输出栏目的链接地址。
• [field:id/]：输出栏目的ID。

完整示例：带高亮样式的导航栏

假设我们希望当前页面对应的导航项文字变成红色并加粗。

<ul id="nav">
    {dede:channel type='top' row='8' currentstyle="<li class='active'><a href='~typelink~' class='current'>~typename~</a></li>"}
        <li><a href="[field:typelink/]">[field:typename/]</a></li>
    {/dede:channel}
</ul>

代码解析：

1. currentstyle 属性定义了高亮时的HTML结构，注意 ~typename~ 和 ~typelink~ 的写法，这是织梦模板中的一种简写，等同于 [field:typename/] 和 [field:typelink/]。
2. 当用户访问的页面属于某个顶级栏目时,织梦会自动将 currentstyle 里的内容替换掉默认的 <li>...</li> 结构。
3. class='current' 是我们自定义的CSS类，用于样式控制。

使用 {dede:channelartlist} 标签制作带下拉菜单的导航

这个标签可以轻松实现“一级栏目 + 其子栏目”的下拉导航效果。

基本语法和属性

{dede:channelartlist typeid='top' row='8'}
    <li>
        <a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>
        <ul>
            {dede:channel type='son' noself='yes'}
                <li><a href="[field:typelink/]">[field:typename/]</a></li>
            {dede:channel}
        </ul>
    </li>
{/dede:channelartlist}

核心属性解析

的字段

• 一级栏目标题：通过 {dede:field name='typename'/} 获取。
• 一级栏目链接：通过 {dede:field name='typeurl'/} 获取。
• 二级栏目标题：通过嵌套的 {dede:channel} 里的 [field:typename/] 获取。
• 二级栏目链接：通过嵌套的 {dede:channel} 里的 [field:typelink/] 获取。

完整示例：带下拉菜单和高亮的导航栏

这个例子结合了 channelartlist 和 channel 的高亮功能。

<ul id="mainnav">
    {dede:channelartlist typeid='top' row='8' currentstyle="<li class='on'><a href='~typeurl~' class='current'>~typename~</a>
        <ul>
            {dede:channel type='son' noself='yes' currentstyle="<li class='active'><a href='~typelink~' class='current'>~typename~</a></li>"}
                <li><a href='[field:typelink/]'>[field:typename/]</a></li>
            {/dede:channel}
        </ul>
    </li>"}
        <li>
            <a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>
            <ul>
                {dede:channel type='son' noself='yes'}
                    <li><a href="[field:typelink/]">[field:typename/]</a></li>
                {dede:channel}
            </ul>
        </li>
    {/dede:channelartlist}
</ul>

代码解析：

1. channelartlist 的 currentstyle 非常强大，它包含了整个一级栏目及其子菜单的HTML结构，当当前页面属于某个一级栏目时，这个结构会生效，并给 <li> 添加 class='on'，给 <a> 添加 class='current'。
2. 嵌套的 {dede:channel type='son'} 同样有自己的 currentstyle，用于高亮当前页面所属的二级栏目。
3. noself='yes' 表示在调用子栏目时，不显示栏目本身（即只显示子栏目，不重复显示一级栏目名称）。

进阶技巧与注意事项

首页链接的处理

导航栏通常需要一个“首页”链接，最简单的方法是在 {dede:channel} 标签外部手动添加。

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

调用指定栏目

如果不想显示所有顶级栏目,只想显示指定的几个，可以在 typeid 属性中填写它们的ID，用英文逗号隔开。

{dede:channel typeid='1,3,5' row='3'}
    <a href='[field:typelink/]'>[field:typename/]</a>
{/dede:channel}

这会只调用ID为1、3、5的三个栏目。

缓存设置

不经常变动,为了提高网站速度，建议开启缓存。

• 对于 {dede:channel}：在标签中加入 cache='3600'，缓存时间为3600秒（1小时）。

  {dede:channel type='top' cache='3600' row='8'}
      ...
  {/dede:channel}

• 对于 {dede:channelartlist}：使用 cacheid 属性。

  {dede:channelartlist typeid='top' cacheid='nav' row='8'}
      ...
  {/dede:channelartlist}

CSS 样式配合

无论使用哪个标签,最终都需要用CSS来美化，高亮功能依赖于 currentstyle 或 currentstyle 中定义的CSS类。

/* 默认导航样式 */
#nav li a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
}
/* 当前栏目高亮样式 */
#nav .current,
#nav li.active a,
#mainnav .on a {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}
/* 下拉菜单样式 */
#mainnav li ul {
    display: none; /* 默认隐藏 */
    list-style: none;
}
#mainnav li:hover ul {
    display: block; /* 鼠标悬停时显示 */
}

掌握 channel 和 channelartlist 的用法，特别是 typeid、row、type 和 currentstyle 这几个属性，你就可以制作出任何你想要的织梦导航栏了。