dede左侧栏目导航如何实现？

第二步：制作基础动态导航

这是最常用、最核心的方法，我们假设你已经准备好了你的模板文件（通常是 index.htm）。

找到模板文件

你的网站首页模板文件通常位于 /templets/你的默认模板文件夹/ 目录下，文件名为 index.htm。

使用 {dede:channel}

在 index.htm 文件中，你希望显示导航的位置，插入以下代码：

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

代码详解

• {dede:channel ...}: 这是调用栏目的开始和结束标签。
• type='top': 这是一个非常重要的属性，表示只调用顶级栏目，如果你的导航只需要显示一级菜单，这个属性是必须的。
• row='8': 表示调用栏目的数量，这里调用8个，如果你不设置，它会调用所有顶级栏目。
• [field:typelink/]: 这是一个字段，表示栏目的链接地址，它会生成类似 https://www.yoursite.com/a/1.html 这样的链接。
• [field:typename/]: 这是字段，表示栏目的名称。"公司简介"、"产品中心"等。

效果预览： 这段代码会生成类似这样的HTML：

（图片来源网络，侵删）

<a href="/a/1.html">公司简介</a>
<a href="/a/2.html">产品中心</a>
<a href="/a/3.html">新闻动态</a>
...

---

第三步：美化与样式优化

纯文本的导航很难看,我们需要给它加上CSS样式，让它变成一个美观的菜单。

添加列表结构

为了更好地控制样式,我们通常会把导航链接放在一个无序列表 <ul> 中。

<div class="mainnav">
    <ul>
        {dede:channel type='top' row='8'}
            <li><a href="[field:typelink/]">[field:typename/]</a></li>
        {dede:channel}
    </ul>
</div>

编写CSS样式

在你的模板的CSS文件中（/templets/你的默认模板文件夹/style/css.css），添加以下样式：

/* 导航容器 */
.mainnav {
    width: 200px; /* 设置导航宽度 */
    background-color: #f4f4f4;
    border: 1px solid #ddd;
}
/* 导航列表 */
.mainnav ul {
    list-style: none; /* 去掉列表前的点 */
    margin: 0;
    padding: 0;
}
/* 导航列表项 */
.mainnav li {
    border-bottom: 1px solid #e0e0e0; /* 每个栏目之间加一条线 */
}
/* 导航链接 */
.mainnav a {
    display: block; /* 让链接充满整个li */
    padding: 12px 15px; /* 增加内边距，让链接更好点击 */
    text-decoration: none; /* 去掉下划线 */
    color: #333;
    font-size: 16px;
}
/* 鼠标悬停效果 */
.mainnav a:hover {
    background-color: #007bff; /* 鼠标放上去时背景变色 */
    color: #ffffff; /* 鼠标放上去时文字变色 */
}
/* 当前栏目高亮效果（可选，需要配合PHP） */
.mainnav .current a {
    background-color: #0056b3;
    color: #ffffff;
}

你的导航应该会变成一个有边框、有间距、有悬停效果的漂亮菜单了。

（图片来源网络，侵删）

---

第四步：进阶功能

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

如果你的导航需要显示二级甚至多级菜单（鼠标移到“产品中心”时，下方弹出“产品A”、“产品B”），你需要使用 son 或 self 类型。

• type='son': 调用指定栏目的子栏目。
• type='self': 调用指定栏目及其子栏目。

要实现二级菜单,通常需要两层 {dede:channel} 循环。

示例代码：

<div class="mainnav">
    <ul>
        {dede:channel type='top' row='8'}
            <li>
                <a href="[field:typelink/]">[field:typename/]</a>
                {dede:channel type='son' noself='yes'}
                    <ul class="subnav">
                        <li><a href="[field:typelink/]">[field:typename/]</a></li>
                    </ul>
                {/dede:channel}
            </li>
        {/dede:channel}
    </ul>
</div>

然后为 .subnav 编写CSS样式，通常默认是隐藏的（display: none;），当鼠标移到父级 <li> 时再显示出来（使用 hover 伪类）。

让当前栏目高亮

这是一个非常实用的功能,让用户知道自己当前在哪个页面。

默认的 {dede:channel} 标签本身不带这个功能，我们需要使用一个更强大的标签：{dede:global name='typeid'} 获取当前页面的栏目ID，然后通过判断来实现。

使用 channelartlist 标签（推荐） 这个标签专门用于制作带有当前栏目高亮的导航。

{dede:channelartlist typeid='top' row='8'}
    <li class="{dede:field name='typeid' runphp='yes'}@me = (@me == '当前栏目ID') ? 'current' : '';{/dede:field}">
        <a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>
    </li>
{/dede:channelartlist}

注意：typeid='top' 确保只顶级栏目。runphp='yes' 用于PHP判断。

在模板文件中判断（更灵活） 在模板文件中，你可以使用PHP代码来实现。

<div class="mainnav">
    <ul>
        {dede:channel type='top' row='8'}
            <li class="current_{dede:global name='typeid'/}">
                <a href="[field:typelink/]">[field:typename/]</a>
            </li>
        {/dede:channel}
    </ul>
</div>

在你的CSS文件中,根据不同的栏目ID来定义样式：

/* 如果当前页面ID是1，则class为current_1的li高亮 */
.current_1 a {
    background-color: #0056b3;
    color: #ffffff;
}
/* 如果当前页面ID是2，则class为current_2的li高亮 */
.current_2 a {
    background-color: #28a745;
    color: #ffffff;
}
/* ...以此类推 */

这个方法比较麻烦,栏目多了要写很多CSS，但胜在简单直接。

---

总结与常见问题

1. 导航不显示或显示乱码？

   • 检查标签拼写是否正确,特别是 {dede:channel} 和 {/dede:channel} 是否配对。
   • 确保后台已经创建了栏目,并且栏目类型为“栏目首页”或“外部链接”。
   • 检查模板文件编码是否为UTF-8（无BOM）。

2. 如何添加首页链接？

   • {dede:channel} 默认不调用首页，你可以手动在导航列表的最前面或最后面添加一个首页链接。

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

3. 如何改变导航的顺序？

   在后台“栏目管理”中，直接拖动栏目即可调整顺序，DedeCMS会按照你在后台设置的排序来生成导航。

通过以上步骤,你就可以从零开始，制作出功能完善、样式美观的DedeCMS左侧栏目导航了，如果你需要更复杂的多级菜单，可以考虑使用一些成熟的jQuery或CSS菜单插件，但核心的数据调用仍然离不开 {dede:channel}