How to call the article list under a specific category in Anqi CMS template?

Managing and displaying content in Anqi CMS is one of its core advantages, and flexibly calling the list of articles under specific categories is an indispensable function in website content operation.No matter if you want to display the latest articles of a special topic on the homepage or show popular recommendations under the current category in the sidebar, Anqi CMS template tags can help you easily achieve it.

The Anqi CMS template system adopts a syntax similar to the Django template engine, which is intuitive and powerful.The core lies in a few key template tags and their parameters, through the combination of these tags, we can precisely control the content that needs to be displayed.

Core Tool:archiveListLabel Exploration

To call the article list in the Anqi CMS template, the most important tag isarchiveListThis tag is like an intelligent filter, which can accurately select the list that meets your conditions from a massive amount of articles.

archiveListThe tag supports various parameters, among which the most closely related to calling the list of articles in a specific category iscategoryIdandmoduleId:

  • categoryId: This is the key parameter for the specified category. You can pass a specific category ID, or multiple category IDs (separated by commas) to get the articles under these categories.
  • moduleId: SecureCMS supports flexible content models, such as 'Article Model', 'Product Model', etc. ThroughmoduleIdparameters, you can specify which content model to retrieve articles from. For example,moduleId="1"typically represents an article model,moduleId="2"may represent a product model.
  • type: This parameter determines the type of article list, it can belist(a simple list),page(a paginated list), orrelated(Related articles).
  • limit: Controls the number of articles returned. For examplelimit="10"It will display the latest 10 articles.
  • order: Specify the sorting method of the articles, such as reverse chronological order by publication time (id desc), Browse in descending order (views desc) and so on.
  • child: A very practical parameter, determines whether to include articles of subcategories.child=true(Default) Includes subcategories,child=falseShow only the articles of the current category.

With a good understanding of the basics, we can start the actual operation.

Actual operation: step by step to implement the list call of specific category articles

The first step is to determine the target category ID

Before calling the list of articles for a specific category, we first need to know the target category ID. There are several ways to obtain it:

  1. Obtained from the backend management interface:Log in to the AnQi CMS backend, go to 'Content Management' -> 'Document Category'.Here, you can find all the categories created, and record the ID of the category you want to call.
  2. Obtained through the URL address:If you are browsing a category page, the URL usually contains the category ID (for example:/category/10.htmlof10It is the category ID).
  3. UsecategoryDetailTag dynamic acquisition:In the template, if you are already in the context of a category (for example, while rendering a category list page), you can pass throughcategoryDetailLabel to get the current category ID. For example:{% categoryDetail with name="Id" %}It will return the current category ID.

Suppose we have explicitly called the ID5Under the 'Company News' category.

Second step: usearchiveListCall the article list

Now, we can pass the category ID intoarchiveListthe tag to get the article list.

Scenario one: Retrieve the latest 10 articles of a specified category (without pagination)

If you only want to display a small number of articles from a category in a specific area (such as the sidebar), you can usetype="list":

{# 假设“公司新闻”分类的ID是5，文章模型ID是1 #}
<div class="news-list">
    <h3>公司新闻</h3>
    <ul>
        {% archiveList articles with categoryId="5" moduleId="1" type="list" limit="10" order="id desc" %}
            {% for article in articles %}
                <li>
                    <a href="{{ article.Link }}" title="{{ article.Title }}">
                        {{ article.Title }}
                    </a>
                    <span>发布于：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                </li>
            {% empty %}
                <li>暂无公司新闻。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

In this example:

  • archiveList articlesAssign the article list obtained toarticlesVariable.
  • categoryId="5"Specified the category ID of the article to be retrieved.
  • moduleId="1"Specified to retrieve content from the article model.
  • type="list": This is a simple article list without pagination.
  • limit="10": Limits to display the latest 10 articles.
  • order="id desc"：Sort by article ID in descending order, which usually means the most recently published articles are at the top.
  • {% for article in articles %}：Traversearticleseach article in the variable.
  • {{ article.Link }}and{{ article.Title }}：Retrieve the link and title of the article separately.
  • {{ stampToDate(article.CreatedTime, "2006-01-02") }}：The article's publication timestamp is formatted to the date format of “Year-Month-Day”.
  • {% empty %}：WhenarticlesNo content is displayed in the list.<li>暂无公司新闻。</li>，which is a very friendly user experience.
Scenario two: Dynamically display articles on the category list page and support pagination

When you are on a category page, you usually want to display all the articles under that category and support users to browse through pages. At this time,categoryIdthe value can be dynamically obtained andtypeNeed to be set topage.

{# 假设我们正在一个分类的详情页，当前分类ID可以通过 category.Id 获取 #}
<div class="category-articles">
    <h2>{% categoryDetail with name="Title" %}</h2> {# 显示当前分类标题 #}
    <ul>
        {% archiveList articles with categoryId=category.Id moduleId="1" type="page" limit="15" order="views desc" child=false %}
            {% for article in articles %}
                <li>
                    <a href="{{ article.Link }}" title="{{ article.Title }}">
                        {% if article.Thumb %}
                            <img src="{{ article.Thumb }}" alt="{{ article.Title }}" />
                        {% endif %}
                        <h4>{{ article.Title }}</h4>
                        <p>{{ article.Description|truncatechars:100 }}</p> {# 截取描述前100个字符 #}
                    </a>
                    <div class="article-meta">
                        <span>阅读：{{ article.Views }}</span>
                        <span>{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                    </div>
                </li>
            {% empty %}
                <li>此分类下暂无文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>

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

In this example:

  • categoryId=category.Id: Dynamically obtain the current category ID.category.IdThis variable is usually provided automatically by the system when accessing the category page, or you can use{% categoryDetail categoryInfo with name="Id" %}to obtain and assign it.categoryInfo.Id.
  • type="page": Pagination feature enabled.
  • limit="15": Displays 15 articles per page.
  • order="views desc": Sorted by views.