如何设置和显示安企CMS网站的导航菜单（顶部/底部）？
网站导航是用户探索网站内容的关键路径，也是搜索引擎理解网站结构的重要参考。在安企CMS（AnQiCMS）中，您可以灵活地设置和管理网站的顶部及底部导航菜单，以满足不同的设计和功能需求。
本文将详细介绍如何在安企CMS后台配置导航菜单，以及如何在网站前端模板中将其显示出来。
第一部分：后台配置导航菜单
在安企CMS中，导航菜单的设置集中在后台的“后台设置”区域，具体是“网站导航设置”功能。
一、管理导航类别
安企CMS允许您创建多个独立的导航类别，这对于管理不同位置的菜单（例如，主导航、页脚导航、侧边栏导航）非常有用。
- 访问导航类别： 进入后台后，找到“后台设置”菜单下的“导航设置”，您会看到一个“导航类别管理”的选项。
- 添加新类别： 点击进入，系统默认会有一个“默认导航”类别。如果您需要一个独立的底部导航，可以点击“添加导航类别”，输入一个有意义的名称，例如“底部导航”或“页脚菜单”，然后保存。
- 通过这种方式，您可以为网站的不同区域创建专属的导航结构，便于管理和维护。
二、配置导航链接
在选定或创建导航类别后，接下来就是为该类别添加具体的导航链接。每个导航链接都可以进行细致的配置：
- 选择导航类别： 在“网站导航设置”页面，首先选择您要配置的导航类别（例如“默认导航”或您创建的“底部导航”）。
- 添加/编辑导航链接：
- 显示名称： 这是用户在网站前台看到的文字，应简洁明了，准确反映链接内容。例如“关于我们”、“产品中心”。
- 子标题名称： 如果您的设计需要，可以在主标题下方显示一个次级标题，例如在“产品”下方显示“Products”。
- 导航描述： 可以为导航项添加一段简短的描述，这在某些模板设计中可能用于显示提示信息。
- 链接类型： 安企CMS提供了三种强大的链接类型，满足您链接到不同内容的需要：
- 内置链接： 适用于网站的固定页面，如首页、文章模型首页、产品模型首页或其他自定义模型首页。选择后系统会自动生成链接。
- 分类页面链接： 可以直接链接到您网站已有的文章分类、产品分类或单页面（如“联系我们”页面）。选择对应内容即可。
- 外部链接： 提供了最大的灵活性，您可以手动输入任何站内或站外的URL地址。这对于链接到第三方服务或外部合作网站非常方便。
- 上级导航： 若要创建下拉菜单或子菜单，您只需在添加子菜单项时，将其“上级导航”设置为对应的父级菜单项即可。安企CMS支持两级导航（一级主菜单，二级下拉菜单）。
- 显示顺序： 通过调整数字大小来控制导航项在同一级别中的排列顺序。数字越小，显示越靠前。
通过以上步骤，您可以在安企CMS后台轻松构建出符合网站结构和用户需求的导航菜单。
第二部分：前端模板中显示导航菜单
完成后台的导航设置后，下一步就是通过模板标签将这些导航菜单呈现在网站前台页面上。安企CMS使用 navList 标签来实现这一功能，它具有很高的灵活性，可以适应各种复杂的菜单布局。
一、使用 navList 标签调用导航
在您的网站模板文件（例如 header.html 用于顶部导航，footer.html 用于底部导航）中，您可以使用 navList 标签来获取后台配置的导航数据。
一个基本的调用方式如下：
{% navList navs with typeId=1 %}
<ul>
{%- for item in navs %}
<li><a href="{{ item.Link }}">{{item.Title}}</a></li>
{% endfor %}
</ul>
{% endnavList %}
这里，navs 是一个数组对象，包含了您在后台设置的每个导航链接。for 循环会遍历这些链接，item.Link 获取链接地址，item.Title 获取显示名称。
typeId参数：typeId是一个关键参数，用于指定您要调用哪个导航类别。默认情况下，typeId=1通常对应后台的“默认导航”。如果您创建了其他的导航类别（例如“底部导航”），在调用时，需要根据其在后台的实际typeId进行指定。通过在“网站导航设置”页面查看导航类别的ID，或者在“导航类别管理”中创建新类别时留意ID。
二、实现带有下拉菜单的导航
安企CMS的 navList 标签支持轻松创建二级下拉菜单。每个主导航项（item）都可能包含一个 NavList 属性，这个属性本身也是一个导航列表，代表了其下级的子菜单。
您可以通过嵌套 for 循环来显示这些子菜单：
{% navList navs with typeId=1 %}
<ul class="main-menu">
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %} {# 判断是否存在子菜单 #}
<dl class="sub-menu">
{%- for subItem in item.NavList %} {# 遍历子菜单 #}
<dd class="{% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{subItem.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
上述代码演示了如何判断 item.NavList 是否存在，如果存在则渲染一个 <dl> 标签作为子菜单容器，并遍历 item.NavList 中的子菜单项。item.IsCurrent 属性可以用来判断当前导航是否是活动状态，方便添加样式。
三、结合内容动态显示（高级应用）
对于更高级的需求，例如在导航下拉菜单中直接显示某个分类下的热门文章或产品列表，您可以结合其他内容标签（如 archiveList 或 categoryList）来实现。这通常需要导航项链接到特定的分类或页面，并通过 item.PageId 获取对应的分类或页面ID。
例如，在一个产品分类的下拉菜单中显示该分类下的热门产品：
{% 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>
{# 如果该二级导航项关联了分类（PageId > 0），则加载该分类下的产品列表 #}
{% if inner.PageId > 0 %}
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
{% if products %}
<ul class="nav-menu-child-child">
{% for product in products %}
<li><a href="{{product.Link}}">{{product.Title}}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
这个例子展示了如何利用 inner.PageId 来调用 archiveList 标签，从而在导航中动态展示内容，极大地丰富了导航菜单的功能。
提示与**实践
- 保持简洁： 避免过多的主菜单项和过于深层的子菜单，以免让用户感到困惑。
- 语义化命名： 导航项的名称应清晰、准确，让用户一眼就能理解其指向的内容。
- 一致性： 保持导航样式和结构在网站内的统一性，增强用户体验。
- 移动端适配： 确保导航菜单在不同设备上都能良好地显示和操作，尤其是在移动设备上。
- 搜索引擎优化 (SEO)： 合理的导航结构有助于搜索引擎抓取和理解网站内容，提升网站排名。
总结
安企CMS为网站导航的设置和显示提供了直观、灵活且强大的功能。无论是简单的顶部/底部菜单，