网站的主导航菜单是用户了解网站内容和结构的重要入口。安企CMS提供了强大且灵活的navList标签，帮助我们轻松创建和管理支持多级下拉的导航菜单，从而提升网站的用户体验和信息架构的清晰度。

第一步：在安企CMS后台配置导航菜单

在开始编写模板代码之前，我们需要在安企CMS的后台管理系统中设置好导航菜单的结构。

  1. 进入导航设置界面：登录到安企CMS后台，通过左侧菜单找到“后台设置”，点击“导航设置”进入管理页面。
  2. 创建或选择导航类别：系统默认会有一个“默认导航”类别，你可以直接使用它，也可以点击“导航类别管理”按钮，根据需要创建新的导航类别，例如“顶部主导航”、“页脚导航”等。不同的导航类别可以应用于网站的不同区域。
  3. 添加一级导航链接：
    • 点击“添加导航链接”按钮。
    • 在弹出的表单中，首先选择“上级导航”为“顶级导航”，这表示你正在创建一个主菜单项。
    • 填写“显示名称”，这是菜单项在网站前台展示的文字。
    • 选择“链接类型”，安企CMS支持多种链接类型：
      • 内置链接：例如首页、文章模型首页、产品模型首页等，这些是系统预设的常用链接。
      • 分类页面链接：你可以选择网站中已存在的文章分类、产品分类或单个页面作为导航链接。
      • 外部链接：允许你自定义任意URL，无论是站内其他页面还是外部网站。
    • 根据需要，还可以填写“子标题名称”或“导航描述”，以在前端展示更丰富的信息。
    • 设置“显示顺序”，数字越小越靠前，用于控制菜单项的排列次序。
  4. 添加二级下拉导航链接：
    • 再次点击“添加导航链接”按钮。
    • 关键一步：在“上级导航”中，选择你刚刚创建的一级导航菜单项。
    • 填写“显示名称”、“链接类型”等信息，与一级导航项类似。
    • 通过这种方式，你可以为每个一级导航项添加多个二级子菜单项。安企CMS的navList标签默认支持两级下拉菜单的展示。

完成后台配置后，记得点击“更新缓存”按钮，确保你的更改能够立即生效。

第二步：在前端模板中应用navList标签

一旦后台导航菜单结构设置完成，接下来就是如何在网站的前端模板中调用并展示这些导航。安企CMS的模板遵循Django模板引擎语法，这使得内容结构清晰且易于理解。

通常，你的网站模板文件存放在/template目录下，并使用.html作为文件后缀。

下面是一个使用navList标签创建支持两级下拉菜单的示例代码结构：

<nav class="main-navigation">
    <ul class="nav-list-level1">
        {% navList navs with typeId=1 %} {# 这里的typeId=1假设是你的主导航类别ID #}
            {%- for item in navs %} {# 遍历所有一级导航项 #}
            <li class="nav-item-level1 {% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}" class="nav-link-level1">{{item.Title}}</a>

                {%- if item.NavList %} {# 判断当前一级导航项是否有二级子导航 #}
                <ul class="nav-list-level2">
                    {%- for inner in item.NavList %} {# 遍历所有二级导航项 #}
                    <li class="nav-item-level2 {% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}" class="nav-link-level2">{{inner.Title}}</a>
                        {# 如果需要更多层级的下拉菜单，可以在这里继续嵌套，
                           但需要自定义逻辑或CSS支持，navList标签默认支持两级。
                           这里可以结合其他标签丰富内容，如显示该分类下的文章列表或子分类。 #}
                        {% if inner.PageId > 0 %} {# 假设该二级导航是某个分类或页面链接 #}
                            {% categoryList categories with parentId=inner.PageId %} {# 获取该分类的子分类 #}
                            {% if categories %}
                            <ul class="nav-list-level3">
                                {% for subCategory in categories %}
                                <li><a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a></li>
                                {% endfor %}
                            </ul>
                            {% endif %}
                            {% endcategoryList %}
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
            </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

代码解释：

  • {% navList navs with typeId=1 %}：这是调用导航列表的核心标签。navs是定义的一个变量，它将承载后台配置的所有导航数据。typeId=1指定了要调用的导航类别ID，如果你创建了多个导航类别，请替换为对应的ID。
  • {%- for item in navs %}：这是一个for循环，用于遍历navs变量中的每一个一级导航项。item变量代表当前遍历到的一级导航项的数据。{%-的使用是为了避免输出额外的空白行，让生成的HTML更整洁。
  • {{ item.Link }} 和 {{ item.Title }}：分别输出了当前导航项的链接地址和显示名称。item还包含SubTitle（子标题）、Description（描述）等字段，你可以根据设计需要进行调用。
  • {% if item.IsCurrent %}：IsCurrent是一个布尔值，如果当前导航项是用户正在访问的页面，它将为true。这通常用于为当前活跃的菜单项添加active类，以便通过CSS进行高亮显示。
  • {%- if item.NavList %}：这是判断当前一级导航项是否包含子导航的关键。item.NavList是一个数组，如果其中有数据，则表示存在二级导航，我们将进入下一层循环。
  • {%- for inner in item.NavList %}：这是一个嵌套的for循环，用于遍历当前一级导航项下的所有二级导航项。inner变量代表当前遍历到的二级导航项的数据。其结构与item类似，也包含Link、Title、IsCurrent等字段。
  • {% if inner.PageId > 0 %}：这是一个进阶用法，演示了如何在二级菜单中展示更丰富的内容。inner.PageId会返回该导航项如果链接到某个分类或单页面时的ID。通过判断PageId是否存在，我们可以进一步嵌套categoryList或archiveList标签，来动态加载该分类下的子分类或文章列表，实现更强大的下拉菜单功能，而不仅仅是简单的链接。

进阶技巧与注意事项

  1. CSS样式是关键：上述代码仅提供了HTML结构。要实现美观的两级下拉效果，你需要编写相应的CSS样式来控制菜单的布局、显示/隐藏、动画效果等。
  2. 动态内容填充：在二级导航项内部，如果其链接类型是“分类页面链接”，你可以利用inner.PageId结合{% archiveList %}（文档列表标签）或{% categoryList %}（分类列表标签），将与该二级导航项关联的文章列表或下一级分类直接呈现在下拉菜单