AnQiCMS navigation list label: Flexible calling, unlimited possibilities for website content operation

In today's rapidly changing internet environment, an efficient and flexible content management system (CMS) is crucial for enterprises and content operators.AnQiCMS, with its excellent performance based on the Go language, modular design, and SEO-friendly features, has become the preferred choice for many small and medium-sized enterprises and content operation teams.Among them, the website navigation serves as the first entry for users to access the website, and its flexibility and manageability are the key to operational efficiency.

Many AnQiCMS users, especially those who are new to template development, may have a question: "What are the navigation list tags in AnQiCMS?navListIs it only possible to call this on the homepage of the website?Can it be flexibly applied on other pages such as category pages, detail pages, and custom pages to meet diverse content display needs?AnQiCMSnavListA tag whose design philosophy and implementation go far beyond the constraints of the homepage, allowing for flexible use on any page of the website and supporting rich customization and dynamic content presentation.

The template philosophy and flexibility foundation of AnQiCMS

To understandnavListThe power of tags, we first need to review the overall template design philosophy of AnQiCMS.AnQiCMS uses syntax similar to the Django template engine, which provides a solid foundation for the separation of content and structure.{% 标签 %}and{{ 变量 }}The form allows developers to easily build highly customized templates.The modular design of the system ensures that each functional point can be independently upgraded and expanded, while its high-performance architecture guarantees rapid execution speed even under complex calls.

This design concept of 'everything can be tagged' isnavListThe fundamental reason why tags can be flexibly used throughout the entire site.Navigation in AnQiCMS backend is abstracted as 'Navigation Category', allowing operators to create multiple independent navigation groups according to actual needs, such as 'Main Navigation', 'Footer Navigation', 'Sidebar Navigation', etc.typeIdThis provides the foundation for calling different navigation on different pages. In addition, the system also supports multi-site management,siteIdParameters, even calling navigation data from other sites in a template, greatly broadens the boundaries of content operation.

navListThe core function of tags and parameter parsing

navListLabels are mainly used to obtain the website navigation list configured in the background, and render the data to the front-end page through a loop structure. Its basic calling method is concise and clear:{% navList navs %}...{% endnavList %}Here,navsis a navigation data array provided by the AnQiCMS backend, developers can useforto iterate over it, and useitemvariables to access the properties of each navigation item.

Among them, there are two key parameters grantednavListExceeding the flexibility of the homepage:

  • typeId(Navigation List ID)This is the core parameter that distinguishes different navigation groups.As mentioned earlier, you can create multiple navigation categories in the background (such as the main navigation with ID 1, the footer navigation with ID 2, and the sidebar navigation with ID 3).typeIdYou can accurately call the required navigation group at any location on the website.
  • siteId(Site ID)When you deploy the multi-site management feature of AnQiCMS, this parameter allows you to call the navigation data of other created sites in the template of the current site.This is very useful for scenarios that require cross-site content integration or display.

navsEach item in theitemarray contains rich navigation information, such asTitle(Navigation title),Link[Link address],IsCurrent(whether the current page link, easy to add highlight style), and the most criticalNavListUsed for handling secondary and even multi-level dropdown navigation. This structured data output allows developers to build navigation menus with various styles and complete functions.

Beyond the homepage: Application practices on various pages

navListThe true value of the tag lies in its ability to be flexibly called on any page of the website—whether it's a content list page, article detail page, product display page, or a custom single page.

Imagine the following scenario:

  • Category list pageIn the article category list page sidebar, you may not want to display the same main navigation as the homepage, but rather show a simplified 'Popular Article Categories' or 'Latest Published' navigation. You just need to create an independent navigation category for these categories in the backend (for example,typeId=4Then in the sidebar template of the category list page, use{% navList navs with typeId=4 %}to call it.
  • Article details pageIn reading a technical article, the user may need to quickly jump to other articles or subcategories of the category the article belongs to. You can call a feature named "Related Topics" at the bottom or side of the article detail page.typeIdof the navigation list, and even in this navigation list,itemcombined witharchiveListtags, dynamically listing other articles related to the current article tags or categories.
  • footer and top navigationThe most common application scenarios, on the website'sbase.htmlorpartial/header.html/partial/footer.htmletc. public templates, through{% include %}tags, and then call them separatelytypeIdfor the "main navigation" and "footer navigation" ofnavListImplement unified top and bottom navigation for the entire site.
  • Customize the pageFor example, the "About Us" page may need a concise internal link navigation to guide users to subpages such as "Corporate Culture" and "Team Introduction.Similarly, just configure this internal navigation category in the background and then call it precisely in the "About Us" template.

These cases fully demonstrate,navListNot limited to a specific page type, but can be placed anywhere in the HTML structure based on page content, layout requirements, and user scenarios,typeIdParameters, precisely present the navigation content set by the operator.

Powerful combination of nested and dynamic content.

AnQiCMSnavListAnother highlight of the tags is its powerful nesting capability. You can not only innavListCreate multi-level dropdown menus (byitem.NavListachieved), and can also be combined with other data labels, such asarchiveList(document list) andcategoryList(Category list), creating a highly dynamic and intelligent navigation menu.

For example, under a "Products" menu in the main navigation, you can design a secondary menu that lists all product categories directly, and even dynamically pull the latest products under these categories.tag-navList.mdThe example clearly demonstrates:

{% 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>
            {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} // 在二级导航下调用产品列表
            {% if products %}
            <ul class="nav-menu-child-child">
                {% for item in products %}
                <li><a href="{{item.Link}}">{{item.Title}}</a></li>
                {% endfor %}
            </ul>
            {% endif %}
            {% endarchiveList %}
        </li>
        {% endfor %}
    </ul>
    {% endif %}
</li>
{% endfor %}
{% endnavList %}

This code snippet clearly demonstrates that the navigation menu is not just a collection of static links, but it can also be a dynamic content aggregator that generates content in real-time based on backend data and business logic, greatly enhancing the interactivity and user experience of the website.

Summary

In summary, the value of AnQiCMS'snavListnavigation list tags is not exclusive to the homepage. It is a vivid manifestation of AnQiCMS's powerful template engine and modular design philosophy. WithtypeIdandsiteIdFlexible parameters, as well asarchiveList/categoryListand other tags