网站导航是用户探索网站内容的指南，也是搜索引擎理解网站结构的重要线索。一个设计良好、功能灵活的导航系统，能够极大提升用户体验和网站的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标签时，有一些实用的技巧和需要注意的地方：

  1. 后台导航类别管理：在“后台设置”->“导航设置”中，您可以点击“导航类别管理”来创建和管理多个导航类别。每个类别都会有一个唯一的typeId，您可以在navList标签中使用typeId参数来精确调用所需位置的导航，比如typeId=2用于页脚导航，typeId=3用于侧边栏导航。
  2. siteId用于多站点：如果您在使用AnQiCMS的多站点功能，并且希望调用其他站点下的导航数据，可以通过siteId参数指定目标站点ID，实现跨站点导航内容的灵活调用。
  3. 模板结构优化：为了保持模板代码的整洁