如何在导航菜单中集成分类列表,并在分类下显示产品文档?

📅 👁️ 55

在安企CMS中,将产品分类集成到导航菜单并展示其下的产品文档,是提升网站用户体验和内容组织效率的关键一步。这不仅能让访客快速找到所需信息,也有助于搜索引擎更好地理解网站结构。

要实现这一目标,我们需要在安企CMS的后台进行一些基础设置,并根据这些设置在模板文件中进行相应的代码集成。

第一步:后台准备——构建内容与导航结构

在进行模板层面的集成之前,确保后台的内容结构已经清晰地建立起来。

  1. 建立产品内容模型和分类 安企CMS支持灵活的内容模型。如果你的网站主要是展示产品,那么你应该已经设置了“产品模型”(这通常是系统内置的,或者你可以自定义)。在“内容管理”模块中,进入“内容模型”确认“产品模型”是否存在。 接着,在“文档分类”中为你的产品创建详细的分类体系。例如,你可以创建“电子产品”、“家居用品”等一级分类,并在它们之下创建“手机”、“电脑”或“厨房电器”、“卧室家具”等二级分类。确保这些分类是基于“产品模型”的。

  2. 发布并关联产品文档 在相应的分类下发布你的产品文档。在添加产品文档时,务必将其关联到正确的分类,并填写产品的标题、描述、图片以及任何自定义参数,这些信息将在前端展示。

  3. 配置网站导航 现在,我们需要在后台“导航设置”中配置导航菜单,以便在网站前端显示这些产品分类。

    • 通常会有一个主导航,你可以创建一个名为“产品中心”或“所有产品”的一级导航。
    • 接下来,为这个主导航添加子导航。选择“链接类型”为“分类页面链接”,然后从下拉列表中选择你之前创建的具体产品分类(例如“电子产品”、“家居用品”)。这样,导航菜单中的每个分类项就与后台的产品分类建立了联系。

第二步:模板集成——将分类与文档整合到导航中

完成后台设置后,我们需要修改网站的模板文件,让这些数据在前端正确显示。通常,网站的导航菜单代码会位于 template 目录下的 bash.htmlheader.html 或专门的 partial/nav.html 等文件中。

安企CMS的模板标签功能强大且易于使用,可以帮助我们轻松地实现导航菜单与分类文档的集成。这里的核心思路是:使用 navList 标签获取导航菜单数据,然后遍历每个导航项。如果导航项是产品分类(通常是二级导航),我们就可以利用这个分类的ID,通过 archiveList 标签获取并展示该分类下的产品文档。

以下是一个常用的代码示例,可以直接应用到你的导航菜单模板文件中:

