The website navigation is the first window of interaction between users and the website. A clear and intuitive navigation system can greatly enhance the user experience and help visitors quickly find the information they need.AnQiCMS provides a flexible and powerful navigation management feature, which can easily realize simple single-level menus as well as complex two-level, three-level, and even more hierarchical multi-level navigation.Next, we will delve into how to build and display a multi-level navigation menu in AnQiCMS.
Backend settings: The cornerstone of building navigation
In AnQiCMS, the construction of multi-level navigation begins with careful configuration in the backend. You can define the structure of various menus on the website through the 'Website Navigation Settings' feature in the backend.
1. Navigation Category Management
Firstly, navigation is not limited to the main menu at the top of the website.AnQiCMS allows you to create multiple 'navigation categories', such as main navigation, footer navigation, sidebar navigation, etc.In the "Navigation Category Management", you can add different navigation categories according to your website layout needs.The system will have a default 'Default Navigation' category, and you can create new categories as needed, such as creating a category named 'Footer Navigation'.typeIdThis ID will be used in the front-end template to specify which navigation list to call.
2. Navigation Link Settings
After confirming the navigation category, the next step is to add specific navigation links to these categories.In the 'Navigation Links Settings', you can add navigation entries for each category and define their hierarchy.
- Parent Navigation:This is the key to implementing multi-level navigation.You can choose an existing top-level navigation as the 'parent navigation' for the current link, so that the current link will become a sub-menu item.AnQiCMS natively supports up to two-level navigation (that is, a primary menu and a secondary submenu), which can be easily realized through this setting.
- Display Name, Subtitle Name, Navigation Description:These fields allow you to provide rich information for navigation items, such as main title, subtitle, or brief description, which is very useful when designing complex navigation menus.
- Link type:AnQiCMS provides three flexible link types:
- Built-in Links:Including home page, article model home page, product model home page, and other commonly used pages, it is convenient to directly link to these functional pages.
- Category page link:This is an important option for building dynamic multi-level navigation. You can choose any category or single page created on the website as a navigation link.
- External links:Allow you to enter any URL, whether it is an internal page of another site or an external website link.
- Display Order:You can set a numeric order for each navigation link, with lower numbers appearing earlier, allowing precise control over the arrangement of navigation items.
Through these settings, you can flexibly build various levels of navigation menus according to your website structure and design needs in the AnQiCMS backend.
Template invocation: Present the navigation on the frontend
Once the background navigation settings are completed, these navigation data can be called and displayed in the front-end template through specific tags.AnQiCMS uses a syntax similar to Django template engine, which is very intuitive.
1. UsenavListTag navigation call
The core navigation invocation tag isnavList. It will extract the corresponding navigation data based on your configuration in the background.
BasicnavListThe usage of the tag is as follows, it will store the obtained navigation data intonavsthe variable, and then you canforloop through these data:
{% navList navs with typeId=1 %} {# 这里的 typeId=1 对应后台“默认导航”的类别ID，请根据实际情况修改 #}
{# 导航菜单的HTML结构将在这里构建 #}
{% endnavList %}
2. Build a single-level navigation menu
If you only need to display the first-level menu, the code will be quite concise:
<nav>
<ul>
{% navList navs with typeId=1 %}
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In the above code,item.LinkGet the navigation link address,item.TitleGet the navigation display name.item.IsCurrentis a very useful boolean value, it returns when the current page matches the navigation linktrue, you can use it to add to the currently active menu itemactiveClass, to implement highlighting effect.
3. Build Secondary Navigation Menu
To implement secondary navigation, it is necessary to utilizenavListthe returned data to determineitem.NavListproperties. If a navigation item has a submenu, thenitem.NavListThis will be an array containing sub-menu items. You can nest another loop within the parent menu item loop.forto display the sub-menu:
<nav>
<ul class="main-menu">
{% navList navs with typeId=1 %}
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %} {# 判断是否有子菜单 #}
<ul class="sub-menu">
{% for subItem in item.NavList %}
<li class="{% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
This code demonstrates a typical two-level navigation structure. Whenitem.NavListit exists, asub-menuof<ul>list containing all the sub-menu items will be rendered.
4. CombinecategoryListImplement multi-level dynamic navigation (suitable for deeper levels)
AnQiCMSnavListTags support two-level navigation by default. However, if your website has a deeper category hierarchy or you want the navigation to be completely dynamically generated based on the category structure (not just manually configured links in the backend), then you can combine the use ofcategoryListLabel.
categoryListTags can obtain the classification data of a specified content model and can recursively display subcategories. By placingcategoryListnested innavListthe sub-menu section, or using it independently.categoryListYou can build a more flexible multi-level dynamic navigation.
The following is an example of anavListWithcategoryListCombine and implement the example of 'First-level navigation (backend configuration) -> Second-level navigation (backend configuration) -> Third-level category (dynamically obtained)'
<nav>
<ul class="main-menu">
{% navList navs with typeId=1 %}
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %}
<ul class="sub-menu">
{% for subItem in item.NavList %}
<li class="{% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
{# 假设 subItem.PageId 对应一个分类ID，且我们希望在其下动态显示其子分类 #}
{% if subItem.PageId > 0 %}
{% categoryList categories with parentId=subItem.PageId %}
{% if categories %}
<ul class="third-level-menu">
{% for category in categories %}
<li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In this example, we first usenavListGained navigation configuration from two-level backend. In the two-level navigation loop.subItemWe checksubItem.PageId(if the secondary menu is associated with a certain category ID), then usecategoryListRetrieve all subcategories of the category to dynamically generate the third-level menu.categoryListalso supportsparentIdparameters to get the subcategories under the specified parent level, andHasChildren