As a website operator who is deeply familiar with the operation of Anqi CMS, I know the importance of a clear and efficient navigation system for user experience and website SEO. In Anqi CMS,navList
Understanding the custom navigation categories of the AnQi CMS
Going deepernavListThe specific calling method of the label, we first need to clarify the concept of "Custom Navigation Category" in the Safe CMS.Auto CMS provides an intuitive backend management interface for creating and managing navigation menus for different purposes.
You can access the 'Navigation Category Management' section through the navigation settings feature.Here, in addition to the system default main navigation categories, you can add new navigation categories according to the website requirements, such as 'Footer Navigation', 'Product Category Navigation', or 'Service Feature Navigation', etc.typeId(Category ID). ThistypeIdis the key parameter we call 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.You have prepared rich data sources for the front-end display of the website by reasonably configuring these navigation links and their levels (Anqi CMS supports two-level navigation).
navListBasic call and parameter parsing of tags
navListLabels are the core tags used to obtain the navigation list in Anqí CMS templates. Their basic syntax structure is as follows:
{% navList 变量名称 %}
{# 循环输出导航项的代码 #}
{% endnavList %}
Here,变量名称This is a custom name you give to the navigation data you obtain, for example, commonly usednavsormainNavThis variable will be an array object, you need to useforto iterate over and render each navigation item.
navListThe tag supports the following core parameters, includingtypeIdThis is the key to implementing custom navigation categories calls:
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 (usuallytypeIdwill be used). When you create a navigation category named "Footer Navigation" and set itstypeIdto 2 in the background, you cantypeId=2to call it accurately.siteIdFor a CMS system that has deployed multiple sites, if you want to call the navigation data under 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)'s available fields
InforIn the loop, each navigation item (usually named item) all include the following fields, which you can use flexibly in the template:
Title: The display name of the navigation item, i.e., the 'Display Name' you set in the backend.SubTitle: Navigation item subtitle, used to implement double title display effect.Description: Description information of the navigation item.Link: The URL link that the navigation item points to.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.IsCurrent: An English value, indicating whether the current navigation item is the active navigation item corresponding to the current page, often used to addactiveClass name to highlight.NavList: If the current navigation item has sub-navigation, this field will be an array containing sub-navigation items. You can use a loop to render the second-level navigation.forloop to render the second-level navigation.
The practice example of calling a custom navigation category
Suppose you have created a custom navigation category named "Footer Navigation" in the Anqi CMS background,typeIdNow we will 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 clearnavListLabel to get the navigation category data with ID 2. Through two layersforLoop, we can elegantly render the footer menu that includes sub-navigation.
Further, if you want to display not only the second-level navigation items in a specific navigation menu, but also if the second-level navigation items are associated with categories (viaPageId），还想列出该分类下的部分文档，可以这样实现：
{# 这是一个更复杂的导航示例，可能用于主导航菜单 #}
<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>
在这个进阶示例中，我们结合了navListandarchiveListTags, implemented to dynamically display associated categories of documents in the second-level menu of the main navigation. This greatly enhances the practicality and information density of navigation.
Summary
navListTags are an indispensable powerful tool in the security CMS template making. By flexibly utilizingtypeIdparameters, and combining with theitemA profound understanding of variable fields, allowing you to build a highly customizable, feature-rich website navigation system.This not only optimizes the website user experience, but also provides clearer website structure information for search engines, thereby indirectly improving SEO effects.navListThe call method will make you proficient in content management and website operation in Anqi CMS.
Common Questions and Answers (FAQ)
1. How to create a custom navigation category in the Anqi CMS backend?
You can navigate to "Backend Settings" -> "Navigation Settings" in the Anqi CMS backend.In the navigation settings page, find the "Navigation Category ManagementEnter the name of the category you wish (for example, "Footer Navigation"), then save.typeId。You can view this in the list.typeId，and call it through the template by.typeIdparameter.
2.navListHow many levels of navigation display does the tag support?
Anqi CMS'snavListThe label supports the display of two-level navigation.That is to say, you can set a level one navigation menu and set a level two navigation menu under each level one navigation item.If your design requires a deeper level of navigation, you may need to consider adjusting the information architecture of the website or implementing a more complex navigation structure through custom development.
3. How to highlight the navigation item corresponding to the current page?
navListTagsitemA variable contains aIsCurrentfield. This is a boolean value, when the current navigation item is the link of the current page, its value istrue。You can use conditional judgment in the template toIsCurrentresponse fortrueadd a specific CSS class to the navigation itemsactive), thereby highlighting them. For example:<li class="{% if item.IsCurrent %}active{% endif %}">...</li>.