Unlock new dimensions of website layout: Easily create custom navigation categories in the Anqi CMS backend

As an experienced website operations expert, I know the importance of a flexible and efficient content management system for the success of a website.AnQiCMS (AnQiCMS) is the preferred choice for many small and medium-sized enterprises and content operation teams with its high-performance architecture based on the Go language, modular design, and SEO-friendly features.Its powerful performance in content management is not only reflected in the publication and management of core content such as articles and products, but also in its highly customizable navigation system, which can help us flexibly build website structure and enhance user experience and search engine friendliness.

Today, let's delve into how to create new navigation categories in the AnQiCMS backend, such as common footer navigation or sidebar navigation, to make your website layout more personalized and practical.

Why do you need to customize the navigation categories?

On your website operation practice, the main navigation bar usually carries the most core, most frequently visited pages.However, as the content of the website becomes richer, you may need to display some auxiliary information in the footer, such as 'About Us', 'Contact Information', 'Privacy Policy', etc.; or place specific topic navigation in the sidebar, such as 'Featured Articles', 'Product Categories', etc.These requirements, if all crammed into the main navigation, would appear bulky and分散用户注意力.

  • Optimize the information architecture:Group links of different functions or themes to make the website structure clearer.
  • Enhance user experience:Help users find the information they need faster, improve website usability.
  • Improve page layout:Keep the main navigation simple while effectively utilizing page space with the footer and sidebar.
  • Enhance SEO effect:A reasonable internal link structure is beneficial for search engines to crawl and understand the website content.

Next, we will guide you step by step on how to achieve this goal in the AnQiCMS backend.

Step 1: Enter the navigation settings page

First, please log in to the backend management interface of AnQiCMS. In the intuitive and easy-to-use left menu bar, find and click“Backend Settings”Options. After expansion, you will see a series of sub-menus related to the global configuration of the website, including the sub-menu of our current goal.Navigation Settings。Click to enter, you will clearly see the existing navigation structure of the website, usually with a 'Default Navigation' category.

Step 2: Create a new navigation category

In the "Navigation Settings" page, you will find a section named"Navigation Category Management". This is where we define new navigation types. Click on"Add New Navigation Category"Button, the system will pop up a window asking you to name the new navigation category.

For example, if you want to create a navigation for the bottom of the website, you can name it 'Footer Navigation'; if you plan to display related links in the sidebar of the article detail page, then you can name it 'Sidebar Navigation'.This name is not only convenient for you to distinguish and manage in the background, but more importantly, when integrating the navigation into the front-end template later, you will be able to accurately call it through this category.

After entering the category name, click confirm, a new, empty navigation category will be created. Now, this new category will appear in the navigation category list.

Third step: Add navigation link for new category

Create the navigation category first, and then fill in the specific navigation links. Find the category you just created (for example, "Footer Navigation") in the "Navigation Category Management" list, and click on the corresponding“Add Navigation Link”button.

At this moment, you will enter the “Navigation Link Settings” page, where a variety of options are provided to define your navigation link:

  • Parent Navigation:AnQiCMS supports navigation links up to two levels.If you are creating a simple top-level navigation (such as footer navigation usually is), please select 'Top-level navigation'.If you need to create a second-level menu (for example, a submenu under the main navigation), you can select an existing first-level navigation as its parent.
  • Display Name:This is the link text that users will see on the front page, such as 'About Us', 'Contact Us'. You can fill in flexibly according to your actual needs.
  • Subtitle name and navigation description:These are optional fields. If you need to display double titles (such as Chinese and English) for navigation links or a brief description, you can fill it here.
  • Link type:This is the core of navigation settings, AnQiCMS provides three flexible link types:
    • Built-in Links:A system-level page for a website, such as a "home link" or the home page of a specific model (such as articles, products).
    • Category page link:Allow you to easily classify created documents (such as "Company NewsJust select from the dropdown menu.
    • External links:Greatly increases flexibility, you can enter any custom URL address, whether it is internal (such as a specific event page) or external (such as your social media homepage), and it can be added in this way.
  • Display Order:Through setting the number to control the display order of navigation links, the smaller the number, the earlier it is displayed.

You can add multiple links as needed by navigating through the footer or sidebar.For "page footer navigation

Step four: integrate the custom navigation into the website template

Navigation categories and link configurations have been completed in the background, and these navigation data are now ready.However, they will not automatically display on the website front end.You need to modify the website template files and use the template tags provided by AnQiCMS to call these navigation data.

AnQiCMS's template uses tag syntax similar to Django template engine, the tag for calling the navigation list isnavList. This tag allows you to throughtypeIdParameter to specify which navigation category data to call.

For example, if you create a "Footer Navigation" in step two and the system assigns it a category ID of 2 (or you can view its ID in the "Navigation Category Management" section on the backend), then in your website template (such astemplate/default/partial/footer.htmlIn the ，or you can customize the footer template file) you can use the following method to call:

{% navList footerNavs with typeId="2" %}
    <ul class="footer-nav">
        {%- for item in footerNavs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}}</a>
                {# 如果有二级导航，可以在这里嵌套循环item.NavList #}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

In the above code,footerNavsis the custom variable name used to store the navigation list data,typeId="2"Then accurately tell AnQiCMS that we want to call the navigation category with ID 2 (i.e., our "footer navigation"). Then, through a simpleforLoop, we can traverse and display all the navigation links under the category.

If you create a sidebar navigation, you can place similar code in your sidebar template file (for exampletemplate/default/partial/sidebar.html), and make sure to use the correcttypeIdCall your "Sidebar Navigation" category.

Summary

By following the above steps, you have mastered the method of creating and managing custom navigation categories in the AnQiCMS backend. Whether