In website operation, a clear and effective navigation system is the key to improving user experience and website professionalism.AnQiCMS (AnQiCMS) with its flexible content management and powerful template engine, can help us easily implement complex navigation requirements.Today, let's discuss how to display not only the main categories in the website's navigation bar, but also present the latest products under each category in the form of a dropdown menu when the mouse hovers over.
One, Understanding the Navigation and Content Management Basics of AnQiCMS
One of the core advantages of AnQi CMS lies in its modular content management system.It allows us to define different 'content models' for different types of content (such as 'articles' and 'products') and to manage these contents with fine-grained classification.The navigation bar of the website serves as the first window of interaction between users and the site, and its design directly affects whether users can quickly find the information they need.A well-designed navigation can effectively guide users while also helping search engines better understand the website structure, thereby improving SEO performance.
To display the main categories and their latest products in the navigation bar, we need to combine the 'Navigation Settings' feature of Anqi CMS backend with the tag calling capability of the frontend template.
Second, configure the main category navigation item.
Firstly, we need to configure the navigation structure in the Anqi CMS backend management system.
- Enter the navigation settingsLog in to the AnQi CMS backend, go to the 'Backend Settings' menu, and select the 'Navigation Settings' item.
- Select or create a navigation category.The system usually has a default navigation category, such as 'Top Navigation'.If you have special requirements, you can also add a navigation category by 'Navigation Category Management'.We will take the default 'Top Navigation' as an example for the operation.
- Add a main category navigation link.Click the 'Add Link' button in 'Navigation Link Settings' to start configuring your main category navigation items.
- Display NameFill in the main category name you want to display in the navigation bar, for example “Electronics”.
- Parent NavigationSelect “Top-level Navigation” to ensure it is displayed as a top-level menu.
- Link TypeThis is a critical step, please select "Category Page Link".
- Select CategoryIn the category selector that pops up, make sure to select the main category where you want to display the latest products.For example, if all your products belong to a large category under 'Product Model' (such as 'Phone', 'Computer', etc.), please select this large category.The system will recognize the ID of this category, which is very important for subsequent frontend template development.
- Save SettingsAfter completing the configuration, click 'OK' to save the navigation link. At this point, the new added main category link should be displayed in your website's navigation bar.
Three, implement the latest product display in the dropdown menu
Completed the background configuration. Next, we need to modify the frontend template files, making use of the powerful template tag features of Anqi CMS to dynamically retrieve and display the latest products.
The template files of Anqi CMS are usually located in your website root directory./template/你的模板名/The navigation bar code is usually in the folder.partial/header.htmlor directly in theindex.htmletc. main template files.includeCome in. You need to find the code block responsible for rendering the main navigation.
The following is a sample code snippet that demonstrates how to display the latest products in a dropdown menu by using nested loops and tag calls below the navigation items:
{# 假设你的主导航类别ID是1，请根据实际情况调整 #}
{% navList navItems with typeId=1 %}
<ul>
{%- for mainNavItem in navItems %}
<li {% if mainNavItem.IsCurrent %}class="active"{% endif %}>
<a href="{{ mainNavItem.Link }}">{{mainNavItem.Title}}</a>
{# 判断当前主导航项是否拥有子导航，即是否需要显示下拉菜单 #}
{%- if mainNavItem.NavList %}
<ul class="sub-menu"> {# 这个ul是下拉菜单的容器，请根据你的CSS调整类名 #}
{# 遍历子导航项，这些子导航项通常也是分类 #}
{%- for subNavItem in mainNavItem.NavList %}
<li>
<a href="{{ subNavItem.Link }}">{{subNavItem.Title}}</a>
{# 关键步骤：获取并展示该子分类下的最新产品 #}
{# subNavItem.PageId 存储了子导航所关联的分类ID #}
{% if subNavItem.PageId > 0 %}
<ul class="product-list-dropdown"> {# 最新产品列表的下拉容器 #}
{# 使用 archiveList 标签获取最新产品 #}
{% archiveList latestProducts with type="list" categoryId=subNavItem.PageId moduleId=2 order="id desc" limit="5" %}
{% if latestProducts %}
{% for product in latestProducts %}
<li><a href="{{product.Link}}" title="{{product.Title}}">{{product.Title}}</a></li>
{% endfor %}
{% else %}
{# 当该分类下没有产品时，可以显示提示信息 #}
<li>暂无最新产品</li>
{% endif %}
{% endarchiveList %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
Code Explanation:
{% navList navItems with typeId=1 %}:- This tag is used to get all navigation links you have configured in the "Navigation Settings" on the backend.
navItemsIt is a custom variable name used to store these navigation data. typeId=1Assume that the category ID of your main navigation (such as top navigation) is 1.If your navigation category ID is different, please adjust according to the actual situation.You can view or edit the category ID in the "Navigation Settings" under "Navigation Category Management" in the background.
- This tag is used to get all navigation links you have configured in the "Navigation Settings" on the backend.
- **`mainNavItem.`