As a website operator proficient in the AnQi CMS content management system, I am well aware of the importance of the navigation system for website user experience and search engine optimization.An well-designed and easy-to-manage navigation can not only guide users to find the information they need quickly, but also help search engines understand the website structure, thereby improving the overall performance of the website.The Auto CMS provides powerful and flexible navigation settings, allowing us to create and manage various custom navigation, such as common footer navigation, to meet the diverse needs of content display and management.

The next step is to demonstrate how to create and manage custom navigation categories in the Safe CMS, making your website navigation more precise and efficient.

Customize your website navigation starting from the backend settings.

In the Auto CMS, all navigation settings are concentrated in the "Website Navigation Settings" module on the backend.To create or manage custom navigation, you need to log in to the backend management interface, then click on the 'Backend Settings' option in the left menu bar, and then select 'Navigation Settings' to enter the corresponding management page.This is the central hub where you build and adjust your website navigation.

Create custom navigation categories, expand navigation area

For example, if you want to create a footer navigation, just click the Add New Category button, enter "Footer Navigation" as the category name, and save.Thus, a brand new navigation area has been created, which will be independent of the main navigation, allowing you to configure a dedicated set of links for it.This flexibility ensures that the website content can be organized according to different functions and layout requirements, greatly improving the adaptability and user experience of the website.

Configure navigation links, guide users to explore in depth

Created a custom navigation category, the next step is to add specific navigation links to these categories.In the "Navigation Link Settings" area, you can add new links for selected navigation categories and finely control the display style and behavior of each link.

Each navigation link has the following configurable options:

  • Parent Navigation:The CMS supports two-level navigation links, which means you can create main navigation items that include submenus.Through selecting an existing main navigation item as 'Parent Navigation', you can set the current link as a secondary sublink below it.If "Top Navigation" is selected, it means that the link will be displayed as a first-level navigation at the top level.
  • Display Name:This is the actual text displayed for the navigation link on the front page. You can flexibly change its name as needed, even if the name of the content pointed to by the link is not exactly the same.
  • Subheading Name:For navigation items that need to display double titles, such as showing both Chinese and English titles at the same time, you can add subtitle content in this field for template calls to achieve this display effect.
  • Navigation description:If your navigation item requires a brief introductory text, you can enter it here. This description can be called to display in the front-end template, providing users with more context information.
  • Link type:The Auto CMS provides three flexible link types to meet different jump requirements:
    • Built-in Links:Contains the "home linkThese links are automatically generated by the system for your quick reference to the core feature pages.
    • Category page link:Allow you to select existing article categories, product categories, or single pages as navigation links. This makes navigation directly point to the aggregation pages or standalone pages of key content on the website.
    • External links:Provided the greatest flexibility, you can manually enter any internal or external URL address. This is very useful for linking to partner websites, external resources, or specific sub-paths of a website.
  • Display Order:Through setting a number to determine the sorting of navigation links. The smaller the number, the earlier the link is displayed in the navigation list.

By the above configuration, you can build a navigation structure that is clear, informative, and easy for users to understand.

Integrate custom navigation in the template

Configure the navigation links on the back end, and the next step is to apply these navigation links to the front page of the website.The CMS of AnQi provides a powerful template tag system, making it very simple to call custom navigation categories in templates.navListLabel.

For example, to display the "Footer Navigation" you just created in the footer area of the website, you can use it in the footer template file (usuallypartial/footer.htmlor the footer section of the main template file), by usingnavLista tag to specifytypeIdParameter.typeId即为后台导航类别管理中“页脚导航”所对应的ID。如果“页脚导航”的ID是2（具体ID请根据您的实际后台设置为准），代码可能如下所示：

{# 假设页脚导航的 typeId 为 2 #}
<nav class="footer-nav">
    <ul>
    {% navList footerNavs with typeId=2 %}
        {%- for item in footerNavs %}
            <li class="footer-nav-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}" title="{{ item.Description }}">{{item.Title}}</a>
                {%- if item.NavList %} {# 如果有二级导航 #}
                <ul class="footer-sub-nav">
                    {%- for inner in item.NavList %}
                        <li class="footer-sub-nav-item {% if inner.IsCurrent %}active{% endif %}">
                            <a href="{{ inner.Link }}" title="{{ inner.Description }}">{{inner.Title}}</a>
                        </li>
                    {% endfor %}
                </ul>
                {% endif %}
            </li>
        {% endfor %}
    {% endnavList %}
    </ul>
</nav>

This code will traverse all links under the "Footer Navigation" category and render the corresponding HTML structure based on their hierarchical relationship (first or second level).Through this method, you can flexibly control the styles and layouts of different navigation areas, ensuring consistency with the overall design style of the website.

Optimize custom navigation, enhance website value

Frequently Asked Questions

Q1: I created a new navigation category, but it doesn't show up on the front page. What's the matter?

A1：This is usually because you have not integrated the new navigation category into the website template file yet. Creating a navigation category only defines its structure in the background, and you still need to use it in the corresponding template file (such as the footer template)navListtags, and throughtypeIdThe parameter specifies the ID of the navigation category, which must be rendered on the front end. Please check if your template code has been added and specified correctly.typeId.

Q2：Can the display order of custom navigation links be adjusted by dragging?

A2: According to the current documents of the security CMS, the display order of navigation links is determined by setting a numeric value, with the smaller the number, the earlier it appears.Currently, the version may not support the intuitive drag-and-drop sorting feature. You need to manually edit the display order number of each link to adjust the position.Please pay attention to future version updates, which may add more convenient interaction methods.

Q3: I created a navigation link that points to a category page, but the documents under this category are not displayed in the front-end navigation. How can I make them visible?

A3: The navigation link is only responsible for displaying the link itself and will not automatically display its sub-content. If you want to expand and display the documents under this category below the navigation link, you need to set it in the template.navListThe label is processed twice. For example, when traversing the first-level or second-level navigation items, you can use links for pages of type category.archiveListLabel nesting calls the document list under this category to achieve a deeper level of content display. Specific implementation methods can be referred to in the documents.navListandarchiveListLabel usage examples.