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

I will introduce in detail how to create and manage custom navigation categories in Anqi CMS, making your website navigation more accurate and efficient.

Customize your website navigation, starting from the backend settings.

In Anqi CMS, all navigation settings are concentrated in the "Website Navigation Settings" module in the background.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 center hub where you build and adjust the website navigation.

Create custom navigation categories, expand the navigation area

The AnQi CMS provides a default 'default navigation' category, usually used for the main menu of the website.However, in actual operation, we often need to set independent navigation structures for different areas of the website (such as the footer, sidebar, or specific marketing activity pages).To achieve this, you can add a custom navigation category in the "Navigation Category Management" section.

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 functional and layout requirements, greatly enhancing the adaptability and user experience of the website.

Configure navigation links, guide users to in-depth exploration

After creating 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 and behavior of each link.

Each navigation link has the following configurable options:

  • Parent navigation:The AnQi CMS supports two-level navigation links, which means you can create a main navigation item that includes submenus.By selecting an existing main navigation item as the 'parent navigation', you can set the current link as a secondary sub-link below it.If you select 'Top-level navigation', 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 on the front page navigation link. You can change the name flexibly as needed, even if the name of the content linked to is not completely consistent with it.
  • Subtitle name:For navigation items that need to display dual titles, for example, showing both Chinese and English titles at the same time, you can add subtitle content in this field, which is used for template calls to achieve this display effect.
  • Navigation Description:If your navigation item needs a brief introductory text, you can enter it here. This description can be called from the front-end template to display more context information to the user.
  • Link Type:The AnQi CMS provides three flexible link types to meet different jump requirements:
    • Built-in links:Contains the "home link" of the website, as well as the "article model home page", "product model home page", and other preset model page links.These links are automatically generated by the system for your quick reference to the core feature pages.
    • Category page links:Allow you to select from the existing article categories, product categories, or single pages on the website as navigation links. This makes the navigation directly point to the website's key content aggregation pages or independent pages.
    • External links:Provided with 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:By setting a number, you can determine the sorting order of navigation links. The smaller the number, the higher the position of the link 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

After configuring the navigation links in the background, the next step is to apply these navigations to the front page of the website.The Anqi CMS makes it very simple to call custom navigation categories in templates through its powerful template tag system.You need to use isnavList.

For example, if you want 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 usingnavListlabel and specifytypeIdParameter.typeIdIt corresponds to the ID of the "Footer Navigation" in the background navigation category management. If the ID of the "Footer Navigation" is 2 (the specific ID should be based on your actual background settings), the code may look like this:

{# 假设页脚导航的 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 according to their hierarchical relationship (first or second level).In this way, you can flexibly control the style and layout of different navigation areas to ensure consistency with the overall design style of the website.

Optimize custom navigation, enhance website value

Valid custom navigation is not only a part of the website's functionality, but also a key to enhancing user experience and search engine friendliness.By carefully planning the navigation structure, you can ensure that important content receives full exposure, allowing users to easily find the information they need, thereby increasing their time spent on the website and promoting conversion.At the same time, the clear navigation path also provides clear crawling guidance for search engine spiders, which helps to improve the inclusion rate and ranking of the website.The AnQi CMS custom navigation feature provides you with powerful tools to achieve these goals, allowing you to easily build a high-efficiency, user-friendly website.

Frequently Asked Questions

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

A1: This is usually because you have not integrated the new navigation category into the website template. 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)navListLabel, and throughtypeIdThe parameter specifies the ID of the navigation category that can 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 drag and drop?

A2: According to the current documentation of AnQi CMS, the display order of navigation links is determined by setting a numeric value, with lower numbers appearing earlier.The current version may not support intuitive drag-and-drop sorting functionality, 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 itself is only responsible for displaying the link itself and will not automatically display its subordinate content. If you want to expand and display the documents under this category below the navigation link, you need to in the template.navListLabel processing twice. For example, when traversing first or second level navigation items, you can usearchiveListNested calls the document list under this category to achieve a deeper level of content display. For the specific implementation, please refer to the documents in.navListandarchiveListTag usage example.