How to display the list of articles or products under a specific category in AnQiCMS?

In AnQiCMS, displaying the list of articles or products under a specific category is a common requirement in website content management.Whether it is to build subpages under the navigation menu or to showcase selected content of different modules on the homepage, AnQiCMS provides a flexible and powerful way to achieve this goal.Understand the content organization logic and the use of template tags, and you can easily present the required content on the website.

Understanding the content model and categories of AnQiCMS

Firstly, the organization of AnQiCMS content is based on 'content model' and 'category'.Content ModelIt is like the 'skeleton' or 'type' of the content, for example, 'article model' is used to publish news, blogs, while 'product model' is used to display products.Different models can have custom fields to meet the storage needs of different types of content.In AnQiCMS backend, you can find the management entry for these models and set unique properties for them.CategoryIt is the specific organizational structure under the content model, which is usually tree-like and can have multiple levels.For example, under the "Article ModelEach category belongs to a specific content model.

When you need to display specific content on a website, it is usually through specifying the content's categoryModel ID (moduleId)andID (categoryId)to accurately obtain. Usually, the article model corresponds tomoduleId

Practice Operation: Call the list under a specific category in the template

In AnQiCMS template files,archiveListLabels are the core tools for retrieving articles or product lists. This label is very flexible and can filter, sort, and display content according to your needs.

To display articles or products under a specific category, you can do this:

{% archiveList archives with moduleId="1" categoryId="5" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <img src="{{item.Thumb}}" alt="{{item.Title}}">
            <h3>{{item.Title}}</h3>
            <p>{{item.Description}}</p>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </a>
    </li>
    {% empty %}
    <li>当前分类下暂无内容。</li>
    {% endfor %}
{% endarchiveList %}

In this code block:

  • {% archiveList archives with ... %}It is the start of the call list,archivesIt is a variable name set for the content list we have obtained.
  • moduleId="1"Specify that we are to retrieve the content under the article model (assuming the article model ID is 1). If you need to display products, you can change it to the corresponding product model ID, for examplemoduleId="2".
  • categoryId="5"It precisely specifies the content we want to obtain under the category with ID 5.You can replace it with the category ID you want to display.childThe parameter defaults totrueNo additional settings are required.
  • limit="10"The number of displayed articles or products is limited to 10. You can adjust this number according to the page layout.
  • {% for item in archives %}Iterate over each item obtained. In the loop,itemrepresenting the current article or product being processed.
  • {{item.Link}}/{{item.Title}}/{{item.Thumb}}/{{item.Description}}This is a commonly used field for content items, representing their link, title, thumbnail, introduction, etc.{{stampToDate(item.CreatedTime, "2006-01-02")}}This is used to format the publishing time of the content.
  • {% empty %}The text will display a custom prompt when there is no content.

This code can be placed in any template file on your website, such as the homepage, sidebar, or a dedicated list page, as long as it needs to display content for a specific category.

Advanced Techniques: Combining Pagination and Dynamic Category Display

Implement pagination display:If there are many items under a category, you may need to display them with pagination. Just putarchiveListTagstypeparameter settings"page"and combine.paginationthe tag:

{% archiveList articles with moduleId="1" categoryId="5" type="page" limit="10" %}
    {# 文章列表内容与上述相同 #}
    {% for item in articles %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% endfor %}
    {% empty %}
    <li>当前分类下暂无内容。</li>
{% endarchiveList %}

<div class="pagination">
    {% pagination pages with show="5" %}
        <a href="{{pages.FirstPage.Link}}">首页</a>
        {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
        {% for page in pages.Pages %}<a class="{% if page.IsCurrent %}active{% endif %}" href="{{page.Link}}">{{page.Name}}</a>{% endfor %}
        {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
        <a href="{{pages.LastPage.Link}}">尾页</a>
    {% endpagination %}
</div>

Here,limit="10"It is no longer the total number of items displayed, but the number of items displayed per page.paginationNavigation links will be generated based on the current page number and the total number of pages.

Dynamically retrieve the current category ID:If you are on a category page (such asarticles/list-news.html), and you want to display articles under the current category without hardcodingcategoryId，AnQiCMS will automatically identify the category information of the current page. You can even get more detailed information about the current category throughcategoryDetailtags, such as category title, description, etc.

English translation: In the template of the category list page # Get the current category ID with name = 'Id'

{% if currentCategory %} {# Ensure to get the category ID #}

{% archiveList articles with moduleId="1" categoryId=currentCategory type="page" limit="10" %}
    {% for item in articles %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% endfor %}
    {% empty %}