How to customize Anqi CMS navigation categories, and achieve footer or sidebar navigation?

As an operator who deeply understands the operation of AnQiCMS, I know the importance of a flexible and user-friendly navigation system for improving the discoverability and user experience of the website.The AnQi CMS provides powerful and intuitive navigation customization features, making it easy to deploy special navigation in the footer, sidebar, or any other area.

The following will elaborate on how to customize navigation categories in AnQi CMS to achieve footer or sidebar navigation.

Understanding the navigation system of AnQi CMS

In Anqi CMS, the core of navigation lies in the concepts of 'navigation category' and 'navigation link'.The system will provide you with a "default navigation" category, which is usually used for the main menu of a website.However, to meet the specific navigation needs of different areas (such as website footers, sidebars, or a specific topic page), AnQi CMS allows you to create an unlimited number of custom navigation categories.Under each category, you can freely add, manage, and sort a series of navigation links to build a clear and guiding website structure.This design greatly improves the organization and display flexibility of the website content.

Create custom navigation categories

To implement footer or sidebar navigation, you first need to create a separate navigation category for these areas.

You need to log in to the Anqi CMS admin interface, then find and click on the "Admin Settings" in the left menu, and then select the "Navigation Settings" option.On the navigation settings page, you will see a 'Navigation Category Management' area.Here, the system will list existing navigation categories. To add, please click the 'Add Navigation Category' button.

At this time, the system will pop up a form, asking you to fill in the name of the new navigation category.For example, if you plan to create a footer navigation, you can name it 'Footer Navigation';If it is a sidebar navigation, it should be named 'sidebar navigation'.Clear naming helps you manage and identify in the future. After submitting the form, a new navigation category is created successfully and a unique internal ID is assigned.This ID will be used when custom navigation is integrated into the website template later.

Configure navigation links

After creating a custom navigation category, the next step is to add specific navigation links to it.

On the "Navigation Settings" page, select the custom navigation category you just created (for example, "Footer Navigation"), and then click the "Add Navigation Link" button. This will open a form to configure the navigation link, where you can fill in the following fields as needed:

• Parent navigation: This field is used to build multi-level navigation. If you want the current link to be a top-level navigation item, please select "Top-level navigation";If you want to create a secondary navigation, select the corresponding primary navigation item as the parent.The AnQi CMS currently supports up to two levels of dropdown navigation.
• display nameThis is the text displayed for the navigation link on the front page.You can set it flexibly as needed, it does not have to be consistent with the link content.For example, a navigation item linking to the "Contact Us" page, the display name can be set to "Contact Us."}
• Subheading name: If your design requires navigation items to display dual titles, such as Chinese main titles and English subheadings, you can enter the subheading content in this field.
• Navigation descriptionThis field allows you to provide a brief description for navigation items, which can be called to display on the front-end template, providing more context information to users.
• Link Type: SecureCMS offers three flexible link types to meet the needs of different content:
  • Built-in link: Includes a 'home link' and the home pages of custom models on your website (such as 'article model home page', 'product model home page'). This applies to links pointing to the core functions of the website.
  • Category page link: Allow you to select an existing document category or single page as a navigation link. This makes it very convenient to integrate a specific content collection or independent page into the navigation.
  • External link: Provide the greatest flexibility, you can enter any internal or external URL.Whether it is a link to a specific article within the site or a link to an external partner website, it can be added in this way.
• Display order: By setting the number to control the arrangement of navigation links. The smaller the number, the closer the link is displayed in the list. Currently, sorting is achieved by numerical value, and drag-and-drop is not supported.

After completing all field entries and saving, your navigation link has been successfully added to the custom category. You can repeat this process to add all the required navigation items.

Integrate custom navigation in the template

After configuring the navigation categories and links in the background, the next critical step is to display these navigation data on the website's frontend page. This is mainly achieved through the template tags of Anqi CMSnavListto achieve.

Firstly, you need to determine which template file your navigation will be deployed in. For footer navigation, it is usually integrated intobash.htmlThe footer part of the template storing common page header, footer elements. For sidebar navigation, it may be placed inpartial/a code snippet file under the directory, such aspartial/sidebar.html), and then throughincludeLabel it to include it in the page template that needs to display the sidebar.

