The Auto CMS plays a core role in website operation, and the navigation system is the compass for users to explore the website content.A navigation that is well-designed and easy to use not only improves user experience but is also a key part of search engine optimization.Today, let's delve into how to skillfully integrate category pages and single pages into the website's navigation list in AnQiCMS.

Navigation configuration: The bridge from backend to frontend

The navigation system of AnQiCMS is designed to be very intuitive and powerful, it closely integrates the navigation configuration with the calling of the front-end template.In the background management interface, under “Background Settings” -> “Website Navigation Settings”, you will find a highly flexible navigation management module.Here, you can create different 'navigation categories', such as 'top navigation', 'footer navigation', or 'sidebar navigation', to meet the display needs of different areas of the website.

In each navigation category, you can add specific navigation links. AnQiCMS provides various 'link types' for you to choose from:

  • Built-in Links:Containing the home page, specific content models (such as articles, products) on the home page, etc., these links are preset by the system.
  • Category page link:This is one of the types we focus on today. You can directly select the created article category or product category, and the system will automatically retrieve and manage the link of the category.
  • Single page link:Similarly, you can choose the independently created "About Us", "Contact Us" and other single pages, and the system will also automatically handle their links.
  • External links:Allow you to add any internal or external URLs, bringing great extensibility to the navigation system.

When you select 'Category Page Link' or 'Single Page Link' in the background, AnQiCMS will automatically identify and bind the corresponding real URL address to this navigation item.This means, you do not need to manually input complex categories or single-page addresses; the system will take care of everything for you.This design greatly reduces the workload of operation personnel and ensures the accuracy of the link.

The navigation list call in the template: magic of the navList tag

Once the backend navigation items are configured, how can these links be displayed in the frontend template? AnQiCMS provides a core template tag for this.navListThis tag helps us obtain the navigation data set up in the background and provide it in a structured way for template loop rendering.

UsenavListWhen labeling, it is usually defined like this to store navigation data: {% navList navs %}Here,navsIt is the set of navigation items we will operate on next. If you have created multiple navigation categories in the background (such as the ID of the "Top Navigation" is 1, and the ID of the "Footer Navigation" is 2), you cantypeId参数来指定调用哪个类别的导航，例如{% navList navs with typeId=1 %}.

Get tonavs数据后，我们就可以通过循环遍历来显示每一个导航项了。在循环中，每个导航项都会被一个itemVariable represents, anditem.Linkanditem.TitleIt is the core information we need.item.LinkIt directly includes the URL of the category page, single page, or external link that is configured on the backend, anditem.Titlewhich is the display name of the navigation item.

The following is a typical AnQiCMS navigation list template call example, which demonstrates how to handle multi-level navigation and naturally include links to category pages or single pages: 

{% navList navItems with typeId=1 %} {# 假设typeId=1是您的主导航 #}
<nav class="main-navigation">
    <ul class="nav-menu">
        {% for item in navItems %}
            <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a>
                {% if item.NavList %} {# 检查是否有子导航 #}
                    <ul class="sub-menu">
                        {% for subItem in item.NavList %}
                            <li class="sub-item {% if subItem.IsCurrent %}active{% endif %}">
                                <a href="{{ subItem.Link }}" title="{{ subItem.Title }}">{{ subItem.Title }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
</nav>
{% endnavList %}

In this code block:

  1. {% navList navItems with typeId=1 %}Called the navigation category with ID 1 and stored all navigation items innavItemsthe variable.
  2. {% for item in navItems %}Loop through each main navigation item.
  3. {{ item.Link }}Directly output the URL configured for this navigation item in the background. Whether it is a category page, a single page, or another link type,item.Linkit will provide you with the correct address.
  4. {{ item.Title }}Output the display text of the navigation item.
  5. {% if item.IsCurrent %}Used to determine whether the current navigation item is a link to the current page, which is convenient for adding highlight styles.
  6. {% if item.NavList %}Check if the current navigation item has a sub-navigation. If it does, it will go through again.forLoop through and render the sub-navigation list, handling it in a similar manner to the main navigation item.

It is worth mentioning that if you need to display more than just links and titles in navigation, and want to get more details about a certain category or a single page (such as its introduction, thumbnails, etc.), AnQiCMS also provides powerful extension capabilities. When you select "Category Page Link" or "Single Page Link" in the background, the navigation item'sitemThe variable will also contain oneitem.PageIdattribute.PageIdContains the ID of the linked category or single page. You can combinecategoryDetailorpageDetailtags, based onitem.PageIdGet this additional information to create richer and dynamic navigation content. However, for just the core requirement of 'call link', using it directly is enough.item.Linkis sufficient.

Summary

AnQiCMS through its intelligent backend configuration and powerful template tag system makes it extremely simple and efficient to call links to category pages or single pages in the navigation list. Operators only need to specify the link type and target content in the background, and the front-end template will pass throughnavListThe label and its properties, which can smoothly present these preset links on the website.This seamless design ensures the flexibility, maintainability, and good user experience of the website navigation, allowing your website content to be better discovered and browsed by users.

Common Questions (FAQ)

Q1：Can I make a navigation item in the navigation list not just link to a category page, but display the latest several article titles under the category? A1:It is possible. You can use it in the submenu of the navigation item or in a specific areaitem.PageId(If the navigation item links to a category) asarchiveListTagscategoryIdParameters to call the latest articles under this category. Then, you can navigate through an internalforLoop to display these article titles and links. This usually involves more complex template structures, but AnQiCMS provides enough flexibility to achieve this.

**Q2：If I change the URL alias of a category