AnQiCMS as an efficient content management system, one of its core advantages lies in its powerful content organization and template customization capabilities.As a website staff proficient in AnQiCMS operation, I fully understand the importance of a flexible navigation system for user experience and website structure optimization.When you create a new navigation category in the background and want to present it accurately on the website front-end template, AnQiCMS provides intuitive and powerful template tags to meet this need.
Understanding the navigation management mechanism of Anqi CMS
In AnQiCMS's management backend, the navigation system is highly configurable.You can access the 'Navigation Settings' under 'Background Settings' to manage the website's navigation structure.Here there is not only the default main navigation, but also allows you to create custom navigation areas through "Navigation Category Management".For example, in addition to the conventional top navigation, you may also need a navigation specifically designed for the footer, sidebar display, or specific marketing activities.
Creating a new navigation category is a very simple process: on the "Navigation Category ManagementtypeId.Then, you can add specific navigation links to this new category just like managing other navigations.These links can be to "category page links
Core: The key tag for calling custom navigationnavList
In the template system of AnQiCMS,navListLabels are the core tools for retrieving and rendering navigation lists. This tag is designed to be very flexible, allowing you to precisely retrieve any defined navigation category according to your needs.navListThe power of the label lies in itstypeIdParameters, this is the bridge that associates the specific navigation category created on the back-end with the front-end template. After you create a new navigation category on the back-end, the system will allocate atypeIdIn the template, you only need to specify thistypeId,navListtag to accurately obtain all navigation links under this category.
navListThe usage method of the tag is usually{% navList 变量名称 with typeId="您的导航类别ID" %}," and is{% endnavList %}end. Inside the tag, you can useforLoop to traverse the obtained navigation items. Each navigation item (usually named in the loop) contains a series of useful properties,itemsuch asTitle(Navigation title),Link(Navigation link),IsCurrent(Whether the current page link), and used for handling multi-level navigation,NavListetc.
The steps to call the new navigation category accurately in the template
To display the new navigation category you created in the AnQiCMS backend on the website frontend, you need to follow the following steps:
Firstly, in your AnQiCMS backend, go to "Background Settings" -u003e "Navigation Settings". In the "Navigation Category ManagementtypeIdThis ID is automatically generated by the system and is the unique identifier for calling this navigation. Assuming thistypeIdYes2(The default navigation is usually)1，Newly created will be other numbers). Make sure you have added at least one navigation link to this new navigation category.
Then, open the template file you want to display this navigation. The template files for AnQiCMS are usually located/templateIn the directory of your topic folder. For example, if you want to display this navigation in the footer of the website, you may need to editpartial/footer.htmlorindex.htmlat the position where you want to display the navigation.navListtags, and throughtypeId参数指定您记录下的导航类别 ID。
一个典型的调用示例会是这样：
<nav class="footer-nav">
<ul>
{% navList footerNavs with typeId="2" %} {# 假设您的“页脚导航”的 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}}</a>
{%- if item.NavList %} {# 如果存在子导航 #}
<ul class="sub-footer-nav">
{%- for subItem in item.NavList %}
<li class="sub-footer-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 this example,footerNavsIt is the variable name you define for the navigation list,typeId="2"则确保了调取的是您新创建的“页脚导航”类别下的链接。通过forto iteratefooterNavsof eachitem, you can accessitem.Titleanditem.Linkto generate navigation links. At the same time, throughitem.IsCurrentattribute, you can add a special CSS class (such asactive），thus enhancing the user's perception of the current location. If your navigation category supports secondary navigation,item.NavListthe properties will also include a sub-navigation list, and you can nestforthem in a loop to render them.
Complete template modification and save the file.If your AnQiCMS has enabled template caching, you may need to clear the cache in the 'Update Cache' feature on the backend to ensure that the changes take effect immediately.Refresh your website page, and you will find that the new navigation categories are displayed on the frontend according to your design.
**Practical Tips and Considerations
In practice, in order to better manage and maintain the website, it is recommended to use clear and explicit naming for different navigation categories, and to correspond accurately in the templatetypeId.item.SubTitleoritem.DescriptionProperties such as these, you can add more auxiliary information to navigation links to enrich the user experience. In a multi-site environment,navListTags also supportsiteIdParameter, allows you to retrieve navigation data under a specific site, which is particularly important for enterprises with multiple child sites or multilingual sites.
This way, AnQiCMS greatly simplifies the creation and calling process of custom navigation, allowing website operators to focus more on content presentation and user experience optimization, rather than tedious code writing.
Common Questions (FAQ)
How to determine the navigation category I just createdtypeId?AnQiCMS background when you create a new navigation category, although it usually does not display directlytypeId. You can first create a new navigation category and add some links to it. Then, you can check the tables related to navigation in the database (such asnav_typeor a similar table structure, the specific table name may vary depending on the version), or in some cases, by viewing the source code of the back-end page, to find the ID corresponding to this new navigation category.The most direct method is to click on 'Navigation Settings' page, edit your new navigation category, usually the ID of the navigation category is included in the URL.
My navigation link is not displayed in the template, how should I troubleshoot?First, please checktypeIdwhether it is correct. Make sure you arenavListUsed in the tag:typeIdThe navigation category ID created by the background is completely consistent.First, confirm that the navigation category you have called has indeed added a navigation link.If the link is empty, the front-end will naturally not display any content.Moreover, check if the template file path is correct and whether there are syntax errors that cause the template parsing to fail.Finally, don't forget to clear the AnQiCMS system cache to ensure that the latest template and data are loaded.
navListwhether the tag supports creating a navigation menu with more than two levels?According to AnQiCMS's design,navListThe label currently supports up to two levels of navigation links.This means you can have a main navigation, as well as a layer of sub-navigation under the main navigation.If you need a deeper level of navigation structure, you may need to consider custom template logic, or design the sub-navigation as an independent navigation category, and combine it with JavaScript to implement more complex interactions on the front-end.