In the template file, you can usenavListthe tag to call your custom navigation category.navListthe tag needs atypeIdThe parameter is used to specify the navigation category to be called. ThistypeIdIt is the internal ID assigned by the system when you create a custom navigation category. You can view it by the URL in the browser address bar when editing navigation categories in the backgroundidParameters, or obtained through other backend entries.

The following is an example of calling custom navigation and performing a loop output.

{# 假设您的页脚导航类别ID为 2 #}
{% navList footerNavs with typeId=2 %}
{% if footerNavs %}
<div class="footer-navigation">
    <ul>
        {%- for item in footerNavs %}
        <li class="footer-nav-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}" {% if item.Nofollow == 1 %} rel="nofollow" {% endif %} {% if item.Target == 1 %} target="_blank" {% endif %}>
                {{item.Title}}
                {%- if item.SubTitle %}<small>{{item.SubTitle}}</small>{% endif %}
            </a>
            {%- if item.NavList %} {# 如果有二级导航 #}
            <dl class="footer-sub-nav">
                {%- for inner in item.NavList %}
                <dd class="footer-sub-nav-item {% if inner.IsCurrent %}active{% endif %}">
                    <a href="{{ inner.Link }}" {% if inner.Nofollow == 1 %} rel="nofollow" {% endif %} {% if inner.Target == 1 %} target="_blank" {% endif %}>
                        {{inner.Title}}
                    </a>
                </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</div>
{% endif %}
{% endnavList %}

{# 假设您的侧边栏导航类别ID为 3 #}
{% navList sidebarNavs with typeId=3 %}
{% if sidebarNavs %}
<aside class="sidebar-block">
    <h3>侧边栏导航</h3>
    <ul class="sidebar-menu">
        {%- for item in sidebarNavs %}
        <li class="sidebar-menu-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">
                {{item.Title}}
                {%- if item.Description %}<span>{{item.Description}}</span>{% endif %}
            </a>
            {%- if item.NavList %} {# 侧边栏的二级导航 #}
            <ul class="sidebar-submenu">
                {%- for inner in item.NavList %}
                <li class="sidebar-submenu-item {% if inner.IsCurrent %}active{% endif %}">
                    <a href="{{ inner.Link }}">{{inner.Title}}</a>
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</aside>
{% endif %}
{% endnavList %}

Please note,item.Nofollowanditem.TargetIn the document.navListofitemBut not explicitly listed in the available fields.help-setting-nav.mdMentioned that the external link can flexibly add various web links, andtag-linkList.mdmentionedNofollowField, so these properties may exist in the actual navigation links, you can try using them. If they do not exist, please delete the relevant judgments to avoid template errors.

Through the above code, Anqi CMS will dynamically generate the corresponding navigation structure based on your backend configuration.You can design your own template to add CSS styles to beautify these navigation, making them consistent with the overall style of the website.

Optimize and maintain

Successful navigation not only lies in its functional implementation, but also in its positive impact on user experience and SEO.

• SEO considerations: Ensure your navigation link structure is clear, URL semantic, and avoid dead links.The pseudo-static feature of Anqi CMS (configured under 'Feature Management' and 'Pseudo-static Rules') helps generate more search engine-friendly URLs.For links pointing to external sites or links that should not pass weight, consider marking them when setting up background navigation links.nofollow.
• Responsive Design: With the growth of mobile device users, it is essential to ensure that your footer and sidebar navigation display and interact well on different screen sizes.This requires you to apply the appropriate responsive CSS in the template.
• Regular updates: The website content and strategy are not fixed, your navigation should also be adjusted accordingly.Regularly check the validity of navigation links and adjust the display order of navigation items, add or delete links based on website content updates, hot topics, or user behavior analysis to maintain relevance and guidance.

By following these detailed steps and considerations, you will be able to fully utilize the navigation customization capabilities of Anqi CMS to create a multi-area navigation that is both beautiful and practical for your website, thereby effectively enhancing user satisfaction and the website