Flexible Website Navigation Configuration in AnQiCMS: A Comprehensive Guide from Footer to Custom Areas

In modern website operations, a clear and intuitive navigation system is the cornerstone of user experience and an indispensable part of search engine optimization (SEO).A well-designed navigation not only guides visitors to find the information they need quickly, but also helps search engines understand the structure of the website, improve crawling efficiency, and enhance ranking.As a senior website operation expert, I am well aware of the strong capabilities of AnQiCMS in this regard.It not only provides basic navigation functions, but also allows you to easily handle navigation needs from top-level main navigation to footer auxiliary navigation, and even any custom location, through its flexible configuration options.

Next, we will delve into how to configure and invoke these key navigation elements in AnQiCMS, making your website structure both rigorous and personalized.

Navigation, the soul and framework of the website

Imagine a website as a grand building.Content is bricks and tiles, design is the shape, and navigation is the skeleton and guide of the building.Without efficient navigation, users will get lost in a flood of information, and search engines will also find it difficult to understand the hierarchical relationship of the pages.AnQiCMS knows this and therefore places the flexibility of navigation settings at the core of its features.It allows you to build traditional top navigation for websites based on business needs, and also tailor-made navigation for footers, sidebars, even specific page areas, greatly enhancing the maintainability and user experience of the website.

Unlock the mysteries of AnQiCMS navigation configuration

Configure navigation in AnQiCMS, the process is intuitive and powerful. The core lies in the two links: 'Navigation Category Management' and 'Navigation Link Settings'.

1. Core Backend Operation: Navigation Category Management

The navigation management of AnQiCMS is located under the "Background Settings" menu in the "Navigation Settings" section of the backend.You will see a default 'default navigation' category, which is usually used for the main navigation of a website.But the requirements of the website often go beyond this, for example, you may need a special "footer navigation" to place copyright information, privacy policy, contact information, and other auxiliary links; or create an independent sidebar navigation for specific content modules (such as product center).

To implement these custom navigations, you simply need to add a new navigation category through the "Navigation Category Management" feature.For example, click "Add Navigation Category", name it "Footer Navigation", and save.A completely new navigation set has been created, waiting for you to fill in the links.typeIdWe will use this in the subsequent template calls,typeIdPrecisely specify which navigation collection to display. This classification management method ensures the independence of different navigation areas, avoids confusion, and facilitates future expansion and adjustment.

2. Craftsmanship: Configure navigation links

After creating the navigation category, the next step is to add specific navigation links to these categories. AnQiCMS provides various link types to meet various complex link requirements:

  • Built-in Links:For the homepage of the website, the homepage of the article model, the homepage of the product model, and other pages preset by AnQiCMS.After selection, the system will automatically associate with the corresponding link address, no manual entry is required.This is very convenient for quickly setting up the basic navigation structure.
  • Category page link:This is the most commonly used type of link, which can directly link navigation items to existing categories, product categories, or single pages on your website (such as 'About Us', 'Contact Us', etc.).Select the target category or page from the dropdown list, and the system will automatically generate the corresponding link.This method ensures the accuracy of the link and can automatically update with changes to the category or page URL.
  • External links:When you need to link to external websites or specific files within the site, or custom URLs, you can choose external links.You need to manually input the complete URL address.This provides unlimited possibilities for navigation flexibility, whether it is for linking to friendly websites or driving traffic from cooperative websites, it can be easily achieved.

When configuring each navigation link, you can also set its 'Display Name' (i.e., the text the user sees on the page), 'Subtitle Name' (some templates may support dual title display, such as Chinese and English), 'Navigation Description' (providing more detailed prompt information), and most importantly, the 'Parent Navigation'.By setting the 'Parent Navigation', you can easily build a navigation structure of up to two levels, such as a dropdown menu under the main navigation.In addition, the "Display Order" field allows you to control the arrangement order of navigation items by number, with smaller numbers appearing earlier.

Although the AnQiCMS backend currently does not support drag-and-drop sorting, numerical sorting is enough to meet the vast majority of operation scenarios. With a little planning, an ideal navigation layout can be achieved.

