AnQiCMS navigation list label: Flexible calling, endless 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 first choice for many small and medium-sized enterprises and content operation teams.Among them, website navigation serves as the first entrance for users to access the website, and its flexibility and manageability are the key to operating efficiency.
Many AnQiCMS users, especially those who are new to template development, may have a question: "The navigation list tags of AnQiCMS"navListCan it only be called on the homepage of the website? Can it be flexibly used on other pages such as category pages, detail pages, and custom pages to meet the diverse content display needs?As an experienced website operation expert, I can clearly tell you that: AnQiCMS'navListThe label, with its design philosophy and implementation, goes far beyond the constraints of the homepage, allowing flexible use on any page of the website and supporting rich customization and dynamic content presentation.
The philosophy and flexibility foundation of AnQiCMS template
To understandnavListThe power of tags, we first need to review the overall template design philosophy of AnQiCMS.AnQiCMS uses a syntax similar to Django template engine, which provides a solid foundation for separating content and structure. Through{% 标签 %}and{{ 变量 }}The form, developers can easily build highly customized templates.The modular design of the system ensures that each functional point can be upgraded and expanded independently, and its high-performance architecture guarantees that it can maintain fast execution even under complex calls.
This design idea of 'everything can be tagged', isnavListThe tag can be flexibly used throughout the site. The 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", and so on.Each navigation category has a unique ID (typeIdThis provides the basis for calling different navigation on different pages. In addition, the system supports multi-site management, throughsiteIdParameters, even the ability to call navigation data from other sites within a template, greatly broadens the scope of content operations.
navListThe core function of the tag and parameter parsing
navListThe tag is mainly used to obtain the website navigation list configured on the backend, 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,navsIt is a navigation data array provided by the AnQiCMS backend, developers canforloop through it and useitemvariables to access the various properties of the navigation.
Among them, there are two key parameters assignednavListExceeding the flexibility of the home page:
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).Through specifying differenttypeIdYou can call the required navigation group precisely 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 sites created in the current site template.This is very useful for scenarios that require cross-site content integration or display.
navsEach in the arrayitemContains rich navigation information, for exampleTitle(Navigation title),Link(link address),IsCurrent(Whether the current page link, convenient 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.
Surpass the homepage: The practice of calling in various pages
navListThe true value of the tag lies in its ability to be flexibly called on any page of the website - whether it is a content list page, article detail page, product display page, or custom single page.
Imagine the following scenario:
- Category list pageIn the sidebar of the article category list page, you may not want to display the main navigation that is the same as the homepage, but instead, you want to show a simplified "popular article category" or "latest release" navigation. You just need to create an independent navigation category for these categories in the background (for example
typeId=4),Then, in the sidebar template of the category list page, use{% navList navs with typeId=4 %}to call it. - Article detail pageIn reading a technical article, users may need to quickly navigate to other articles or subcategories related to the article's category. You can call up a related topic button at the bottom or on the right side of the article details page.
typeIdof the navigation list, even in this navigation list'sitemin, combinedarchiveListtags, dynamically listing other articles related to the current article tags or categories. - footer and top navigationThe most common application scenarios, on the website's
base.htmlorpartial/header.html/partial/footer.htmlIn public templates, through{% include %}Tag introduction, and then calltypeIdFor the "main navigation" and "footer navigation" of thenavListImplement a 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".Likewise, just configure this internal navigation category in the background, and then accurately call it in the "About Us" template.
These cases fully illustrate,navListNot limited to a specific page type, but can be placed in any HTML structure based on page content, layout requirements, and user scenarios, and can betypeIdParameters, accurately present the navigation content set by the operator.
A powerful combination of nesting and dynamic content.
AnQiCMSnavListAnother highlight of the tag is its powerful nesting capability. You can not only innavListCreate multi-level dropdown menus (throughitem.NavListimplementation), and can also be combined with other data tags, 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 directly lists all product categories, and even dynamically pull the latest products under each category. This istag-/anqiapi-other/165.htmlThe example is clearly demonstrated:
{% 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 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, AnQiCMS'navListThe navigation list label is not exclusive to the homepage, it is a vivid manifestation of AnQiCMS's powerful template engine and modular design concept. WithtypeIdandsiteIdand other flexible parameters, as well as witharchiveList/categoryListand other labels.