如何动态生成并显示网站的顶部或底部导航菜单？
在网站运营中，顶部和底部导航菜单扮演着至关重要的角色，它们不仅是用户探索网站内容的向导，也是搜索引擎理解网站结构的关键。一个设计良好、动态生成的导航菜单，能够极大地提升用户体验和网站的可维护性。安企CMS（AnQiCMS）提供了一套直观而强大的功能，让您轻松实现这一目标。
后台配置：让您的菜单活起来
要在安企CMS中动态生成和显示导航菜单，首先需要在后台进行菜单内容的配置。这就像为您的网站绘制一张地图，规划好各个目的地。
您可以在后台找到“后台设置”模块，点击进入后选择“网站导航设置”。这里是所有导航菜单的集中管理区域。
首先，您可以定义不同的“导航类别”。系统通常会提供一个默认导航，但如果您的网站需要多个独立的导航区域，比如一个在顶部，一个在底部，或者侧边栏还有不同的菜单，您就可以在这里创建新的导航类别。例如，您可以创建一个名为“页脚导航”的新类别，专门用于网站底部。这样，不同的导航区域就可以独立管理，互不干扰。
接下来是“导航链接设置”，这是填充菜单内容的环节。添加新的导航链接时，您会看到以下几个重要的配置项：
- 上级导航：这个选项让您能够轻松构建多级下拉菜单。如果您希望当前链接是顶层菜单项，就选择“顶级导航”；如果它应该作为某个现有菜单项的子菜单，就选择对应的上级菜单。安企CMS目前支持两级导航，这足以满足大多数网站的需求。
- 显示名称：这是导航链接在前台页面上显示的文字。您可以灵活设置，不一定要与链接指向的内容名称完全一致。
- 子标题名称与导航描述：这两个字段提供了额外的显示空间。如果您的导航需要更丰富的文字信息，比如英文子标题或简短描述，就可以在这里填写，方便前端模板调用。
- 链接类型：这是定义导航链接指向何处的核心。安企CMS提供了多种选择：
- 内置链接：包含首页、内容模型首页（如文章模型首页、产品模型首页等），这些是系统预设的常用链接。
- 分类页面链接：您可以直接选择已创建的任意文章分类、产品分类或单页面作为导航链接。
- 外部链接：如果您需要链接到站外资源或者其他自定义URL，可以选择此项并填写完整的链接地址。
- 显示顺序：通过调整数字大小，您可以控制菜单项的排列顺序，数字越小越靠前。
通过这些灵活的配置，您可以在后台直观地构建出各种复杂结构的导航菜单，而无需触碰任何代码。
前端模板：将配置变为可视菜单
当您在后台配置好导航内容后，下一步就是将这些数据呈现在网站的前端页面上。安企CMS的模板系统采用类似Django模板引擎的语法，简洁高效，让技术信息易于理解和应用。
在模板文件中，我们主要会用到navList这个标签来获取导航数据。这个标签的功能是动态地从后台数据库中提取您配置好的导航列表。
通常，您会将导航菜单的代码放置在公共模板文件（如base.html或partial/header.html、partial/footer.html）中，然后通过{% include %}标签在各个页面中引用。
一个基础的单级导航菜单模板代码大致如下：
{# 假设这是您的顶部导航区域 #}
<nav class="main-navigation">
<ul>
{% navList navs with typeId=1 %} {# typeId=1 通常指代默认导航类别 #}
{% for item in navs %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
这段代码首先使用{% navList navs with typeId=1 %}标签来获取typeId为1（即默认导航类别）的所有导航数据，并将其赋值给navs变量。然后，通过{% for item in navs %}循环遍历每一个导航项。每个item都包含了如Title（显示名称）、Link（链接地址）、IsCurrent（是否为当前页面链接）等属性，您可以根据需要进行调用。{% if item.IsCurrent %}这部分代码非常实用，它可以帮助您为当前页面对应的导航菜单项添加高亮样式，提升用户体验。
如果您的导航菜单包含二级下拉菜单，代码会稍微复杂一些，但核心逻辑依然是嵌套循环：
{# 包含二级下拉菜单的顶部导航 #}
<nav class="main-navigation">
<ul>
{% navList navs with typeId=1 %}
{% for item in navs %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">
{{ item.Title }}
{% if item.NavList %}<i class="arrow-down"></i>{% endif %} {# 如果有子菜单，显示一个小图标 #}
</a>
{% if item.NavList %} {# 判断是否有下级导航 #}
<ul class="submenu">
{% for sub_item in item.NavList %}
<li {% if sub_item.IsCurrent %}class="active"{% endif %}>
<a href="{{ sub_item.Link }}">{{ sub_item.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
这里，我们通过{% if item.NavList %}来判断当前主菜单项是否有子菜单。如果有，就再使用一个{% for sub_item in item.NavList %}循环来渲染子菜单项，sub_item同样拥有Title、Link、IsCurrent等属性。
通过这样的模板结构，您后台配置的任何修改，都会即时反映在网站前台，实现了真正意义上的动态菜单。
实用技巧与**实践
- SEO 友好：在设置导航链接时，确保使用有意义的文字作为“显示名称”，这有助于搜索引擎理解您的网站内容。对于指向外部网站的链接，您可以在前端代码中手动添加
rel="nofollow"属性，防止不必要的权重流失，或在后台配置链接时选择Nofollow。 - 提升用户体验：
- 清晰的层级：避免过深的导航层级，通常两到三级足以让用户快速找到所需信息。
- 响应式设计：确保您的导航菜单在不同设备（如手机、平板）上都能良好显示和操作。安企CMS支持自适应、代码适配和PC+手机独立站点模式，为实现响应式导航提供了基础。
- 高亮当前页面：利用
item.IsCurrent属性为用户所在页面的导航项添加醒目样式，帮助用户保持方向感。
- 维护便捷性：所有导航内容的增删改查都在后台完成，无需修改模板代码，大大降低了日常运营的维护成本和出错几率。
- 多站点适用性：安企CMS的多站点管理功能，使得每个站点都可以拥有独立的导航配置，即使您管理着多个网站，也能保持各自的灵活性和定制化。
安企CMS通过其友好的后台管理界面和灵活的模板标签，让动态生成和显示网站的顶部或底部导航菜单变得异常简单和高效。无论是中小企业官网、个人博客还是内容营销平台，您都能轻松驾驭，让网站菜单成为引导用户深入探索的得力助手。
常见问题 (FAQ)
Q1：我修改了后台的导航设置，但前台页面没有更新，这是为什么？ A1：安企CMS通常会开启缓存以提升网站性能。如果您在后台修改了导航设置，但前台没有立即生效，可以尝试清理系统缓存。在后台管理界面，通常会有一个“更新缓存”的功能入口，点击后等待几秒钟，再刷新前台页面应该就能看到更新了。
Q2：如何为不同的导航区域（如顶部菜单和底部菜单）设置不同的内容？
A2：在安企CMS的后台“网站导航设置”中，您可以创建多个“导航类别”。比如，您可以创建一个名为“顶部主导航”，再创建一个名为“页脚辅助导航”。在模板中调用navList标签时，通过typeId参数指定调用不同的导航类别，例如{% navList topNavs with typeId=1 %}（假设1是顶部导航的ID）和{% navList footerNavs with typeId=2 %}（假设2是页脚导航的ID）。
Q3：导航菜单可以链接到外部网站或我自定义的特定URL吗？ A3：当然可以。在后台“网站导航设置”中添加或编辑导航链接时，将“链接类型”设置为“外部链接”，然后直接在“链接地址”字段中填写您希望指向的外部URL或自定义路径即可。