AnQiCMS导航列表标签如何与`include`标签配合，优化模板的公共导航部分？

巧用安企CMS导航列表与include标签，铸就高效可维护的公共导航

在网站运营中，导航栏作为用户与网站内容交互的第一触点，其重要性不言而喻。一个结构清晰、易于维护且加载高效的导航系统，不仅能显著提升用户体验，还能为网站的长期发展打下坚实基础。作为一位资深的网站运营专家，我深知在内容管理系统中，如何优雅地处理公共导航模块，是模板开发的关键一环。今天，我们就来深入探讨安企CMS（AnQiCMS）中navList导航列表标签与include辅助标签的精妙配合，如何共同优化网站的公共导航部分。

安企CMS以其简洁高效的架构，为中小企业和内容运营团队提供了极大的便利。其模板引擎语法类似Django，既强大又易于上手。在这其中，navList和include是两位不可或缺的“搭档”。

navList：动态构建导航内容的基石

首先，让我们认识一下navList标签。它就好比网站导航内容的“中央处理器”，负责从安企CMS后台动态获取并组织导航菜单数据。在后台的“导航设置”中，我们可以灵活创建不同的导航类别（例如“顶部导航”、“页脚导航”、“侧边栏导航”），并为每个类别添加多达两级的导航链接，包括内置链接、分类/页面链接以及外部链接。

navList标签的核心价值在于它的动态性。一旦你在模板中使用了它，它就会根据后台的配置，自动渲染出相应的导航结构。例如，你可能这样使用它来获取顶部导航：

{% navList navs with typeId=1 %}
    {# 导航内容将在这里渲染 #}
{% endnavList %}

这里的typeId=1便对应着后台配置的某个导航类别。navList循环出的每一个item都包含了丰富的导航信息，比如Title（显示名称）、Link（链接地址）、IsCurrent（是否当前页面链接，用于添加活动样式）以及NavList（子菜单列表，用于构建二级导航）。这种设计确保了网站导航的灵活性，运营人员可以在不修改代码的情况下，通过后台轻松调整菜单内容。

include：提升模板模块化与维护效率的利器

接下来是include标签，它是模板模块化设计的“粘合剂”。在大型网站或多页面模板开发中，页头（header）、页脚（footer）、侧边栏等公共元素常常需要在多个页面中重复出现。如果将这些代码直接复制粘贴到每个页面，一旦需要修改，就得逐一查找替换，效率低下且容易出错。

include标签的出现彻底解决了这个问题。它允许你将重复的模板代码片段抽取出来，保存为独立的.html文件（通常放在partial/目录下），然后在需要的地方通过{% include "partial/header.html" %}这样的方式引用。

例如，你可以创建一个partial/header.html文件来存放网站的顶部导航、Logo等通用元素。那么在你的index.html、detail.html等页面中，只需一行代码即可引入：

{% include "partial/header.html" %}

这样做的好处显而易见：

1. 高复用性：公共代码只需编写一次，随处引用。
2. 易于维护：修改公共元素时，只需修改一个文件，所有引用它的页面都会同步更新。
3. 结构清晰：主模板文件保持简洁，只关注页面特有内容，提高代码可读性。
4. 团队协作：不同开发者可以并行开发不同的模板片段，互不干扰。

强强联手：navList与include的实际应用

现在，让我们把这两个标签结合起来，看看它们如何优化公共导航。

想象一下，你的网站有一个顶部导航栏和一个页脚导航栏，它们的结构可能不同，但都需要动态从后台获取菜单数据。

第一步：创建导航数据源 在安企CMS后台的“导航设置”中，创建两个导航类别，例如：

• 类别名称： 顶部主导航 (对应 typeId=1)
• 类别名称： 页脚导航 (对应 typeId=2) 并分别配置好它们各自的菜单项，包括一级和二级菜单。

第二步：设计导航模板片段

1. partial/main_nav.html (顶部主导航) 这个文件将专门用于渲染顶部的主导航菜单。

   <nav class="main-navigation">
       <ul class="nav-menu">
           {% navList main_navs with typeId=1 %}
               {% for item in main_navs %}
                   <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
                       <a href="{{ item.Link }}">{{ item.Title }}</a>
                       {% if item.NavList %} {# 如果有子菜单 #}
                           <ul class="sub-menu">
                               {% for sub_item in item.NavList %}
                                   <li class="sub-item {% if sub_item.IsCurrent %}active{% endif %}">
                                       <a href="{{ sub_item.Link }}">{{ sub_item.Title }}</a>
                                   </li>
                               {% endfor %}
                           </ul>
                       {% endif %}
                   </li>
               {% endfor %}
           {% endnavList %}
       </ul>
   </nav>
   

2. partial/footer_nav.html (页脚导航) 这个文件用于渲染页脚的链接，可能只需要一级菜单，结构更简单。

   <div class="footer-links">
       <h3>快速链接</h3>
       <ul>
           {% navList footer_navs with typeId=2 %}
               {% for item in footer_navs %}
                   <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
               {% endfor %}
           {% endnavList %}
       </ul>
   </div>
   

第三步：在主模板中引入

现在，无论是在你的base.html、index.html还是其他任何页面，你都可以通过include标签引入这些导航片段。

{# 在页头部分引入主导航 #}
<header>
    <div class="logo">
        <a href="/">{% system with name="SiteName" %}</a>
    </div>
    {% include "partial/main_nav.html" %}
</header>

{# 在页脚部分引入页脚导航 #}
<footer>
    {% include "partial/footer_nav.html" %}
    <p>&copy; {% now "2006" %} {% system with name="SiteName" %}. All Rights Reserved.</p>
</footer>

通过这种方式，网站的导航结构得到了清晰的分离和有效的管理。后台数据驱动navList，include标签则将动态内容插入到固定的模板框架中。

进阶应用：导航内的内容扩展

navList标签的强大之处不仅限于链接。结合include，你甚至可以在导航菜单中嵌入更丰富的内容。例如，你可能希望鼠标悬停在某个主菜单项时，弹出一个包含最新文章列表或特定分类文章的“巨型菜单”（Mega Menu）。

在partial/main_nav.html中，对于某个特定的主菜单项（假设它的ID是some_category_id），你可以这样扩展：

”`twig {# partial/main_nav.html 片段 #}