The Anqi CMS plays a core role in website operations, and the navigation system is a guide for users to explore the website content.A well-designed, easy-to-use navigation not only improves user experience, but is also a key factor in search engine optimization.Today, let's delve deeply into how to flexibly integrate category pages and single page links巧妙地融入到网站的导航列表之中 into the navigation list of the AnQiCMS website.

Navigation configuration: The bridge from the backend to the frontend

The navigation system of AnQiCMS is designed to be very intuitive and powerful, closely integrating the navigation configuration with the call 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 website areas.

Under each navigation category, you can add specific navigation links. AnQiCMS offers a variety of "link types" for selection:

  • Built-in links:Including homepages, specific content models (such as articles, products) homepages, etc., these links are preset by the system.
  • Category page links:This is one of the types we are focusing on today. You can directly select the article category or product category you have created, and the system will automatically retrieve and manage the link of the category.
  • Single page link:Similarly, you can choose the independent single pages such as "About Us", "Contact Us", etc. 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 the '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 enter complex categories or single-page addresses, the system will take care of everything for you.This design greatly reduces the workload of operations personnel and ensures the accuracy of the links.

Calling the navigation list in the template: the magic of the navList tag.

Once the background navigation items are configured, how can these links be presented in the frontend template? AnQiCMS provides a core template tag for this—navList. This tag helps us get the navigation data set up in the background and provide it in a structured way for template iteration.

UsenavListWhen labeling, it is usually defined like this to store navigation data:{% navList navs %}. Here,navsIt is the set of navigation items we will be operating on. 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 can access them throughtypeIdParameters are used to specify which category of navigation to call, for example{% navList navs with typeId=1 %}.

obtaining tonavsAfter the data is processed, we can then iterate through it to display each navigation item. In the loop, each navigation item will be associated with aitemThe variable represents,item.Linkanditem.TitleThat is the core information we need.item.LinkIt directly includes the URL of the category page, single page, or external link configured in the background,item.Titlewhich is the display name of the navigation item.

This is an example of a typical AnQiCMS navigation list template call, demonstrating 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 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 other link types,item.Linkit will provide you with the correct address.
  4. {{ item.Title }}Display text of the navigation item.
  5. {% if item.IsCurrent %}Used to determine if the current navigation item is a link to the current page, for easy highlighting.
  6. {% if item.NavList %}Check if the current navigation item has a sub-navigation. If so, it will pass through again.forLoop through and render the sub-navigation list, treating it similarly to the main navigation item.

It is worth mentioning that if you need to display more than just links and titles in navigation, and also want to get more details about a category or a single page (such as its introduction, thumbnail, etc.), AnQiCMS also provides powerful extension capabilities. When you select "Category Page Link" or "Single Page Link" in the background, the navigation item'sitemA variable will also include oneitem.PageIdthis attribute.PageIdStored the ID of the linked category or single page. You can combinecategoryDetailorpageDetailLabel, based onitem.PageIdTo get this additional information, create richer and more dynamic navigation content. However, for the core need of simply using a 'call link', it is direct to useitem.Linkit is enough.

Summary

AnQiCMS with 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 backend, and the frontend template passes throughnavListTags and their attributes can smoothly display 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.

Frequently Asked Questions (FAQ)

Q1: Can I make a navigation item in the navigation list not just link to a category page, but also display the latest few article titles under that category? A1: Can be. You can use it in the submenu of the navigation item or in a specific area.item.PageId(If the navigation item links to a category) asarchiveListlabel'scategoryIdParameters to call the latest articles under this category. Then, you can use 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