如何构建和展示AnqiCMS的多级网站导航列表，并支持自定义样式和子标题显示？
📅
👁️ 61
构建一个高效、直观且具备良好用户体验的网站，离不开精心设计的导航系统。在AnQiCMS中，构建多级网站导航列表，并支持自定义样式和子标题显示，是一个既强大又灵活的功能。它允许内容运营者根据业务需求，轻松打造出适应各种复杂场景的菜单结构。
AnQiCMS 导航系统的核心优势
AnQiCMS在导航构建上提供了丰富的选项，这得益于其基于Go语言的高性能架构和灵活的模板引擎。系统内置的导航管理功能，让用户无需编写复杂代码，即可在后台直观地配置导航结构。同时，强大的Django模板引擎语法，使得前端开发者可以轻松地将后台配置转化为具有自定义样式和动态效果的精美导航。特别值得一提的是，AnQiCMS支持多站点管理，这意味着您可以为不同的站点独立配置导航，实现精细化运营。
第一步：在后台配置导航菜单
AnQiCMS的导航配置主要集中在后台的“网站导航设置”中。这里您可以像搭积木一样，自由组合导航元素。
- 管理导航类别： 想象一下，您的网站可能不仅有主导航，还需要一个页脚导航或者侧边栏导航。AnQiCMS允许您创建多个“导航类别”，比如“顶部主导航”、“页脚导航”、“侧边服务”等。通过自定义导航类别，您可以将不同位置的导航内容区分开来，便于管理和调用。
- 添加导航链接： 在选定或创建导航类别后，您可以开始添加具体的导航链接。
- 显示名称与子标题： 每个导航项都有一个“显示名称”，这是前端展示给用户的主要文本。如果您需要导航项同时显示第二语言、简短描述或者额外的说明，可以充分利用“子标题名称”字段。例如，主标题是“联系我们”，子标题可以是“Contact Us”。
- 链接类型： AnQiCMS提供了三种灵活的链接类型：
- 内置链接： 包含网站首页、文章模型首页、产品模型首页等常用页面，方便快捷地指向系统核心功能。
- 分类页面链接： 可以选择网站中已创建的任何文章分类、产品分类或单页面作为导航目标，确保导航与内容结构的紧密关联。
- 外部链接： 允许您添加任何站内或站外的URL，这对于链接到外部合作站点、社交媒体页面或特定营销落地页非常有用。
- 层级关系： AnQiCMS支持最多两级的导航链接，即一个主导航项下可以包含一层子导航项。通过设置“上级导航”，您可以轻松地构建这种父子层级的菜单结构。
- 显示顺序： 每个导航项都可以通过“显示顺序”来调整其在前台的排列位置。数字越小，显示越靠前，这让您能够精确控制菜单的布局。
第二步：在模板中调用导航列表
后台配置完成后，接下来就是将这些数据呈现在网站前端。AnQiCMS的模板标签系统让这一过程变得非常直观，其中navList标签是用于调用导航列表的核心。
在您的模板文件（通常是base.html或特定的header.html片段）中，您可以使用以下方式来调用导航数据：
{% navList navs with typeId=1 %}
<ul>
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{%- if item.SubTitle %}
<span class="sub-title">{{ item.SubTitle }}</span>
{%- endif %}
{# 判断是否有子级导航 #}
{%- if item.NavList %}
<dl class="sub-menu">
{%- for subItem in item.NavList %}
<dd class="{% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
{% if subItem.SubTitle %}
<span class="sub-title-child">{{ subItem.SubTitle }}</span>
{% endif %}
</dd>
{%- endfor %}
</dl>
{%- endif %}
</li>
{%- endfor %}
</ul>
{% endnavList %}
在上面的代码中：
{% navList navs with typeId=1 %}：这里的typeId参数对应后台“导航类别”的ID。如果您想调用“顶部主导航”，需要确保后台该类别的ID是1。navs是我们为这个导航列表数据定义的变量名。{% for item in navs %}：这是一个循环，用于遍历所有顶级导航项。item.Title和item.Link：分别获取导航项的主标题和链接地址。{% if item.SubTitle %}：通过条件判断，检查导航项是否设置了子标题，并将其显示出来，您可以为其添加特定的CSS类，如sub-title。{% if item.NavList %}：这个条件判断是构建二级导航的关键。如果当前导航项有子级列表（即NavList不为空），则进入子级循环。{% for subItem in item.NavList %}：再次循环，这次是遍历当前顶级导航项下的所有子导航项。item.IsCurrent和subItem.IsCurrent：这是AnQiCMS提供的一个非常实用的属性。当用户访问的页面与某个导航项的链接匹配时，IsCurrent会自动为true，您可以利用它来为当前活跃的导航项添加active等CSS类，以实现高亮显示。
第三步：实现多级导航与自定义样式
AnQiCMS为您提供了生成导航HTML结构所需的全部数据。自定义样式则主要通过CSS来实现。
- HTML结构配合CSS： 在上述模板代码中，我们采用了常见的
<ul><li><a>和<dl><dd><a>嵌套结构来构建两级导航。您可以通过给这些HTML元素添加自定义的类名（如sub-menu,sub-title等），然后编写对应的CSS规则，实现从简单的文字样式到复杂的下拉菜单动画效果。例如，您可以利用sub-menu类来控制二级菜单的显示/隐藏、背景色、边框等。 - 子标题的灵活运用：
item.SubTitle字段不仅仅可以用于显示第二语言，还可以作为导航项的简短描述。在CSS中，您可以为子标题定义不同的字体大小、颜色或位置，使其成为导航的辅助信息，提升用户体验。
高级应用场景：动态内容整合到导航
AnQiCMS的强大之处还在于，您可以将内容模型的灵活性与导航系统结合。例如，如果您的需求更进一步，希望在导航下拉菜单中直接展示特定分类下的产品列表或文章列表，可以在item.NavList的内部循环中，再次嵌套archiveList或categoryList标签。
举例来说，在二级导航项下展示其所属分类的最新文章：
”`twig {# … 顶级导航循环 … #}
{%- if item.NavList %}