Excellently crafted: Dynamically display the latest article list under a specific category in the AnQiCMS navigation dropdown menu

As an experienced website operations expert, I am well aware of the importance of an efficient and user-friendly navigation system for a website.It is not only a guide for users to explore the content of the website, but also a key to improve user experience and optimize the efficiency of search engine crawling.In AnQiCMS (AnQiCMS), such a content management system based on Go language and known for its high performance and flexibility, we can easily implement various complex content display needs through its powerful template tag system.Today, let's delve into how to dynamically display the latest article list under a specific category in the navigation dropdown menu of AnQiCMS, making your website navigation more 'intelligent' and 'vital'.

The art of navigation: Why should the latest articles be displayed dynamically in the dropdown menu?

In today's era of content explosion, how to quickly and effectively present the latest and most relevant content to users is a challenge faced by every website operator.Traditional navigation menus usually only provide category links, and users need to click into the category page to find specific articles.

  1. Enhance user experience and content reach:Users do not need to click extra, they can quickly understand the latest dynamics of the category by hovering over the mouse, greatly shortening the path for users to obtain information.
  2. Optimize content discovery and conversion:Featured or important latest articles can be directly presented in a prominent position, increasing the chance of being clicked, which helps to enhance the reading volume of content and potential conversion.
  3. Enhance SEO effects:Content that is dynamically updated can pass signals to search engines that the website is highly active and the content is continuously updated, which helps to increase the crawling frequency and weight of category pages and article pages.This aligns with the core advantages of AnQiCMS such as 'Static and 301 Redirect Management', 'Advanced SEO Tools', etc., helping the website to achieve better visibility in search engines.

AnQiCMS provides a solid foundation for all this with its 'flexible content model' and 'modular design'.Next, we will reveal the implementation secrets step by step through the application of specific template tags.

The magic of AnQiCMS: the clever combination of template tags and logic

AnQiCMS's template system uses a syntax similar to Django's template engine, separating data from page rendering logic in a straightforward and easy-to-understand manner. The core is the use of double curly braces{{变量}}To output variables, as well as single curly braces and percent signs{% 标签 %}To define logical control and data calling.

To dynamically display the latest articles under specific categories in the navigation dropdown menu, we will mainly rely on the following key template tags:

  • navListTags:This is the foundation for building a website navigation list, which can obtain all the navigation items configured in the background, including multi-level menu structures. Through it, we can traverse the main navigation and its sub-navigations.
  • archiveListTags:As the name implies, it is a tool to obtain a list of articles (or other document models).We can accurately pull the latest articles we want by specifying the category ID, sorting method, and display quantity.
  • stampToDateFunction:When displaying the article publish time, AnQiCMS backend stores the timestamp, and we need to use this function to format it into a readable date format for the user.

Practice: Step by step to implement the dynamic article list of navigation dropdown menu

To implement this feature in AnQiCMS, it can be roughly divided into two main steps: backend configuration and frontend template modification.

Step 1: Fine planning of the backend navigation structure.

Firstly, we need to ensure that the navigation structure of the AnQiCMS backend is ready.

  1. Create or edit categories:Make sure the category of articles you want to display in the dropdown menu has been created.You can perform operations in 'Content Management' -> 'Document Category'.When creating or editing a category, its ID (or URL alias) is the key identifier for the front-end to call articles.
  2. Configure the navigation menu:Go to "Background Settings" -> "Website Navigation Settings".
    • Add a primary navigation item:For example, you have a primary navigation item named "News Center".
    • Add a secondary navigation item and associate a category:Add sub-navigation items below 'News Center', such as 'Company News', 'Industry Dynamics'.When configuring these sub-navigation items, make sure to select the "Category Page Link" type and then choose the corresponding article category from the list.navListThe label will traverse the sub-navigation and pass throughPageIdThe field will automatically associate with the ID of this category.

Through such backend configuration, the AnQiCMS system can identify your navigation structure and the specific categories associated with each sub-navigation.

Step 2: Modify the front-end template file and inject dynamic content

Next, we will write logic in the front-end template file to combine the navigation configured on the back-end with the dynamic article list.

The navigation menu code of a website is usually stored in a public template fragment, for example/template/您的模板目录/partial/header.htmlor/template/您的模板目录/bash.html. You need to find the corresponding location responsible for rendering the main navigation.

Here is a sample code that demonstrates how to dynamically insert the latest article list under the second-level navigation:

`twig {# Use navList tag to get the main navigation list configured in the background, assuming typeId=1 is the main navigation category #} {% navList navItems with typeId=1 %}

<ul class="main-nav"> {# 主导航容器 #}
    {%- for item in navItems %} {# 遍历每一个主导航项 #}
        <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}" class="nav-link">{{item.Title}}</a>

            {%- if item.NavList %} {# 如果当前主导航项有子导航（即是下拉菜单） #}
                <div class="nav-dropdown"> {# 下拉菜单容器，您需要根据实际CSS调整结构 #}
                    <ul class="sub-nav"> {# 二级导航容器 #}
                        {%- for sub_item in item.NavList %} {# 遍历每一个二级导航项 #}
                            <li class="sub-nav-item {% if sub_item.IsCurrent %}active{% endif %}">
                                <a href="{{ sub_item.Link }}" class="sub-nav-link">{{sub_item.Title}}</a>

                                {# 关键逻辑：判断子导航是否关联了分类，并获取其下的最新文章 #}
                                {% if sub_item.PageId > 0 %} {# PageId会关联到后台设置的分类ID #}
                                    <div class="latest-articles-dropdown"> {#