As an experienced website operation expert, I am well aware of the importance of a powerful and flexible content management system (CMS) for website operation efficiency and user experience.AnQiCMS (English CMS) is a fantastic tool that, with its high efficiency and customizable features, helps us easily manage all aspects of website content.Today, let's delve into a common issue in website navigation design that is also of great operational value: how to display the subtitle or description information of navigation items in AnQiCMS navigation menu?

Navigation menu is the skeleton of a website, its design not only concerns the structure of the website, but also directly affects the understanding and access efficiency of users.Sometimes, a simple navigation title is not enough to convey the rich content or specific features behind the page.This is to add a subtitle or description to the navigation item, which can greatly enhance the user experience and clarity of navigation, just like adding a touch of color to a dragon.

Control AnQiCMS navigation: How to skillfully display subheadings and description information

In AnQiCMS, the display of sub-title and description information for navigation items is implemented, mainly divided into two steps:Firstly, configure the content in the AnQiCMS backend; secondly, call and render this information in the front-end template.The entire process is natural and smooth, even people without a strong technical background can easily get started.

Step 1: Back-end configuration, adding rich semantics to the navigation items.

As website operators, we first need to enter the AnQiCMS backend management interface, find the 'Website Navigation Settings' feature module.This is the core area where you manage all navigation menus of your website.

  1. Navigation category management:AnQiCMS supports the creation of various navigation categories, such as "main navigationThis means you can set independent subheadings and description information for navigation menus in different areas of the website.If you want to customize the display style of navigation for a specific location, you can first add a category (such as "Product Page Navigation") in the "Navigation Category Management" and then add links to it.

  2. Navigation Link Settings:Core operations are performed here. When you add or edit a navigation link, in addition to setting the "Display Name" (i.e., the main title) and "Link Type", AnQiCMS also provides you with two very useful fields:

    • SubTitle (SubTitle)：This field allows you to set a secondary title for navigation items.It is usually used to supplement the main title or to provide a brief English translation.例如，主标题是“关于我们”，子标题可以是“About Us”。
    • Description (Description)：This field provides more space to summarize the core content or highlight the features of the page pointed to by the navigation item. You can write a brief text, even including a small amount of HTML tags (such as<strong>/<em>），so that more detailed context can be provided when displayed on the front end. For example, under the 'News Center' navigation item, you can add a description such as 'Latest industry trends and company news releases'.

    No need for too complex operations, just enter the subtitle or description information you want to display in the corresponding input box, and save your settings.This information will be stored in the AnQiCMS database as attributes of navigation items, waiting to be called by the front-end template.

第二步：前端模板，将后台数据优雅呈现于网站

After the background configuration is completed, the next step is to modify the front-end template files to allow the website to read and display these subtitles and descriptions.AnQiCMS's template system is based on Django template engine syntax, which makes content calls intuitive and powerful.

  1. 定位template file:通常，网站的主导航菜单代码会位于全局性的模板文件，例如您当前主题目录下的bash.htmlFile, or a specific header navigation onepartial/header.htmlin the fragment files. You need to find the corresponding position responsible for rendering the navigation menu.

  2. UsenavListTag calls navigation data:AnQiCMS provided powerfulnavListtags to obtain the background configuration navigation data. With this tag, you can easily traverse all navigation items and their properties.

    basicnavListThe label usage is as follows:

    {% navList navs %}
    {# 在这里循环遍历每个导航项 #}
{% endnavList %}

    Among them,navsIs the variable name you define for the navigation list, and you can also customize it according to your preference (for examplemainNav).

  3. Get and display the subtitle and description:InnavListTagsforWithin the loop, each navigation item will be represented as aitemVariable (you can customize the loop variable name, such asnavItem）。ThisitemThe object includes all the properties you set in the background, includingTitle(Display Name),SubTitle(subheading) andDescription（Navigation description）。

    Here is an example of how to call and display this information in a template:

    <nav class="main-navigation">
    <ul>
        {% navList navItems %}
            {%- for item in navItems %}
            <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}" class="nav-link">
                    <span class="nav-title">{{ item.Title }}</span>
                    {% if item.SubTitle %} {# 检查是否存在子标题 #}
                        <span class="nav-subtitle">{{ item.SubTitle }}</span>
                    {% endif %}
                    {% if item.Description %} {# 检查是否存在导航描述 #}
                        <span class="nav-description">{{ item.Description|safe }}</span> {# 注意使用 |safe 过滤器 #}
                    {% endif %}
                </a>
                {# 如果有下级导航，可以继续嵌套 #}
                {%- if item.NavList %}
                    <dl class="sub-nav">
                        {%- for subItem in item.NavList %}
                            <dd class="{% if subItem.IsCurrent %}active{% endif %}">
                                <a href="{{ subItem.Link }}">
                                    <span class="sub-nav-title">{{ subItem.Title }}</span>
                                    {% if subItem.SubTitle %}
                                        <span class="sub-nav-subtitle">{{ subItem.SubTitle }}</span>
                                    {% endif %}
                                    {% if subItem.Description %}
                                        <span class="sub-nav-description">{{ subItem.Description|safe }}</span>
                                    {% endif %}
                                </a>
                            </dd>
                        {% endfor %}
                    </dl>
                {% endif %}
            </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

    Code interpretation and注意事项：

    • {% if item.SubTitle %}and{% if item.Description %}:This is a very important condition judgment.It ensures that the front-end will only render the corresponding HTML structure when you have filled in the subtitle or description for the navigation item in the background, thus avoiding unnecessary empty tags.
    • {{ item.Description|safe }}:If you use HTML tags (such as<strong>or<em>) in the "Navigation Description" field in the background,|safeFilter. Otherwise, these HTML tags will be displayed as plain text.Please note that, using|safeIt means that you trust the content input by the background is safe and will not cause XSS attacks.
    • CSS Styles:The above code only provides the HTML structure. You need to design for your website according to your own..nav-item/.nav-title/.nav-subtitle/.nav-descriptionAdd the corresponding CSS styles to control their display effects, fonts, colors, and layouts.

Operation strategy and practical suggestions

  1. Define the positioning of subheadings and descriptions:The subtitle should be concise and intuitive, serving as a supplement to the main title; the description can be a bit longer, providing a richer context. Avoid redundancy and ensure information increment.
  2. Content refinement and responsive considerations:Especially on mobile devices, overly long subtitles or descriptions may disrupt the layout. Be sure to test the display on different devices and hide or shorten as necessary using CSS.
  3. Improve SEO friendliness (indirect):Although the navigation description itself may not directly affect search engine rankings, it can enhance user experience, increase the time users spend on the website, and reduce the bounce rate. These indirect factors are beneficial for SEO.
  4. A/B Testing:If you are unsure which form of subtitle or description is more effective, consider conducting A/B testing, and optimize navigation design through data analysis.

Through these two steps, you can flexibly add subheadings and descriptions to navigation menu items in AnQiCMS, thereby constructing a clearer and more guiding website navigation, enhancing the overall user experience on your site.

Common Questions (FAQ)

  1. **Q: Why is there no change on the front-end website even though I have set the subtitle or description in the AnQiCMS backend?