如何精确控制网站导航菜单的显示内容、层级和当前选中状态？

网站导航，就像一个网站的指路牌，清晰、直观的导航系统能极大地提升用户体验，帮助访客快速找到所需信息。同时，对搜索引擎来说，良好的导航结构也是理解网站内容层级、进行有效抓取和排名的关键。在安企CMS中，我们可以灵活而精确地控制网站导航的显示内容、层级和当前选中状态，让导航既美观又实用。

核心理念：后台配置与前端模板渲染分离

安企CMS在处理网站导航时，遵循着“后台配置数据，前端模板渲染展示”的原则。这意味着，您在后台设置好导航的结构、链接和属性，而具体的样式、布局和互动逻辑则由前端模板文件来决定。这种分离的设计，让您既能方便地管理导航内容，又能拥有极高的自由度来定制导航的外观。

第一步：在后台精细化设置导航菜单

所有导航菜单的显示内容、链接类型和大致层级，都源于安企CMS后台的“网站导航设置”功能。

1. 管理导航类别：不止一个主菜单 在“网站导航设置”中，您会发现默认的“默认导航”类别。但您的网站可能不只有顶部主导航，还可能需要页脚导航、侧边栏导航、甚至是登录后用户中心导航。安企CMS支持自定义创建多个导航类别，例如，您可以添加一个名为“页脚导航”的新类别。这样，不同的导航区域就能独立管理，互不干扰。

2. 添加与编辑导航链接：控制显示内容与层级 进入具体的导航类别后，您就可以开始添加或编辑导航链接了。每个导航链接都可以细致地设定多项内容：

   • 显示名称： 这是导航在前台展示的文字，您可以灵活更改，不一定非要和链接指向的页面名称完全一致。
   • 子标题名称： 如果您的导航需要同时显示中文和英文等双标题，可以在这里添加对应文字，供模板调用。
   • 导航描述： 为导航项添加一段简要介绍文字，同样可供模板在特定布局下调用。
   • 链接类型： 安企CMS提供了三种灵活的链接类型：
     • 内置链接： 快速指向网站首页、文章模型首页、产品模型首页或其他自定义模型首页，无需手动填写URL。
     • 分类页面链接： 直接选择已创建的文章分类、产品分类或单个独立页面作为导航链接，系统会自动生成正确路径。
     • 外部链接： 允许您手动输入任意URL，无论是站内特定路径还是站外链接，都能轻松添加。
   • 层级关系： 安企CMS原生地支持两级导航链接。您可以通过“上级导航”选项，将当前链接设置为顶级导航，或指定其隶属于某个已存在的顶级导航，从而构建清晰的二级菜单结构。
   • 显示顺序： 通过设置数字大小来调整导航项的排列位置，数字越小越靠前，方便您对菜单进行精确排序。

第二步：利用模板标签灵活展现导航

后台配置完成后，接下来就是通过模板标签将这些导航数据呈现在网站前端。安企CMS的模板引擎功能强大，这里主要会用到 navList 标签。

1. navList 标签的基本用法 navList 是获取导航列表的核心标签。它会根据您在后台设置的导航类别ID (typeId)，获取所有相关的导航链接数据。

   {% navList navs %}
   <ul>
       {% for item in navs %}
       <li>
           <a href="{{ item.Link }}">{{item.Title}}</a>
       </li>
       {% endfor %}
   </ul>
   {% endnavList %}
   

   这段代码会遍历 navs 变量，为每个顶级导航项生成一个列表项和链接。item.Link 会自动输出正确的导航链接，item.Title 则显示您在后台设置的导航名称。

