The website navigation is like the skeleton of your website, guiding visitors to browse different parts of the website and find the content they are interested in.A clear and intuitive navigation system is crucial for improving user experience and the professionalism of the website.AnQi CMS understands this and provides flexible and diverse solutions to build and manage website navigation, especially for complex navigation structures that need to display two-level or even multi-level classification lists.
Today, let's delve into how to set up and display these well-structured category lists in Anqi CMS, making your website navigation more powerful and intelligent.
Security CMS Navigation System Overview
In Anqi CMS, the website's navigation management is concentrated in the "background settingsHere, you can create different types of navigation menus, such as main navigation, footer navigation, or sidebar navigation, etc.The system provides a default "default navigation" category that you can modify on its basis, or create a new navigation category as needed.
The type of navigation links is very flexible, you can choose:
- Built-in link指向网站的首页、不同内容模型的首页（如文章首页、产品首页等）。
- Category page link直接关联到您已创建的文章分类或产品分类。
- External linkCan point to any URL within the site, even links to other websites outside.
For multi-level category lists, Anqi CMS mainly provides two implementation methods: one is to directly configure multi-level menus using built-in navigation functions, and the other is to dynamically generate multi-level lists based on category data, both with their own focus.
Method one: Use built-in navigation features to build a multi-level list
This method is suitable for navigation structures that are relatively fixed, or when you want to finely control the display content of each navigation item.The built-in navigation of Anqi CMS supports navigation links up to two levels, that is, the first-level main menu and the second-level submenu under it.
First step: Configure multi-level navigation in the background
- Enter navigation settings：Log in to the AnQi CMS backend, click the left menu's 'Backend Settings', and then select 'Website Navigation Settings'.
- Manage navigation categories: If you want to create a navigation area other than the 'default navigation' (such as 'footer navigation'), you can add it in the 'navigation category management'.For ordinary main navigation, just use 'default navigation'.
- Add a first-level navigation link:
- Click the 'Add Navigation Link' button.
- “Parent navigation” select “Top navigation”.
- Enter the “Display Name” (for example, “Product Center”, “About Us”).
- Select the 'Link Type', if you want this navigation item to point to a category, select 'Category Page Link' and then select the corresponding category.
- Set the display order, the smaller the number, the closer to the front.
- Add a secondary navigation link:
- Click "Add navigation link" again.
- This 'parent navigation' cannot be selected, instead, choose the first-level navigation item you just created (such as 'Product Center').
- Fill in the “Display Name”, select the “Link Type”, and associate it with the corresponding category or page.
- Set the “Display Order”.
In this way, you can clearly manage the display text, link address, and hierarchy of each navigation item in the background.
Step two: Call and display in the front-end template.
Configure the background navigation first, then you need to call these data through thenavListtags in the front-end template. Usually, this part of the code is placed inheader.htmlorbase.htmlsuch a public template file.
navListThe usage of tags is as follows:
{% navList navs with typeId=1 %} {# typeId=1 默认为主导航，如果自定义了类别请填写对应ID #}
<ul class="main-nav">
{%- for item in navs %} {# 遍历一级导航项 #}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %} {# 判断当前一级导航项是否有二级子菜单 #}
<dl class="sub-nav">
{%- for inner in item.NavList %} {# 遍历二级导航项 #}
<dd class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
In the code above,navsThe variable will include all the first-level navigation items you configure in the background, eachitemrepresents a navigation item. Ifitem.NavListexists, it means that there is a second-level submenu under this navigation item, and you can use it againforLoop throughitem.NavListTo display the secondary menu content.item.IsCurrentThe attribute can help you determine whether the current navigation item is the current page, so that you can addactivea class name to highlight display.
Advanced usage: Display corresponding content under the second-level navigation
Sometimes, you may wish to expand the secondary navigation items not only to display the subcategory names but also to list the articles or product lists under the category directly.This is very practical in product displays or information websites.item.PageIdThe field provides the possibility to implement this function,item.PageIdIt will return the ID of the category or page associated with the current navigation item.
For example, in a product navigation, show 8 products under the second-level category:
<ul>
{% navList navList with 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>
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 使用 inner.PageId 获取产品列表 #}
{% 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 %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
Another common requirement is to display the third-level category under the second-level navigation, and so on. At this time, you caninnerUsing inside the loop againcategoryListTags:
<ul>
{% navList navList with 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>
{% if inner.PageId > 0 %}
{% categoryList categories with parentId=inner.PageId %} {# 使用 inner.PageId 获取三级分类 #}
{% if categories %}
<ul>
{% for subCategory in categories %}
<li>
<a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
Method two: Pure category-driven dynamic multi-level navigation
If your website's category structure is very large and often adjusted, or if you want the navigation to be generated completely based on the hierarchical relationship of the categories, then you should use directlycategoryListBuilding tags for navigation will be more efficient. This method can realize multi-level classification lists of any depth.
Step 1: Ensure that the classification structure is complete
Firstly, you need to make sure that the classification hierarchy is set up in the "Content Management" -> "Document Classification" of the Anqi CMS backend.For example, there are second-level categories under the first-level category, and third-level categories under the second-level category, and so on.
Step 2: Dynamically call in the front-end template
By recursive call or nestingcategoryListTags, you can easily build multi-level category navigation.
Here is an example code for a three-level category navigation.
”`twig {% categoryList topCategories with moduleId=“1” parentId=“0” %} {# Retrieve the top-level categories of the article model #}
{% for level1_item in topCategories %} {# 遍历一级分类 #}
<li>
<a href="{{ level1_item.Link }}">{{level1_item.