As a senior website operations expert, I am well aware of the importance of a clear and efficient website navigation system in enhancing user experience, guiding content consumption, and optimizing search engine rankings (SEO).In a well-designed content management system like AnQiCMS, building flexible and variable navigation menus and making them intelligently display dynamic content is the key to operators achieving fine-grained content layout.navListThe secrets of tags, see how it helps us achieve this goal.
navListTags: The cornerstone of website navigation.
In the Anqi CMS,navListLabels are the core tools for building website navigation menus.It is not just pulling static links, but cleverly combines the navigation structure configured in the background with the front-end template rendering, allowing us to create from simple single-level menus to complex two-level (even more levels) dropdown menus, and seamlessly connect with the website's categories or document content, realizing the true meaning of dynamic navigation.
Imagine, your website is like a large shopping mall, and the navigation menu is the mall's signposts.A clear, intelligent sign can help customers quickly find the products they like, while a disorganized sign will only make people lose their way.navList标签正是English CMS为我们提供的，绘制这样一张智能指示牌的强大画笔。
后台先行：导航菜单的搭建基础
When usingnavListBefore the label, we first need to configure the navigation menu in the background of the Anqi CMS. This is the foundation for the front-end label to work normally.
Navigation Category Management：English CMS allows us to create multiple navigation categories, such as 'Main Navigation', 'Footer Navigation', or 'Sidebar Navigation', etc.This means we can define independent navigation structures for different areas of the website.
typeIdThis ID will be called in the front-endnavListUsed for labeling.Navigation Link Settings: Under the selected navigation category, we can add specific navigation links. This is
navListThe embodiment of label flexibility:- Display Name: The text displayed for navigation items on the front end.
- Subheading/Description: Add additional information for navigation items to enrich the display effect.
- Link Type: This is crucial! We can choose:
- Built-in link: Such as the home page, the home page of specific models (articles, products).
- Category page link：Directly associated with the existing content categories or single pages on the website. When this type is selected, the navigation item will receive a
PageId, this ID will become the key for our subsequent dynamic content calls. - External Link：Points to any custom URL within or outside the site.
- Parent Navigation：By selecting the parent navigation, we can easily build a two-level navigation menu.For example, you can set "Product Center
In the templatenavListThe use of tags: from structure to content
Once the background navigation configuration is complete, we can use it in the front-end template (usually).html文件（）中运用navList标签来渲染这些菜单。安企CMS的模板语法类似Django，非常直观。
navListThe basic syntax of label is: {% navList navs %}...{% endnavList %}.navsis a variable name, you can customize it, it will carry the navigation data obtained from the background, and the data will be provided in the form of an array object, which means we need to go throughforLoop through these navigation items.
<nav class="main-navigation">
<ul>
{% navList navs %}
{%- for item in navs %} {# 遍历一级导航项 #}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{%- if item.NavList %} {# 判断是否存在二级导航 #}
<ul class="sub-menu">
{%- for inner in item.NavList %} {# 遍历二级导航项 #}
<li class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{ inner.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
This code demonstrates a classic two-level navigation structure. Throughitem.NavList, we can determine whether the current level one navigation item contains a sub-menu and use nestedforLoop to render the secondary menu.item.IsCurrentThen it can help us add the current navigation item toactiveclass, to achieve highlighting and enhance the user experience.
Dynamic display: the advanced charm of the navigation menu
navListThe essence is far more than building static secondary menus. Its true strength lies in the ability to combine with backend navigation items.PageIdEnglish translation: Dynamically call and display category or document lists. This is particularly useful for websites with rich content and the need to deeply guide user browsing.
We have a primary navigation for "Product Category" which has secondary navigations such as "PhoneNow, we hope that when the mouse hovers over the second-level navigation "Phone
We can modify the template code like this:
<nav class="main-navigation">
<ul>
{% navList navs with typeId=1 %} {# 假设主导航的typeId为1 #}
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{%- if item.NavList %}
<ul class="sub-menu">
{%- for inner in item.NavList %}
<li class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{ inner.Title }}</a>
{%- if inner.PageId > 0 %} {# 判断二级导航是否关联了分类或单页 #}
<div class="dynamic-content">
{# 动态显示该分类下的文档列表，例如热门产品 #}
{% archiveList products with type="list" categoryId=inner.PageId limit="5" order="views desc" %}
{% if products %}
<h3>{{ inner.Title }}热门产品</h3>
<ul>
{% for product in products %}
<li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{# 或者，动态显示该分类的下级分类（如果存在） #}
{% categoryList subCategories with parentId=inner.PageId %}
{% if subCategories %}
<h3>{{ inner.Title }}子分类</h3>
<ul>
{% for subCat in subCategories %}
<li><a href="{{ subCat.Link }}">{{ subCat.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endcategoryList %}
</div>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In this code, we took advantage ofinner.PageIdTo determine whether the current second-level navigation item is associated with a category or a single page. IfPageIdgreater than 0, we can usearchiveListthe label, passed incategoryId=inner.PageIdDynamically pull the latest articles or popular products under this category. Similarly, it can also be usedcategoryListThis label is used to display the sub-categories of the category. This flexible combination allows your navigation menu to be more than just a collection of links, but also an entry point for content aggregation.
Running Tips and Practical Suggestions
- Plan firstBefore configuring navigation on the backend, be sure to plan the overall structure of the website and the user's browsing path. Clear logic is the foundation of a good user experience.
- Moderate HierarchyAlthough it is possible to build multi-level navigation, it is recommended that the main navigation menu be kept between two to three levels, as deeper levels will increase the user's cognitive burden.
- SEO-friendlyEnsure all navigation links are crawlable and set navigation text reasonably to include target keywords. Dynamically loaded content should also be ensured to be crawlable by search engines.
- Responsive Design：Don't forget to optimize your navigation menu for mobile devices. On small screens, complex dropdown menus may require