3. Display navigation on your website: Template call

After you carefully configure the navigation in the background, the next step is to present it on the website frontend. AnQiCMS uses the Django template engine syntax, providing powerfulnavListTags make template calls exceptionally concise.

For example, you would like to display the "Footer NavigationtypeIdIn the "Navigation Settings" page, when you create a "Footer Navigation", the system will automatically assign an ID to it, assuming this ID is2(The default navigation is usually)1).

In your template file (for exampledefault/bash.htmlin the footer area, or a dedicatedpartial/footer.htmlfile), you can call it like this:

<nav class="footer-nav">
    {% navList footerNavs with typeId=2 %}
    <ul>
        {% for item in footerNavs %}
            <li class="footer-nav-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}" {% if item.Nofollow %}rel="nofollow"{% endif %}>
                    {{ item.Title }}
                    {% if item.SubTitle %}<span>{{ item.SubTitle }}</span>{% endif %}
                </a>
                {% if item.NavList %} {# 检查是否有二级导航 #}
                    <ul class="footer-sub-nav">
                        {% for subItem in item.NavList %}
                            <li class="footer-sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
                                <a href="{{ subItem.Link }}" {% if subItem.Nofollow %}rel="nofollow"{% endif %}>{{ subItem.Title }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% else %} {# 如果没有配置任何导航项，显示提示 #}
            <li>目前没有可用的页脚导航项。</li>
        {% endfor %}
    </ul>
    {% endnavList %}
</nav>

In this code:

  • {% navList footerNavs with typeId=2 %}: Declare the variable to be retrievedtypeIdresponse for2All links in the navigation category (i.e., "Footer Navigation"), and assign the result tofooterNavsa variable.
  • {% for item in footerNavs %}: Traverse each main navigation item in the navigation list.
  • {{ item.Link }}and{{ item.Title }}The navigation item's link address and display name are output separately.
  • {% if item.NavList %}Check if the current navigation item has a secondary sub-navigation. If it does, use it again.forLoop through and display.
  • {% else %}：This isforLoopingemptyBranch, when specifiedtypeIdThe navigation list is empty, it will display its content for debugging convenience.
  • {% if item.Nofollow %}rel="nofollow"{% endif %}This is a very practical SEO optimization point, if you have checked it in the background navigation settings,NofollowHere will be automatically added,rel="nofollow"Property, controls the weight of link transmission.

By adjustingtypeIdParameters, you can easily introduce any configured navigation category (such as sidebar navigation) into any template location of the website.This template tag is decoupled from the backend configuration, allowing frontend developers to design templates independently of content editors, greatly improving collaboration efficiency.

Flexible Application: More advanced gameplay

The navigation tags of AnQiCMS are not limited to simple list display. Combined with its powerful template engine, you can achieve more complex navigation styles and interactions:

  • Dynamic content navigation:In some navigation that needs to be dynamically generated based on user behavior or content attributes (such as "Hot ArticlesarchiveListorcategoryListtags to get content data, and then throughforLoop it to render as navigation instead of relying on itnavListLabel.
  • Multi-site navigation management:AnQiCMS supports multi-site management, and each site can have independent navigation configuration.navListTags and other content tags are supported just like labels.siteIdThis means that if you are operating multiple sites, you can specify different ones in the same template file.siteIdCall navigation data from different sites to achieve template reuse.
  • Combine with other tags:The navigation item can nest other tags, for example, in the submenu of a certain navigation item, in addition to displaying links, it can also be used toarchiveListThis tag displays the latest article title under the category. It is especially useful when building large, information-intensive websites, as it can enhance the efficiency of users discovering content.

In summary, AnQiCMS balances simplicity and flexibility in navigation configuration. Through navigation category management, you can create exclusive navigation for different areas of the website; with a variety of link types, you can accurately control the direction of each navigation item; and with powerfulnavListTemplate tags allow these carefully configured navigation to appear in any form you want to the user. Master these skills, and you can create a smooth browsing experience for users.