How to display the subtitle or description information of a navigation item in the AnQiCMS navigation menu?

As an experienced website operations expert, I know that a powerful and flexible content management system (CMS) is crucial for website operation efficiency and user experience.AnQiCMS (AnQi CMS) is exactly such an outstanding tool, with its efficient and customizable features, it helps us easily handle all aspects of website content.Today, let's delve deeply into a common yet highly valuable operation issue in website navigation design: how to display the subtitle or description information of navigation items in the AnQiCMS navigation menu?

The navigation menu serves as the skeleton of a website, its design not only concerns the website structure but also directly affects the user's understanding and access efficiency to the content.Sometimes, a simple navigation title is not enough to convey the rich content or specific features behind the page.At this time, adding a subtitle or description to the navigation item can greatly enhance the user experience and clarity of navigation, just like adding a touch of paint to a dragon.

Navigate AnQiCMS: How to Skillfully Display Subtitles and Descriptions

To implement the display of subtitle and description information for navigation items in AnQiCMS, it is 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 smooth, even those without a deep technical background can easily get started.

Step 1: Backend configuration, add rich semantics to navigation items.

As a website operator, we first need to log in to the AnQiCMS backend management interface, find the "Website Navigation Settings" feature module.This is the core area where you manage all the navigation menus of your website.

1. Navigation category management:AnQiCMS supports creating various navigation categories, such as "main navigation", "footer navigation", "sidebar navigation", and so on.This means you can set independent subtitles and descriptions for the navigation menus in different areas of the website.If you want to customize the display of navigation for a specific location, you can first add a category in the 'Navigation Category Management' (for example, 'Product Page Navigation'), and then add links for it.

2. Navigation link settings:The core operation is performed here. When you add or edit a navigation link, in addition to setting the "Display Name" (i.e., the main title) and the "Link Type", AnQiCMS also provides two very practical fields:

   • Subtitle Name:This field allows you to set a secondary title for the navigation item.It is usually used to supplement the main title or provide a short English translation.For example, the main title is "About Us", and the subtitle can be "About Us".
   • Navigation Description:This field provides more space to summarize the core content or highlight the characteristics 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>)，in order to provide more detailed context 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".

   Do not perform too complex operations, just enter the subtitle or description you want to display in the corresponding input box, and save your settings.This information will be stored as the attribute of the navigation item in the AnQiCMS database, waiting for the call of the front-end template.

The second step: front-end template, elegantly present background data on the website

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

1. Locate the template file:Generally, the main navigation menu code of the website is located in a global template file, such as the current theme directory underbash.htmlFile, or specifically used for header navigationpartial/header.htmlIn the fragments of the file. You need to find the position responsible for rendering the navigation menu

2. UsenavListTag calls navigation data:AnQiCMS provides powerfulnavListLabel to get the background configuration navigation data. Through this label, you can easily traverse all navigation items and their properties.

   BasicnavListThe usage of the label is as follows:

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

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

3. Get and display the subtitle and description:InnavListlabel'sforIn 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 have set in the background, includingTitle(Display name),SubTitle(Subtitle) 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 render the corresponding HTML structure only 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 (for example<strong>or<em>), then when outputting on the front end, in order for the browser to correctly parse these HTML, you must use|safeFilter. Otherwise, these HTML tags will be displayed as plain text.Please note that|safeMeans you trust the content input from the background is safe and will not cause XSS attacks.
   • CSS style:The code only provides the HTML structure. You need to customize it according to your website design, for.nav-item/.nav-title/.nav-subtitle/.nav-descriptionAdd the corresponding CSS styles to the class to control their display effects, fonts, colors, and layout.

Operation strategies 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 slightly longer, providing a richer context. Avoid redundancy and ensure information increment.
2. Content refinement and responsive consideration:Especially on mobile, a long subtitle or description may破坏 the layout. Please be sure to test the display effect on different devices, and you may hide or shorten it with CSS if necessary.
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, reduce the bounce rate, and 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 to optimize navigation design through data analysis.

By following these two steps, you can flexibly add subheadings and descriptions to navigation menu items in AnQiCMS, thereby building a clearer, more guiding website navigation, and enhancing the overall experience of users on your website.

Frequently Asked Questions (FAQ)

1. **Q: Why did I set a subtitle or description in the AnQiCMS backend, but there was no change on the front-end website?