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

As an experienced website operations expert, I am well aware of the importance of a flexible and efficient content management system for the success of a website.AnQiCMS (AnQiCMS) boasts a high-performance architecture based on the Go language, modular design, and SEO-friendly features, and has become the preferred choice for many small and medium-sized enterprises and content operation teams.Its strong 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 structures and improve user experience and search engine optimization.

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

Why do we need custom navigation categories?

In your website operation practice, the main navigation bar usually carries the most core and frequently visited pages of the website.However, as the website content becomes richer, you may need to display some auxiliary information in the footer, such as "About Us", "Contact Information", "Privacy Policy", and so on;Or place specific topic navigation in the sidebar, such as "Popular Articles", "Product Categories", etc.These requirements, if all crammed into the main navigation, would appear bulky and分散 users' attention.By creating a separate navigation category, you can:

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

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

First step: Enter the navigation settings page

First, please log in to the AnQiCMS backend management interface. In the intuitive and easy-to-use left menu, find and click“Background Settings”Options. Expand and you will see a series of submenus related to the global configuration of the website, including the purpose of this line.“Navigation Settings”. Click to enter, you will clearly see the existing navigation structure of the website, usually there will be a 'default navigation' category.

Step 2: Create a new navigation category

On the 'Navigation Settings' page, you will find a section named'Navigation Category Management'. This is where we define new navigation types. Click'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 a website, you can name it "footer navigation";If you plan to display related links in the sidebar of the article detail page, 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 navigation into the front-end template later, you will accurately call it through this category.

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

Step 3: Add navigation links for new category

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

At this time, you will enter the “Navigation Link Settings” page, where you can find a variety of options to define your navigation links:

  • 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 secondary menu (for example, a submenu under the main navigation), you can select an existing primary 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 according to your actual needs.
  • Subtitle name and navigation description:These are optional fields, if you need to display dual titles (such as Chinese and English) for navigation links or attach 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 homepage of a specific model (such as an article, product).
    • Category page links:You can easily classify the documents you have created (such as "Company News", "Product Display") or single pages (such as "About Us", "Terms of Service") as navigation links.Just select from the drop-down menu.
    • External links:Greatly increased flexibility, you can enter any custom URL address, whether it is within (such as a specific event page) or outside (such as your social media homepage), and can be added in this way.
  • Display order:By setting the number, you can control the display order of navigation links, the smaller the number, the earlier it is displayed.

You can add multiple links based on the specific needs of the footer navigation or sidebar navigation.For example, add 'About Us' (select a single page link), 'Company News' (select an article category link), and 'GitHub Project' (select an external link) to the footer navigation.

Step 4: Integrate custom navigation into the website template

The navigation category creation and link configuration have been completed in the background, and these navigation data are ready.However, they will not be displayed automatically on the website front end. You need to modify the website template file and use the template tags provided by AnQiCMS to call these navigation data.

AnQiCMS template uses a syntax similar to the Django template engine tags, the tag used to call the navigation list isnavList. This tag allows you to pass throughtypeIdSpecify the parameter to call which navigation category data.

For example, if you create the "footer navigation" in step two and the system assigns it a category ID of 2 (or you can check its ID in the "navigation category management" backend), then in your website template (such astemplate/default/partial/footer.htmlOr you can use your custom footer template file in this way:

{% 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 code above,footerNavsIs a custom variable name used to store navigation list data,typeId="2"Then accurately tell AnQiCMS, we want to call the navigation category with ID 2 (that is, our "footer navigation"). Then, through a simpleforWe can traverse and display all the navigation links under the category by looping.

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