As an experienced website operator who deeply understands the operation of Anqi CMS, I know that a clear and efficient navigation system is crucial for user experience and website SEO. In Anqi CMS,navListTags are the core tools for building flexible and versatile navigation menus. They not only help you display standard top navigation but also allow you to easily call and customize various navigation categories to meet the diverse layout needs of websites, such as footer navigation, sidebar navigation, and even context navigation for specific pages.
Understand the custom navigation category of AnQi CMS
Further innavListBefore specifying the specific calling method of the tag, we must first clarify the concept of "custom navigation category" in the Anqi CMS.The Anqi CMS provides an intuitive backend management interface for creating and managing navigation menus for different purposes.
You can navigate to the "Navigation Category Management" section using the navigation settings feature.Here, in addition to the system default main navigation categories, you can add new navigation categories according to the needs of the website, such as named "footer navigation", "product category navigation", or "service feature navigation", etc.Each new navigation category is assigned a unique one by the systemtypeId(Category ID). ThistypeIdis the key parameter we call the specific custom navigation in the template
After creating a custom navigation category, you can add specific navigation links below it.These links can be pointing to in-site built-in pages, category pages, or any external links.Configure these navigation links and their levels (Anqi CMS supports two-level navigation) properly, and you will have prepared a rich data source for the website's frontend display.
navListBasic call and parameter parsing of tags
navListThe tag is the core tag used to obtain the navigation list in AnQi CMS template. Its basic syntax structure is as follows:
{% navList 变量名称 %}
{# 循环输出导航项的代码 #}
{% endnavList %}
Here, 变量名称It is a name you customize for the navigation data you obtain, for example, commonly used.navsormainNavThis variable will be an array object, you need to useforloop to iterate over and render each navigation item
navListThe tag supports the following core parameters, includingtypeIdIs the key to implementing custom navigation categories:
typeId: This parameter is used to specify the ID of the navigation category you want to call. By default, if you do not set this parameter,navListThe system default navigation category (usuallytypeIdis set to 1). When you create a navigation category named "Footer Navigation" and itstypeIdis set to 2, you can call it precisely bytypeId=2.siteId: For a CMS system deployed on multiple sites, if you want to call navigation data from other sites, you can specify the site ID through this parameter.In a single-site environment, this parameter is usually not required.
Navigation item (item) available fields
InforIn the loop, each navigation item (usually nameditem) contains the following fields, which can be flexibly used in the template:
Title: The display name of the navigation item, which is the display name set in the background.SubTitle: The subtitle of the navigation item, used to achieve a dual title display effect.Description: The description information of the navigation item.Link: The URL link of the navigation item.PageId: If the navigation item link type is category or single page, this field will contain the corresponding category or single page ID. This is very useful for further calling related content in navigation.IsCurrentA boolean value indicating whether the current navigation item corresponds to the active navigation item of the current page, often used to addactiveHighlighting is implemented by class name.NavList: If the current navigation item has sub-navigation, this field will be an array containing sub-navigation items. You can use nestedforloops to render secondary navigation.
Example of invoking a custom navigation category
Assuming you have created a custom navigation category named "Footer Navigation" in the AnQi CMS backend, and itstypeIdFor 2. Now let's demonstrate how to call it in the template and show its two-level navigation structure:
{# 假设这是您的页脚模板文件，例如 partial/footer_nav.html #}
<nav class="footer-nav">
<h3>网站导航</h3>
<ul>
{# 通过 typeId 参数调用 ID 为 2 的“页脚导航”类别 #}
{% navList footerNavs with typeId=2 %}
{%- for item in footerNavs %}
{# 检查当前导航项是否有子导航 #}
<li class="footer-nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}" title="{{ item.Title }}">
{{ item.Title }}
{% if item.SubTitle %}<span>{{ item.SubTitle }}</span>{% endif %}
</a>
{%- if item.NavList %}
{# 如果有子导航，则进行嵌套循环渲染二级导航 #}
<ul class="footer-sub-nav">
{%- for subItem in item.NavList %}
<li class="footer-sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}" title="{{ subItem.Title }}">
{{ subItem.Title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In the above example,typeId=2Make it clearnavListtag to get the navigation category data with ID 2. Through two layersforLoop, we can elegantly render a footer menu with sub-navigation.
Further, suppose you want to display not only the secondary navigation items in a specific navigation menu, if the secondary navigation items are associated with categories (viaPageId)， Want to list some documents under this category, you can do it like this:
{# 这是一个更复杂的导航示例，可能用于主导航菜单 #}
<ul class="main-navigation">
{% navList mainNav with typeId=1 %} {# 假设主导航的 typeId 为 1 #}
{%- for item in mainNav %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a>
{%- if item.NavList %} {# 如果有一级子菜单 #}
<ul class="submenu">
{%- for subItem in item.NavList %}
<li class="submenu-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}" title="{{ subItem.Title }}">{{ subItem.Title }}</a>
{%- if subItem.PageId > 0 %} {# 如果二级导航项关联了分类 #}
{# 假设关联的分类 ID 在 subItem.PageId 中 #}
{% archiveList relatedDocs with type="list" categoryId=subItem.PageId limit="5" %}
{% if relatedDocs %}
<ul class="related-docs-list">
{% for doc in relatedDocs %}
<li><a href="{{ doc.Link }}" title="{{ doc.Title }}">{{ doc.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
In this advanced example, we combinednavListandarchiveListThe tag has implemented dynamic display of associated categories of documents in the secondary menu of the main navigation. This greatly enhances the practicality and information density of navigation.
Summary
navListTags are an indispensable powerful tool in the process of making Anqi CMS templates. By flexibly utilizingtypeIdparameters, and combining with theitemA profound understanding of variable fields, you can build a highly customized, feature-rich website navigation system.This not only optimizes the user experience of the website, but also provides clearer website structure information for search engines, thereby indirectly improving SEO effectiveness.Proficient in masterynavListThe call method will make you proficient in content management and website operation in AnQi CMS.
Frequently Asked Questions (FAQ)
1. How to create a custom navigation category in the AnQi CMS backend?
You can navigate to "Background Settings" in the AnQi CMS backend -> "Navigation Settings".In the navigation settings page, find the 'Navigation Category Management' section, and click the 'Add Navigation Category' button.Enter the category name you want (for example, "footer navigation"), then save.The system will automatically assign a new category for thistypeId. You can see this in the listtypeId, and go through the templatetypeIdto call it with the parameter.
2.navListHow many levels of navigation display does the tag support?
Of Security CMSnavListThe label supports two-level navigation display. That is to say, you can set a first-level navigation menu and a second-level navigation menu under each first-level navigation item.If your design requires a deeper level of navigation, you may need to consider adjusting the website's information architecture, or implementing a more complex navigation structure through custom development.
3. How to highlight the navigation item corresponding to the current page?
navListlabel'sitemA variable contains aIsCurrentfield. This is a boolean value, its value is when the current navigation item is a link to the current pagetrue. You can use conditional judgments in the template to add specific CSS classes toIsCurrentWithtruethe navigation items (for exampleactive), thereby highlighting them. For example:<li class="{% if item.IsCurrent %}active{% endif %}">...</li>.