Comprehensive Guide to Flexible Website Navigation in AnQiCMS: From Footer to Custom Areas

In modern website operations, a clear and intuitive navigation system is the foundation of user experience and an indispensable part of search engine optimization (SEO).A well-designed navigation can not only guide visitors to quickly find the information they need, but also help search engines understand the website structure, improve crawling efficiency and ranking.As an experienced website operation expert, I am well aware of AnQiCMS's strong capabilities in this area.It not only provides basic navigation functions, but also allows you to easily manage navigation from the top main navigation to the footer auxiliary navigation, and even any custom location navigation needs.

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

Navigation, the soul and skeleton of the website

Imagine a website as a magnificent building. Content is the 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 the flood of information, and search engines will also find it difficult to understand the hierarchical relationship of the page.AnQiCMS knows this and therefore places the flexibility of navigation settings at the core of its features.It allows you to build traditional website top navigation according to business needs, and also customize navigation for the footer, sidebar, and even specific page areas, greatly enhancing the maintainability and user experience of the website.

Unlock the navigation configuration mysteries of AnQiCMS

Configure navigation in AnQiCMS, the process is intuitive and powerful. The core lies in the 'navigation category management' and 'navigation link setting' links.

1. Back-end core operation: Navigation category management

The navigation management of AnQiCMS is located in the "Navigation Settings" menu under the "Background Settings" in the background.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 do not stop here, for example, you may need a special "footer navigation" to place copyright information, privacy policy, contact information, and other auxiliary links;Or create a separate sidebar navigation for specific content modules (such as the 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.At this moment, a completely new navigation collection has been born, waiting for you to fill it with links.Each navigation category has a uniquetypeIdIn subsequent template calls, we will use thistypeIdSpecify precisely which navigation collection to display. This method of classification management ensures the independence of different navigation areas, avoids confusion, and facilitates future expansion and adjustment.

2. Unique craftsmanship: Configure navigation links

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

  • Built-in links:Used for the homepage, article model homepage, product model homepage, and other AnQiCMS preset pages.After selection, the system will automatically associate it with the corresponding link address, no manual entry is required.This is very convenient for quickly building the basic navigation structure.
  • Category page links:This is the most commonly used type of link, which can directly link navigation items to existing article categories, product categories, or single pages on your website (such as "About Us", "Contact Us", etc.).Just 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 the changes in category or page URL.
  • External links:When you need to link to other websites outside the site, or specific files within the site, or custom URLs, you can choose external links.You need to manually enter the complete URL address. This provides unlimited possibilities for navigation flexibility, whether it is for friendship links or driving traffic from cooperative websites.

When configuring each navigation link, you can also set its 'display name' (the text that users see on the page), 'sub-title 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 'Parent navigation', you can easily build a navigation structure with up to two levels, such as a dropdown menu under the main navigation.Additionally, 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 most operational 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 front end. AnQiCMS uses the Django template engine syntax, providing powerfulnavListTags make the template call extremely concise.

For example, you want to display the 'Footer Navigation' we just created in the website footer. First, you need to know about the category of 'Footer Navigation'.typeId. On the 'Navigation Settings' page, when you create a 'Footer Navigation', the system will automatically assign an ID to it, assuming it is2The default navigation is usually1)

In your template file (for exampledefault/bash.htmlin the footer area, or a dedicatedpartial/footer.htmlIn the file), 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 to gettypeIdWith2of the navigation category (i.e., "footer navigation") all links, and assign the result tofooterNavsVariable.
  • {% for item in footerNavs %}: Traverse each main navigation item in the navigation list.
  • {{ item.Link }}and{{ item.Title }}: Output the link address and display name of each navigation item respectively.
  • {% 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 isforrepeatedlyemptyBranch when specified.typeIdWhen the navigation list is empty, it will display the content within it for debugging.
  • {% if item.Nofollow %}rel="nofollow"{% endif %}This is a very practical SEO optimization point, if you check it in the background navigation settings.NofollowHere will be automatically addedrel="nofollow"Attribute, controls the weight transmission of links

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

Flexible application: more advanced gameplay

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

  • Dynamic content navigation:In navigation that needs to be dynamically generated based on user behavior or content attributes (such as "Hot Articles", "Latest Products"), you can usearchiveListorcategoryListtags to retrieve content data, and then throughforLoop it to render as navigation rather than dependentnavList.
  • Multi-site navigation management:AnQiCMS supports multi-site management, and each site can have an independent navigation configuration.navListLabels and content labels supportsiteIdParameters. This means that if you are running multiple sites, you can use the same template file by specifying differentsiteIdCall navigation data from different sites to achieve template reuse.
  • Combined with other tags:The navigation item can nest other tags, for example, in the submenu of a navigation item, in addition to displaying links, it can also be used toarchiveListTag displays the latest article title under this category. This is particularly useful when building large, information-intensive websites, as it enhances 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; through a variety of link types, you can accurately control the direction of each navigation item; and powerfulnavListTemplate tags, then these carefully configured navigation can be presented in any form you want to users. Master these skills, and you can create a smooth browsing experience for users.