As a senior security CMS website operations personnel, I know that a clear and efficient navigation system is extremely important for website user experience and content organization.In AnQiCMS, establishing a multi-level navigation structure, whether it is the basic two-level navigation or the "deeper level" achieved through clever combination, is a key link in website content management.Here we will detail how to set up and call these navigation in AnQiCMS.
AnQiCMS Navigation Structure Overview
AnQiCMS provides an intuitive and powerful navigation management module that allows operators to flexibly define the website's menu structure.The system itself is designed to support up to two levels of navigation links, that is, a main navigation item can contain a sub-navigation level.This is enough to meet the basic needs of most corporate websites and content sites.On this basis, by combining other template tags, we can also achieve a visual navigation effect that looks like a "deeper level", further enriching the sense of hierarchy of the website.
Navigation configuration is mainly completed through the "Navigation Settings" function on the backend, and the display on the front-end page depends on specific template tags for invocation.
In AnQiCMS backend settings, set the second-level navigation
Set the secondary navigation requires logging into your AnQiCMS backend management interface.In the left menu of the background, you can find the option of 'Navigation Settings' under 'Background Settings'.
After entering the "Navigation SettingsIn most cases, the system will default to providing a 'Default Navigation' category.If you need to create independent navigation menus for different areas of the website (such as the footer, sidebar, etc.), you can click 'Add New Category' to customize more navigation categories.
Now, let's create navigation links. Click the 'Add New Link' button next to 'Navigation Link Settings'.
First, create a first-level navigation link. In the pop-up "Add Navigation Link" window:
- Parent NavigationSelect "Top-Level Navigation", which means you are creating a main menu item.
- Display Name：Enter the text to be displayed on the navigation menu, such as “Products & Services”, “News Center”, etc.
- Link Type：Select according to your needs.
- Built-in linkFor example, pointing to the home page of a website, or the home page of a certain model (such as articles, products).
- Category page link：You can choose an existing article category or product category, or even a single page as the navigation target.
- External Link：适用于指向站内其他页面或外部网站的任意URL。
- Display Order：设置一个数字来控制该导航项在菜单中的排列位置，数字越小越靠前。
After creating the first-level navigation, repeat the steps of 'Add new link' to create the second-level navigation. The key is to select the 'Parent navigation' field.
- Parent NavigationThis is where you need to select the primary navigation item you just created from the drop-down list, for example, if your primary navigation is 'Products & Services', then select 'Products & Services' here.
- Display Name/Link Type/Display OrderThe setting method of the "等" field is the same as the first-level navigation, but their scope of effect is limited to the submenu under the selected upper-level navigation.
By this method, you can add multiple second-level navigation links for each first-level navigation item, thus constructing a clear second-level menu structure.
Call the navigation list in the template
In AnQiCMS template files, usenavListLabel to call the navigation menu you configured in the background. Template files are usually stored in/templatedirectory, and use syntax similar to Django template engine.
Open the public header file in your website template (for examplepartial/header.htmlorbase.html), depending on the structure of your template, you can call it in the following way:
{# 假设您要调用默认导航类别，其 typeId 默认为 1 #}
{% navList navs %}
<ul>
{# 遍历所有一级导航项 #}
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{# 判断当前一级导航项是否有二级子导航 #}
{%- if item.NavList %}
<dl>
{# 遍历当前一级导航项下的所有二级导航项 #}
{%- 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 this code,navListThe label assigns the navigation data configured in the background.navsWe first traversenavsto display the first-level navigation (item). Inside each first-level navigation item, we{% if item.NavList %}Check if there is a second-level navigation. If it exists, traverse again.item.NavListto display all second-level navigations (inner).item.IsCurrentandinner.IsCurrentcan help you add navigation items for the current page being accessed.activeclass to highlight the navigation items.
实现“更深层次”导航的进阶技巧（结合分类列表）
Although AnQiCMS'snavListThe tag supports two-level navigation by default, but in actual operation, we may need to display a visually deeper structure, such as directly listing documents under a certain category or the subcategories of that category. This can be achieved by cleverly combiningcategoryListtags to achieve this.
This method is based on: setting the link type of the secondary navigation item to 'Category Page Link', and then in the template, usingcategoryListtags to obtain the subcategory or document list under the category.
This is a combinednavListandcategoryListImplement an example of a "three-level" visual effect navigation. Assume that your second-level navigation item is associated with a product category, and you want to display a list of subcategories under that product category in the dropdown menu of the second-level navigation item:
<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 %} {# 判断这个二级导航项是否关联了某个分类或页面 #}
{# 调用 inner.PageId 对应的分类的子分类列表，parentId=inner.PageId #}
{% categoryList categories with parentId=inner.PageId %}
{% if categories %}
<ul class="nav-menu-child-child"> {# 这是第三级视觉效果的列表 #}
{% 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>
In this example,inner.PageIdThe variable stores the ID of the category or page associated with the secondary navigation item. We use this ID ascategoryListTagsparentIdParameters, thus dynamically retrieving all subcategories under the category and displaying them as third-level menu items.
If your requirement is to directly display a category's document list under the second-level navigation instead of subcategories, you can do it like this:
<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 %}
{# 调用 inner.PageId 对应的分类下的文档列表 #}
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
{% if products %}
<ul class="nav-menu-child-child">
{% for productItem in products %}
<li><a href="{{productItem.Link}}">{{productItem.Title}}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
Here we usearchiveListtags, and throughcategoryId=inner.PageIdTo get the document list under the category, for example, product list or article list.
Attention Points and **Practice
- Navigation planningIn setting up navigation, it is recommended to plan the overall content structure and user access path of the website first. A clear structure allows users to find the information they need more quickly, enhancing the usability of the website.
- Link type matchesEnsure that the 'Link type' you selected in the background matches the actual content. For example, if the navigation item points to a category, select 'Category page link'.
- Display Order：Reasonably utilize the display order parameters to ensure that navigation items are arranged logically or by importance.
- Cache UpdateAfter any modification to navigation in the background, please be sure to go to the 'Update Cache' feature to clear the website cache to ensure that the front-end can display the latest configuration in a timely manner.
- Template Style：The above code only shows the structure, you need to beautify the navigation menu according to the CSS style of the website to match the overall design style.
- Performance considerationsAlthough
categoryListorarchiveListThe nested use of labels can achieve multi-level visual effects, but excessive nesting or loading a large amount of data for each navigation item may affect page performance.Please weigh the actual needs and scale of the website.
Through the above method, you can not only easily set and call the standard secondary navigation in AnQiCMS, but also achieve a more rich multi-level content display effect by flexibly using other content tags, thereby building a clear and user-friendly website.
Common Questions (FAQ)
Q1: I have set up the second-level navigation in the background, but the front-end page does not display. What could be the reason?
This is usually caused by several reasons.Firstly, please make sure that you have correctly selected the corresponding 'parent navigation' for the secondary navigation in the 'navigation link settings', and that the parent navigation itself is also a valid primary navigation item.navListLabel, and traverseditem.NavListShow sub-navigation.If all these are correct, please try to clear the cache of AnQiCMS backend and refresh your browser cache, as old cache content may sometimes cause the front-end not to update.
Q2: AnQiCMS'snavListDoes the tag support native navigation up to three or more levels?
According to the design of AnQiCMS,navListThe label supports two-level navigation by default, that is, a main navigation item can have one level of sub-navigation. If you need to visually present more levels of navigation effects, you can combine them in the template.categoryListLabel and other content label, dynamically load its associated sub-category or article list in the rendering logic of the secondary navigation. Although this is notnavListThe multi-level expansion itself, but can achieve a similar multi-level content display effect.
Q3: How to highlight the navigation menu item on the current page?
InnavListIn the loop of tags, each navigation itemitem(Including level one navigation and level two navigation)innerAll contain aIsCurrentThe property, it returns a boolean value indicating whether the current navigation item corresponds to the page the user is visiting. You can use this property to add a specific CSS class to the navigation item, such asactiveThen define the style of this class in your CSS file to highlight it. For specific usage, refer to the template call examples provided in the article.