`navList`标签如何实现网站顶部、底部或侧边栏导航菜单的灵活显示？
网站导航是用户探索网站内容的指南，也是搜索引擎理解网站结构的重要线索。一个设计良好、功能灵活的导航系统，能够极大提升用户体验和网站的SEO表现。在AnQiCMS中，navList标签正是这样一个核心工具，它赋予了我们高度自由，可以轻松构建并管理网站顶部、底部、侧边栏等各种位置的导航菜单。
那么，navList标签究竟是如何实现这种灵活多变的导航显示的呢？让我们深入了解它的用法和背后的机制。
理解navList的核心机制
在AnQiCMS中，导航菜单并非简单地硬编码在模板里。相反，所有的导航数据都集中在后台的“网站导航设置”中进行管理。在这里，我们可以创建不同的“导航类别”，比如“主导航”、“页脚导航”或“侧边栏导航”，每个类别都拥有自己独立的菜单项。navList标签的作用，就是将这些后台配置好的数据，以结构化的方式提取出来，供前端模板使用。
它的基本使用方式非常直观，通常我们会像这样在模板中调用它：
{% navList navs %}
{# 在这里通过循环遍历导航项 #}
{% endnavList %}
这里，navs是我们为获取到的导航列表指定的一个变量名，您可以根据自己的喜好为其命名。navList标签会从后台获取所有与特定导航类别关联的菜单项，并将它们作为navs变量提供给我们。
构建你的第一个导航菜单
假设我们需要在网站顶部显示一个主导航菜单。在后台的“网站导航设置”中，我们已经设置了一个名为“默认导航”的类别，并添加了“首页”、“产品”、“关于我们”等链接。现在，我们就可以在模板中这样使用navList来展示它们：
<nav class="main-navigation">
<ul>
{% navList navs with typeId=1 %} {# 假设“默认导航”的ID是1 #}
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
这段代码首先通过typeId=1指定获取ID为1的导航类别。然后，它会遍历navs列表中的每一个导航项（item）。对于每个导航项，我们可以访问它的Title（显示名称）和Link（链接地址）。item.IsCurrent这个布尔值则非常实用，它会自动判断当前访问的页面是否与该导航项匹配，如果匹配，就返回True，我们就可以利用这个属性来为当前页面的导航项添加“active”类，实现高亮显示。
实现多级导航的精妙之处
AnQiCMS的navList标签不只支持一级导航，它还能轻松实现多级下拉菜单。每个导航项item自身可能包含一个NavList属性，这个属性就代表了它的子导航菜单。我们可以通过嵌套的for循环来渲染这些子菜单：
<nav class="main-navigation">
<ul>
{% navList navs %}
{%- 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 inner in item.NavList %}
<dd class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
通过这样的嵌套结构，无论后台设置了多少层级的子菜单（AnQiCMS默认支持两级），前端都能灵活地呈现出来。此外，我们还可以利用item.SubTitle和item.Description这些字段，为导航项添加更丰富的辅助信息，比如在标题下方显示一段简介，让菜单更加生动。
将导航与动态内容无缝衔接
navList标签的强大之处远不止于静态链接。它能够与AnQiCMS的内容管理系统深度融合，实现导航菜单的动态内容加载。这主要得益于导航项中的PageId属性。当一个导航链接在后台被设置为指向某个分类或单页面时，PageId就会存储该分类或页面的ID。
例如，我们可以在一个名为“产品”的主导航项下方，动态显示其子分类，甚至直接列出该分类下的热门产品。
场景一：导航下显示分类列表
如果你的主导航项“产品”下方，希望展示所有的产品子分类，可以这样处理：
<ul>
{% navList navList with typeId=1 %}
{%- 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 %} {# 检查子导航项是否关联了页面/分类ID #}
{% categoryList categories with parentId=inner.PageId %} {# 获取该ID下的子分类 #}
{% if categories %}
<ul>
{% for subCategory in categories %}
<li>
<a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
这里，我们利用了inner.PageId作为categoryList标签的parentId参数，从而动态获取并显示了二级导航项所关联分类的下级分类。这种方式非常适合构建复杂的商品分类导航。
场景二：导航下显示特定文档（如产品或文章）列表
如果你希望在某个导航项（例如“热门文章”）下方直接列出几篇热门文章，同样可以利用PageId结合archiveList标签：
<ul>
{% navList navList with typeId=1 %}
{%- 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>
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 获取该ID下最新的8篇文档 #}
{% if products %}
<ul class="nav-menu-child-child">
{% for productItem in products %}
<li><a href="{{productItem.Link}}">{{productItem.Title}}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
在这个例子中，archiveList标签通过categoryId=inner.PageId参数，获取了与二级导航项关联分类下的最新8篇文档（这里假设是产品），并在菜单中直接显示这些产品链接。这种动态集成大大增强了导航菜单的实用性和内容深度。
实际应用中的技巧与考量
在实际使用navList标签时，有一些实用的技巧和需要注意的地方：
- 后台导航类别管理：在“后台设置”->“导航设置”中，您可以点击“导航类别管理”来创建和管理多个导航类别。每个类别都会有一个唯一的
typeId，您可以在navList标签中使用typeId参数来精确调用所需位置的导航，比如typeId=2用于页脚导航，typeId=3用于侧边栏导航。 siteId用于多站点：如果您在使用AnQiCMS的多站点功能，并且希望调用其他站点下的导航数据，可以通过siteId参数指定目标站点ID，实现跨站点导航内容的灵活调用。- 模板结构优化：为了保持模板代码的整洁