如何在模板中灵活控制和展示网站导航列表（多级导航）？

在网站运营中，清晰高效的导航系统无疑是用户体验和搜索引擎优化的基石。一个设计精良的导航不仅能引导用户快速找到所需信息，还能帮助搜索引擎更好地理解网站结构。在AnQiCMS中，我们拥有强大的工具来灵活配置和展示多级导航列表，从而满足多样化的网站需求。

第一步：在后台灵活配置导航菜单

AnQiCMS的导航管理功能非常直观。首先，我们会在后台的“导航设置”中进行核心的菜单结构搭建。

导航类别管理是实现多套导航菜单的关键。系统默认提供了一套“默认导航”，但如果我们的网站需要有顶部主导航、底部链接、侧边栏菜单等不同位置的导航，就可以通过新增导航类别来分别管理。例如，我们可以创建一个名为“页脚导航”的新类别，为其配置独立的菜单项。这样，不同位置的导航就能各司其职，互不干扰。

在导航链接设置中，我们可以为每个菜单项指定详细信息。这包括：

• 显示名称：用户在前端看到的菜单文字。
• 子标题名称：如果需要双语标题或额外提示，可以在此填写。
• 导航描述：为菜单项提供简短说明，可在模板中调用。
• 链接类型：AnQiCMS提供了多种灵活的链接方式。我们可以选择内置链接（如首页、特定模型首页），分类页面链接（关联到现有的文章分类或单页面），或是外部链接（指向站内或站外的任意URL）。
• 显示顺序：通过调整数字大小来控制菜单项的排列顺序，数字越小越靠前。

实现多级导航的核心在于“上级导航”字段。当我们创建菜单项时，可以选择它属于“顶级导航”，作为主菜单项；或者选择它隶属于某个已存在的菜单项，从而形成二级甚至多级下拉菜单。AnQiCMS支持最多两级下拉导航链接，这足以应对绝大多数网站的导航需求，同时避免了过于复杂的层级结构可能带来的用户困惑。

第二步：在模板中巧妙调用导航列表

当后台配置完成后，下一步就是在网站模板中将这些导航列表展示出来。AnQiCMS的模板引擎采用了类似Django的标签语法，使得调用数据变得非常便捷。

要展示导航列表，我们主要使用navList标签。例如，我们可以这样调用主导航：

{% navList navs %}
    <ul>
        {%- for item in navs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <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 %}

在上面的代码片段中，navList navs将后台配置的导航数据赋给navs变量。然后，我们通过第一个for循环遍历主菜单项（item）。item.Link和item.Title分别输出链接地址和显示名称。

实现多级导航的关键在于{%- if item.NavList %}这个判断。如果当前主菜单项存在子导航（即item.NavList不为空），我们会再嵌套一个for循环来遍历这些子导航（inner）。这样，就能轻松构建出两级甚至更多（根据后台配置）的导航结构。

值得一提的是，{% if item.IsCurrent %}active{% endif %}这行代码非常实用，它会判断当前菜单项是否与用户正在访问的页面匹配。如果匹配，就会添加active类，我们便可以利用CSS来高亮显示当前页面所在的导航项，极大提升用户体验。

第三步：动态丰富导航内容

AnQiCMS的强大之处不仅在于展示静态的导航链接，它还能在导航的下拉菜单中动态加载文章、产品或下级分类列表，极大地丰富了导航的实用性。

示例一：在导航下拉中显示分类下的最新文章或产品列表

假设我们有一个“产品中心”主导航，当用户鼠标悬停时，我们希望在下拉菜单中直接展示该分类下的热门产品列表。我们可以这样实现：

<ul>
    {% navList navList with typeId=1 %} {# 假设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 %} {# 如果二级导航关联了分类/页面 #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 调用该分类下的最新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 %}
    {% endnavList %}
</ul>

在这个例子中，当循环到二级导航inner时，我们通过inner.PageId获取到它所关联的分类ID，然后利用archiveList标签，以该分类ID为条件，动态调用了最多8篇相关产品文章的标题和链接，呈现在下拉菜单中。

示例二：在导航下拉中显示分类的下级分类

另一种常见需求是，主导航下展示一级分类，点击或悬停后，下拉菜单显示该一级分类下的所有二级分类。

<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 %}
                    {% categoryList categories with parentId=inner.PageId %} {# 调用该分类的下级分类 #}
                    {% if categories %}
                    <ul>
                        {% for category in categories %}
                        <li>
                            <a href="{{ category.Link }}">{{category.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

这里，我们同样利用inner.PageId作为parentId参数，通过categoryList标签获取并展示了指定分类下的所有子分类，构建出更深层次的分类导航结构。

实用技巧与注意事项

• 保持简洁：虽然可以构建多层级导航，但为了用户体验，通常建议导航层级不要超过三级。过多的嵌套容易让用户迷失。
• 利用IsCurrent：务必使用item.IsCurrent为当前活跃的导航项添加特殊样式，让用户时刻清楚自己在网站中的位置。
• 后台管理与模板分离：AnQiCMS将导航的配置与前端展示逻辑分离，这意味着我们可以在后台随时调整导航内容和结构，而无需修改模板代码，极大提升了运营效率。
• 性能考量：如果动态加载的导航内容过多，可能会对页面加载速度产生轻微影响。在设计时，可以考虑对热门内容进行缓存，或限制加载数量。

通过AnQiCMS提供的这些灵活的导航配置和模板标签，我们可以轻松构建出满足各种复杂需求的网站导航系统，为用户提供流畅的浏览体验，也为网站的SEO表现打下坚实基础。

常见问题解答（FAQ）

Q1：如何创建多个导航菜单（如顶部主导航和底部页脚导航）？ A1： 在AnQiCMS后台，进入“导航设置”页面，你会看到“导航类别管理”区域。点击“新增导航类别”，输入新的类别名称（例如“页脚导航”），保存后即可为这个新类别添加独立的菜单项。在