织梦如何添加顶级导航？-织梦建站-盈思创科技

在后台添加导航栏目：这是在数据库中创建导航项。
在前台模板中调用并显示导航：这是将后台添加的栏目显示在网站的导航栏里。

下面我将为你提供详细的图文步骤和代码示例,适用于大多数织梦版本（如DedeCMS 5.7、V57等）。

（图片来源网络，侵删）

第一步：在后台添加导航栏目

登录织梦后台 使用你的管理员账号登录织梦网站的后台管理界面。
进入“栏目管理” 在左侧菜单栏中，找到并点击 【栏目管理】 -> 【添加栏目】。
填写栏目信息 在弹出的“添加栏目”页面中，你需要填写以下几个关键信息：
- 栏目名称：这是导航栏上显示的文字，首页”、“关于我们”、“产品中心”等。
  （图片来源网络，侵删）
- 栏目目录：这是栏目的URL别名，建议使用英文或拼音，about, products，这会影响到栏目链接的URL地址。
- 栏目类型：这是最关键的一步！
  - 对于顶级导航,请务必选择 【栏目主页】。
  - 如果选择【外部链接】，可以链接到其他网站。
  - 如果选择【单页文档】，则用于制作如“联系我们”、“公司简介”这类不需要列表页的独立页面。
  - 如果选择【频道封面】，则用于制作一个包含子栏目的频道页。
- 上级栏目：默认就是“顶级栏目”，千万不要去修改它，如果你修改了它，这个栏目就会变成某个栏目的子栏目，而不是顶级导航。
- （可选）是否隐藏：如果某个栏目暂时不想在导航栏显示，可以勾选此项，后续可以通过调用参数来控制。
  （图片来源网络，侵删）
- （可选）设置栏目封面：可以为这个栏目设置一个封面图片，这在制作一些特殊样式的导航时会用到。
- （可选）设置跳转链接：如果希望点击这个导航后跳转到其他页面（而不是默认的栏目列表页或文章列表页），可以在这里填写一个外部URL或内部文档的链接。
确认并保存 填写完必要信息后，点击页面底部的 【确定】 按钮，重复此步骤，为你需要的所有顶级导航项（如“首页”、“关于我们”、“新闻动态”、“联系我们”）创建栏目。

第二步：在前台模板中调用并显示导航

添加完栏目后,我们需要在网站的模板文件中，使用织梦的标签将这些栏目循环调用出来。

找到模板文件 登录你的FTP或主机文件管理器，进入织梦的模板目录，通常是 /templets/ 目录，然后找到你当前使用的模板文件夹，/default/，在这个文件夹里，找到网站的头部模板文件，通常是 header.htm。
编写调用导航的代码 用代码编辑器（如VS Code, Sublime Text, Dreamweaver）打开 header.htm 文件，找到你想要放置导航栏的位置（通常在 <body> 标签之后，<header> 或 <nav> 标签内）。

在该位置粘贴以下织梦标签代码：
```
<nav class="main-nav">
  <ul>
    {dede:channel type='top' row='8' currentstyle="<li class='active'><a href='~typelink~'>~typename~</a></li>"}
    <li><a href="[field:typelink/]">[field:typename/]</a></li>
    {/dede:channel}
  </ul>
</nav>
```
代码详解
- {dede:channel}：这是织梦的栏目循环标签。
- type='top'：这个属性至关重要，它表示只调用“顶级栏目”。
- row='8'：表示调用顶级栏目的数量，你可以根据需要修改这个数字。
- currentstyle="<li class='active'><a href='~typelink~'>~typename~</a></li>"：这是高亮当前所在栏目的样式。
  - 当用户访问“关于我们”页面时，这个导航项会自动应用 class='active' 这个样式，方便你用CSS来高亮显示当前页面。
  - ~typelink~ 会被替换为栏目的链接地址。
  - ~typename~ 会被替换为栏目的名称。
- [field:typelink/]：在普通循环项中，表示调用当前栏目的链接。
- [field:typename/]：在普通循环项中，表示调用当前栏目的名称。

添加CSS样式（可选但推荐） 为了让导航栏看起来更美观，你需要在模板的CSS文件（通常是 /templets/default/style/dedecms.css）中添加一些样式。

为上面的HTML结构添加以下CSS：

.main-nav {
  background-color: #333;
  padding: 0 20px;
}
.main-nav ul {
  list-style: none; /* 移除列表前的点 */
  margin: 0;
  padding: 0;
  display: flex; /* 使用Flex布局让导航项水平排列 */
}
.main-nav li {
  margin: 0 15px; /* 导航项之间的间距 */
}
.main-nav a {
  display: block; /* 将a标签设置为块级元素 */
  color: #fff;
  text-decoration: none;
  line-height: 50px; /* 设置行高，使文字垂直居中 */
  font-size: 16px;
}
.main-nav a:hover {
  color: #ffcc00; /* 鼠标悬停时的颜色 */
}
/* 高亮当前页面的导航项 */
.main-nav .active a {
  color: #ffcc00;
  font-weight: bold;
}

更新并查看效果 保存 header.htm 文件和修改后的CSS文件，然后刷新你的网站前台页面，你应该能看到一个由顶级栏目组成的、可以点击的导航栏了。

常见问题与解决方法

Q: 为什么我的导航栏只显示“首页”？ A: 这很可能是因为你在添加栏目时，栏目类型没有选择 【栏目主页】，或者上级栏目被错误地设置成了其他栏目，请检查后台的栏目设置。

Q: 如何让“首页”也成为导航栏的一部分？ A: 织梦的 {dede:channel type='top'} 标签默认不包含“首页”，通常有两种方法：

手动添加：在 <ul> 标签里，手动写一个首页的 <li>。

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

使用其他标签：可以使用 {dede:global name='cfg_indexname'/} 来获取网站首页名称，链接为。

Q: 导航栏的样式不是我想要的，如何修改？ A: 导航栏的样式完全由CSS控制，请根据你的设计需求，修改 .main-nav、.main-nav ul、.main-nav li、.main-nav a 等CSS选择器，调整颜色、间距、字体、布局等。

Q: 如何在导航中添加外部链接？ A: 在后台添加栏目时，选择 【外部链接】 类型，然后在“跳转链接”字段中填入你想要跳转的URL地址（https://www.baidu.com），前台调用时，它会自动被渲染为 <a href="...">...</a> 的形式。

通过以上步骤,你就可以轻松地为织梦网站添加一个功能完善、样式美观的顶级导航栏了。

织梦如何添加顶级导航？

第一步：在后台添加导航栏目

第二步：在前台模板中调用并显示导航

常见问题与解决方法

相关文章

目录[+]