2. 实现二级导航菜单 navList 标签返回的每个 item 对象中，如果该导航项有子导航，会包含一个 NavList 属性。您可以嵌套一个 for 循环来展现二级菜单：

   {% navList navs %}
   <ul>
       {% for item in navs %}
       <li>
           <a href="{{ item.Link }}">{{item.Title}}</a>
           {% if item.NavList %} {# 判断是否有二级导航 #}
           <dl>
               {% for inner in item.NavList %}
                   <dd><a href="{{ inner.Link }}">{{inner.Title}}</a></dd>
               {% endfor %}
           </dl>
           {% endif %}
       </li>
       {% endfor %}
   </ul>
   {% endnavList %}
   

   这样，一个结构清晰的两级导航菜单就通过简单的嵌套循环呈现出来了。

3. 导航中的动态内容：更高级的层级展示 有时，您可能希望在二级导航下，直接展示某个分类下的文章列表，或者该分类的子分类，以实现更深层的内容引导。安企CMS允许您在导航模板中结合 archiveList 或 categoryList 等标签实现：

   {% navList navList with typeId=1 %}
   <ul>
       {% for item in navList %}
       <li>
           <a href="{{ item.Link }}">{{item.Title}}</a>
           {% if item.NavList %}
           <ul class="nav-menu-child">
               {% for inner in item.NavList %}
               <li>
                   <a href="{{ inner.Link }}">{{inner.Title}}</a>
                   {% if inner.PageId > 0 %} {# 假设PageId代表分类ID #}
                       {% categoryList subCategories with parentId=inner.PageId %} {# 获取该分类的子分类 #}
                       {% if subCategories %}
                       <ul>
                           {% for subCat in subCategories %}
                           <li><a href="{{ subCat.Link }}">{{subCat.Title}}</a></li>
                           {% endfor %}
                       </ul>
                       {% endif %}
                       {% endcategoryList %}
                       {# 或者，在这里调用 archiveList 来显示文章 #}
                       {% archiveList articles with type="list" categoryId=inner.PageId limit="5" %}
                       {% if articles %}
                       <ul>
                           {% for article in articles %}
                           <li><a href="{{ article.Link }}">{{article.Title}}</a></li>
                           {% endfor %}
                       </ul>
                       {% endif %}
                       {% endarchiveList %}
                   {% endif %}
               </li>
               {% endfor %}
           </ul>
           {% endif %}
       </li>
       {% endfor %}
   </ul>
   {% endnavList %}
   

   通过这种方式，您可以让导航不仅仅是死板的链接，而是能够动态展示网站内容的入口，理论上可以构建出逻辑上更深层级的导航内容。

4. 当前选中状态的智能识别 安企CMS的 navList 标签自带一个非常实用的 IsCurrent 属性。当某个导航项是当前访问页面的链接时，IsCurrent 的值为 true。您可以利用这个属性来添加CSS类，从而高亮显示当前选中的导航项：

   {% navList navs %}
   <ul>
       {% for item in navs %}
       <li class="{% if item.IsCurrent %}active{% endif %}"> {# 根据 IsCurrent 属性添加 active 类 #}
           <a href="{{ item.Link }}">{{item.Title}}</a>
           {% if item.NavList %}
           <dl>
               {% for inner in item.NavList %}
                   <dd class="{% if inner.IsCurrent %}active{% endif %}">
                       <a href="{{ inner.Link }}">{{inner.Title}}</a>
                   </dd>
               {% endfor %}
           </dl>
           {% endif %}
       </li>
       {% endfor %}
   </ul>
   {% endnavList %}
   

   只要您的CSS文件中定义了 .active 类的样式（比如背景色、文字颜色），当前页面对应的导航项就会自动突出显示，无需手动维护。

高级技巧与考量

• 多站点与多语言导航： 如果您的安企CMS部署了多站点或多语言功能，每个站点/语言都可以拥有独立的导航设置。在 navList 标签中，通过 siteId 参数可以指定获取特定站点的数据，实现完全独立的导航结构和内容。
• 自定义导航样式： 导航的视觉呈现完全取决于您的前端模板文件（.html）和CSS样式（.css）。您可以修改 <li>、<a> 等标签的结构，添加自定义类名，并编写相应的CSS代码，打造独一无二的导航风格。
• 伪静态规则与导航链接： 确保您在后台“伪静态规则”中设置的URL结构，与导航链接的生成逻辑保持一致。例如，如果文章详情页使用了 /article-{id}.html 的命名模式，那么通过“分类页面链接”或“内置链接”生成的导航URL也会遵循这个规则，保证网站链接的统一性和SEO友好性。

安企CMS通过其后台灵活的配置和前端强大的模板标签，让您能够精确控制网站导航的每一个细节