如何在导航下拉菜单中动态展示分类下的文章或产品列表？
安企CMS：打造动态导航下拉菜单，让内容触手可及
在网站运营中，导航菜单是用户探索网站内容的起点，也是搜索引擎理解网站结构的重要线索。传统的导航菜单往往是固定链接，当网站内容日益丰富，尤其是文章和产品种类繁多时，手动维护下拉菜单中的内容列表会变得异常繁琐且容易出错。安企CMS以其强大的内容管理能力，为我们提供了一种优雅且高效的解决方案，让我们能够轻松地在导航下拉菜单中动态展示分类下的文章或产品列表，极大地提升用户体验和运营效率。
理解安企CMS的导航与内容关联机制
安企CMS的核心优势之一在于其灵活的内容模型和模板标签系统。要实现动态导航，我们首先需要理解导航条目与实际内容（分类、文章、产品）之间的关联方式。在安企CMS中，导航菜单并非简单地指向一个固定URL，它可以直接关联到网站已有的分类或单页面。这意味着，当我们将一个主导航项链接到一个产品分类时，系统能够智能地识别这个关联，并允许我们在模板层面进一步获取该分类下的子分类或具体文章/产品数据。
在后台配置导航结构
首先，我们需要在安企CMS的后台管理界面完成基础的导航结构设置。
- 创建和管理分类及内容模型：确保您已经创建了所需的文章分类或产品分类，并在这些分类下发布了相应的文章或产品。安企CMS支持自定义内容模型，您可以根据业务需求定义不同的文章、产品字段。
- 设置主导航项：进入“后台设置”下的“网站导航设置”。在这里，您可以创建或编辑导航类别（例如“默认导航”或“页脚导航”），然后为您的网站添加主导航链接。
- 关联导航与分类：在添加或编辑导航链接时，选择“链接类型”为“分类页面链接”。此时，系统会提供一个下拉列表，让您选择要关联的特定文章分类或产品分类。这个步骤是实现动态下拉菜单的关键，它建立了导航条目与后台内容分类的直接联系。
- 创建二级导航（可选）：如果您的下拉菜单需要更深层次的结构，例如主分类下有子分类，而子分类再展示文章列表，您可以继续在后台为“分类页面链接”创建二级导航，将其关联到具体的子分类。
完成后台配置后，我们的导航结构就已经搭建完毕，接下来便是在模板文件中通过安企CMS提供的标签来实现内容的动态渲染。
通过模板标签动态展示内容
安企CMS的模板引擎类似Django语法，使用简洁的标签（{% ... %}）和变量（{{ ... }}）来获取和展示数据。要实现动态下拉菜单，我们将主要用到navList、categoryList和archiveList这几个标签。
假设我们的目标是在主导航项“产品”的下拉菜单中，显示其下的所有产品分类，并且每个产品分类下方能直接列出几篇最新的产品。
首先，在您的模板文件（通常是base.html或header.html中定义导航的部分）里，我们可以这样组织代码：
{# 假设我们正在处理一个名为 'navList' 的导航列表，它通过 navList 标签获取 #}
<ul class="main-nav">
{% navList navList with typeId=1 %} {# typeId=1 通常指默认导航类别 #}
{%- for item in navList %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %} {# 检查当前导航项是否有子导航（二级菜单） #}
<ul class="nav-dropdown">
{%- for inner in item.NavList %} {# 遍历二级导航项 #}
<li>
<a href="{{ inner.Link }}">{{inner.Title}}</a>
{% if inner.PageId > 0 %} {# 如果二级导航项关联了一个分类ID #}
{# 获取该分类下的产品列表。moduleId='2' 假设为产品模型ID #}
{% archiveList products with type="list" categoryId=inner.PageId moduleId="2" limit="5" %}
{% if products %}
<ul class="category-product-list">
{% for product in products %}
<li><a href="{{product.Link}}" title="{{product.Title}}">{{product.Title}}</a></li>
{% endfor %}
</ul>
{% else %}
<p class="no-content">暂无相关产品</p>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
这段代码的逻辑是这样的：
{% navList navList with typeId=1 %}：这行代码会获取后台设置的所有主导航项。typeId=1通常对应默认导航。{%- for item in navList %}：我们遍历每个主导航项。item.Title是导航名称，item.Link是链接地址。{%- if item.NavList %}：这里是关键。item.NavList属性会包含该主导航项下的所有二级导航（如果后台有设置）。如果存在，就渲染一个下拉菜单的容器（例如nav-dropdown）。{%- for inner in item.NavList %}：我们接着遍历这些二级导航项。inner.Title和inner.Link是二级导航的名称和链接。{% if inner.PageId > 0 %}：如果这个二级导航项在后台被明确链接到了一个分类（inner.PageId就是那个分类的ID），那么我们就可以利用这个ID来获取内容。{% archiveList products with type="list" categoryId=inner.PageId moduleId="2" limit="5" %}：这是动态获取文章或产品列表的核心。products：我们为获取到的内容列表定义了一个变量名。type="list"：表示获取一个常规列表，而不是分页列表。categoryId=inner.PageId：指定了要获取哪个分类下的内容。moduleId="2"：非常重要，这里明确告诉系统我们想要获取“产品”模型下的内容（通常“文章”模型ID是1，“产品”模型ID是2，具体ID请在后台“内容模型”中确认）。如果您想展示文章，就改为相应的moduleId。limit="5"：限制每个分类只显示5篇最新内容，避免下拉菜单过长影响用户体验。
{% for product in products %}：最后，我们遍历并展示这些获取到的产品标题和链接。如果没有任何内容，{% else %}部分会显示“暂无相关产品”。
进一步的扩展：展示子分类下的文章/产品
如果您的需求是在下拉菜单中先展示某个主分类的子分类，然后点击子分类才进入其文章/产品列表，那么您可以调整archiveList的调用方式，或者在item.NavList中通过inner.PageId再次调用categoryList获取更深层次的分类，然后再在这些分类下调用archiveList。
例如，在一个主导航“解决方案”下，我们希望列出“行业解决方案”和“技术解决方案”这两个子分类，并且每个子分类旁边还能显示其下属文章的标题：
”`twig
{% navList navList with typeId=1 %}
{%- for item in navList %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %}
<ul class="nav-dropdown">
{%- for inner in item.NavList %}
<li>
<a href="{{ inner.Link }}">{{inner.Title}}</a>
{% if inner.PageId > 0 %}
{# 这里，我们首先获取 inner 关联分类的子分类 #}
{% categoryList subCategories with parentId=inner.PageId %}
{% if subCategories %}
<ul class="sub-category-list">
{% for subCat in subCategories %}
<li>
<a href="{{ subCat.Link }}">{{subCat.Title}}</a>
{# 在每个子分类下，再获取其文章列表 #}
{% archiveList articles with type="list" categoryId=subCat.Id moduleId="1" limit="3" %}
{% if articles %}
<ul class="articles-in-subcat">
{% for article in articles %}
<li><a href="{{article.Link}}" title="{{article.Title}}">{{article.Title}}</a></li>
{% endfor %}