How to specify different navigation categories with the `typeId` parameter of AnQiCMS navigation tags?

As an experienced website operations expert, I am well aware that a flexible and efficient navigation system is crucial for the user experience and Search Engine Optimization (SEO) of a website. AnQiCMS excels in this aspect, especially through its powerful template tag system, particularlynavListLabel collaborationtypeIdParameters have provided great convenience for the customization of website navigation. Today, let's delve into this in more detail.typeIdThe mystery of parameters and how to cleverly use them to manage different types of navigation categories.

Website navigation: the cornerstone of architecture and the guide for users.

Website navigation, as the name implies, is the path that guides users to navigate through the website content.A well-designed navigation not only helps users find the information they need quickly, improve access efficiency, but also effectively communicates the structural hierarchy of the website to search engines, helping to capture and index content.AnQiCMS deeply understands this, it modularizes the navigation management, allowing operators to create and manage multiple independent navigation menus in the background according to actual needs, to adapt to different page areas or functional scenarios.

AnQiCMS's navigation category: a flexible and variable menu collection

In the AnQiCMS backend, through the "Navigation Settings" function under "Backend Settings", you can create and maintain multiple navigation categories.This is like preparing multiple menus for your website, each serving different dining scenarios.For example, you can have a 'main navigation' at the top of the website, a 'footer navigation' to display copyright information or secondary links, and even design a separate 'sidebar navigation' for specific topic pages or member centers.

Each navigation category has a uniqueIDThis ID is used internally to distinguish different navigation collections. By default, the system will have an ID of1The "default navigation". When you add a new navigation category, the system will assign a new ID to it, for example2/3These unique IDs are the key to accurately calling specific navigation through template tags.

navListwith the tag andtypeIdParameter: Precise navigation controller

AnQiCMS template system providesnavListThe tag is used to output the navigation link list on the front-end page. Its basic usage is:

{% navList navs %}
    {# 在这里循环输出导航链接 #}
{% endnavList %}

here,navsIs the variable name you define for the navigation list, you can use any name you like.

To letnavListLabels no longer just call the default navigation, but specify calling a particular navigation category,typeIdThe parameters come into play.typeIdParameters allow you to explicitly specifynavListThe label should be retrieved from which navigation category to get the link data. Its usage is very intuitive:

{% navList mainNav with typeId="1" %}
    {# 循环输出主导航链接 #}
{% endnavList %}

{% navList footerNav with typeId="2" %} {# 假设ID为2的导航类别是“页脚导航” #}
    {# 循环输出页脚导航链接 #}
{% endnavList %}

By adding innavListthe tag withwith typeId="N"(Where N is the ID of the navigation category you create in the background), you can easily display different navigation menus in different areas of the website as needed.

typeIdThe practical application scenario: Make website navigation smarter

applytypeIdParameters, you can implement a variety of flexible navigation management strategies:

1. Multi-position navigation layout:

   • Top main navigation:{% navList mainNav with typeId="1" %}
   • Bottom footer navigation:{% navList footerNav with typeId="2" %}
   • sidebar topic navigation:{% navList sidebarNav with typeId="3" %}By creating independent navigation categories for different page areas, you can ensure that each area's navigation focuses on its specific guidance goal, avoiding redundant menu items and information overload.

2. functional navigation separation:

   • Some websites may need to provide a separate navigation menu for 'Member Center' or 'Partner Entrance'. You can create a 'Member Navigation' category (for exampletypeId="4"), then call this navigation separately on the member center page without interfering with the main navigation structure of the website.

3. Navigation distinction for multiple sites/multiple languages(combined)siteId): AlthoughtypeIdused to distinguishnavigation categoryBut the multi-site feature of AnQiCMS also means that each site can have its own navigation categories. If your AnQiCMS deployment has multiple sites and you need to retrieve navigation data from other sites, in addition totypeIdYou can also combinesiteIdSpecify the target site with parameters

How to write in the templatetypeIdThe navigation code called

Below is a combination oftypeIdand AnQiCMS navigation data structure template code example. The navigation list usually supports a two-level structure,item.NavListused to represent sub-navigation.

{# 假设我们有一个ID为1的主导航类别 #}
<header class="main-header">
    <nav>
        {% navList mainNav with typeId="1" %}
            <ul class="main-menu">
            {% for item in mainNav %}
                <li class="menu-item {% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{ 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 }}">{{ subItem.Title }}</a>
                            </li>
                        {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
            </ul>
        {% endnavList %}
    </nav>
</header>

{# 假设我们有一个ID为2的页脚导航类别 #}
<footer class="main-footer">
    <nav>
        {% navList footerNav with typeId="2" %}
            <ul class="footer-links">
            {% for item in footerNav %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% endfor %}
            </ul>
        {% endnavList %}
    </nav>
</footer>

In this example, we clearly go throughtypeId="1"Navigated to the main navigation, throughtypeId="2"Navigated to the footer navigation.item.IsCurrentIs provided by AnQiCMS to determine whether the current navigation is active, which is very useful for highlighting the current navigation item on the page.item.Linkanditem.TitleThe navigation link's address and displayed text are obtained separately.

Summary

AnQiCMSofnavListtags and theirtypeIdParameters, it is a powerful tool for building flexible and variable website navigation. By carefully designing different "navigation categories" in the background, and utilizingtypeIdIn the template, call it accurately, and you can easily realize the exclusive navigation for the website header, footer, sidebar, and even specific functional modules.This greatly enhances the manageability and maintainability of the website, and also provides users with a clearer, more contextually appropriate browsing experience, thereby indirectly optimizing the overall operation of the website.

Frequently Asked Questions (FAQ)

1. Q: How many navigation categories can I create in the AnQiCMS backend? A:AnQiCMS allows you to create the following