<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>
                {# 确保当前子导航项确实是一个分类页面,并且有对应的分类ID #}
                {% if inner.PageId > 0 %}
                    {# 使用archiveList标签获取当前分类下的产品文档 #}
                    {% 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>

第三步:代码解析与注意事项

我们来详细解读一下上面这段模板代码:

  • {% navList navList with typeId=1 %}: 这是获取主导航列表的标签。typeId=1 通常指的是后台“导航设置”中默认的主导航类别。如果你创建了其他导航类别,请根据实际情况调整 typeId。变量 navList 将存储所有主导航项的数据。

  • {%- for item in navList %}: 遍历主导航中的每一个项。item 代表了一个主导航项。

  • {%- if item.NavList %}item.NavList 是判断当前主导航项是否包含子导航列表(即二级菜单)。在我们的场景中,这些子导航就是产品分类。

  • {%- for inner in item.NavList %}: 遍历二级导航(产品分类)中的每一个项。inner 代表了一个子导航项,也就是一个产品分类。

  • {% if inner.PageId > 0 %}: 这一行非常关键。inner.PageId 存储了该子导航项(产品分类)所关联的分类ID。我们通过判断 PageId 是否大于0,来确保它确实是一个有效的分类链接。

  • {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}: 这是获取产品文档的核心标签。

    • products 是一个自定义变量名,用于存储获取到的产品文档列表。
    • type="list" 表示我们获取的是一个静态列表,而不是分页列表。
    • categoryId=inner.PageId这里是关键! 我们将当前循环到的产品分类的ID (inner.PageId) 传递给 archiveList,这样它就能精确地获取该分类下的产品文档。
    • limit="8":限制每个分类下最多显示8个产品文档,你可以根据设计需求调整这个数字。
  • {% if products %}{% for product in products %}: 在获取到产品文档列表后,先判断 products 变量是否有内容(即该分类下是否有产品),如果有,则继续遍历并显示每个产品的链接和标题。

通过这样的结构,你的导航菜单不仅能展示产品分类,还能在每个分类下直接列出相关产品文档,极大地增强了网站的实用性和用户体验。记得在完成代码修改后,清理一下系统缓存,以便前端页面能及时更新。


常见问题 (FAQ)

  1. 为什么我在导航菜单中看不到产品文档? 首先,请检查后台“导航设置”中,你的子导航(产品分类)是否正确地关联到了实际的产品分类。其次,确认你关联的产品分类下是否有已发布的产品文档。最后,检查模板代码中的 categoryId 参数是否正确引用了子导航项的 PageId,以及 archiveList 标签的 moduleId 是否与你的产品模型ID匹配(默认为产品模型)。别忘了清除缓存,让更改生效。

  2. 我只想在导航菜单中显示某个分类下固定几个产品文档,而不是所有,应该怎么做? 你可以在 archiveList 标签中使用 limit 参数来限制显示的数量,例如 limit="5" 表示只显示5个产品文档。如果你想调整显示的顺序,可以使用 order 参数,比如 order="views desc" 按浏览量降序排列,或 order="id desc" 按最新发布降序排列。

  3. 我的导航菜单中有多层嵌套的分类,如何确保只显示最底层分类的产品文档? 上述代码示例默认会遍历所有层级的子导航。如果你只想在特定层级的分类下显示产品文档,你可能需要在模板代码中增加一些逻辑判断,例如判断 inner 对象的某个属性(如果后台分类有层级标记的话),或者只在最深层的 for 循环中使用 archiveList 标签,而不是在所有子循环中都使用

相关文章

如何实现多级分类的嵌套显示,并在模板中判断是否有子分类?

在构建网站时,清晰、有组织的内容结构是提升用户体验和SEO表现的关键。安企CMS(AnQiCMS)凭借其灵活的内容模型和强大的模板引擎,能够帮助我们轻松实现复杂的多级分类嵌套显示,并进行子分类判断,从而创建出高度定制化的导航和内容布局。 ### 后端设置:构建分类层级 在安企CMS的后台,分类管理功能(通常位于“内容管理”下方的“文档分类”菜单)是实现多级分类的基础。 首先

2025-11-08

如何获取和显示特定分类的详情信息,包括描述、内容和Banner图?

在运营网站时,我们经常需要为不同的分类页面展示独特的内容,比如一个产品分类可能有详细的介绍和醒目的Banner图,而一个新闻分类则更侧重于简洁的描述。安企CMS提供了灵活的机制,让我们能够轻松获取并展示特定分类的详情信息,包括描述、内容和Banner图。 ### 后端设置是基础:为分类丰富内容 在前端展示分类详情之前,我们需要在安企CMS后台为分类填充这些信息

2025-11-08

如何在评论或留言表单中添加并显示验证码以防止垃圾信息?

在运营网站时,垃圾评论和恶意留言总是让人头疼的问题,它们不仅影响用户体验,还可能损害网站的专业形象。幸运的是,安企CMS提供了一种简单有效的方式来解决这个问题——那就是在评论或留言表单中添加验证码。这能大大提升网站的安全性,过滤掉大部分自动化垃圾信息。 下面,我们来详细了解如何在安企CMS中,为你的评论和留言表单添加验证码。这个过程可以分为两步,非常直观且易于操作。 ### 第一步

2025-11-08

如何获取并显示网站的友情链接列表?

在网站运营中,友情链接扮演着连接彼此、促进流量、提升搜索引擎排名的重要角色。一个维护良好、显示清晰的友情链接区域,不仅能体现网站的开放性,也能为用户提供更多有价值的跳转路径。安企CMS(AnQiCMS)为用户提供了便捷的友情链接管理功能,让您能够轻松获取并在网站上展示这些链接。 ### 管理您的友情链接:后端设置 在着手前端展示之前,我们需要确保友情链接已经在安企CMS的后台进行了配置。通常

2025-11-08

如何获取和显示上一篇、下一篇文章的链接和标题?

当我们在安企CMS中管理和发布内容时,为了提升网站的用户体验和内容可发现性,通常需要在文章详情页提供导航到“上一篇”和“下一篇”文章的功能。这不仅能鼓励读者继续浏览站内内容,也能为搜索引擎优化(SEO)提供良好的内部链接结构。 安企CMS为此提供了非常简洁直观的模板标签,让我们可以轻松实现这一需求。 ### 核心功能:`prevArchive` 和 `nextArchive`

2025-11-08

如何获取和显示单页面的Logo、缩略图和幻灯片组图?

在安企CMS中,单页面(如“关于我们”、“联系我们”等)不仅可以承载丰富的文字信息,还能通过视觉元素极大地提升页面的吸引力和专业度。获取并展示单页面的Logo、缩略图和幻灯片组图,是优化页面展示效果的关键步骤。安企CMS提供了灵活的模板标签,让您轻松实现这些功能。 ### 了解单页面的视觉元素构成 在安企CMS中,每一个单页面都可以拥有专属的视觉元素,以满足不同的展示需求

2025-11-08

如何在网站底部显示版权信息和备案号链接?

在您的网站底部清晰地展示版权信息和备案号,这不仅是法律法规的要求,更是提升网站专业度和用户信任度的关键一环。安企CMS作为一款高效的内容管理系统,充分考虑了这些细节,让您能够轻松管理并呈现这些重要的站点信息。 ### 理解版权信息与备案号的重要性 网站底部的版权声明,如同品牌的水印,它向访问者明确了内容的归属权,有效保护您的原创成果。而对于在中国大陆运营的网站而言

2025-11-08

如何在模板中根据条件逻辑(if/else)动态控制内容的显示?

在 AnQiCMS 的模板设计中,能够根据不同的条件灵活地控制内容的显示,是实现网站个性化和动态化展示的关键。无论是根据文章是否有缩略图来决定是否展示图片,还是依据用户角色来显示特定内容,条件逻辑都能提供强大的支持。AnQiCMS 采用类似 Django 模板引擎的语法,这使得熟悉网页开发的站长们可以非常容易上手。 ### 掌握 AnQiCMS 模板中的条件逻辑基础 AnQiCMS

2025-11-08