How to display article lists by category in AnQiCMS?

It is crucial to organize and display information efficiently in website content management.For users, being able to clearly browse the article list by different categories greatly enhances the browsing experience and also helps search engines better understand the website structure, thereby optimizing the SEO effect.English CMS (EnglishCMS) provides us with flexible and powerful tools, making this need easily accessible.

To achieve the display of article lists by category in AnQiCMS, you first need to understand its underlying core mechanism, which mainly involves the concepts of 'Content Model' and 'Document Classification', as well as how to skillfully use specific tags in the front-end template.

1. Understanding Basics: Content Model and Document Classification

In the Anqi CMS, the content model is the foundation for defining the structure of different types of content, such as you can create a 'article model' to manage blog posts, or create a 'product model' to manage product information.Each model can have its own unique fields, ensuring flexibility and diversity of content.

And document classification, as the name implies, is a tool for classifying these contents.Each category belongs to a specific content model.For example, under the "Article ModelThis hierarchical classification method makes content management and organization organized.When creating categories in the background, the system allows you to set the category name, description, custom URL, and even specify an independent template for the category, which provides great flexibility for front-end display.

2. Core Tools: The Use of Template Tags

The key to implementing the classified article list lies in the template tags provided by the Anqi CMS. Among them,categoryListandarchiveListare the two most commonly used tags.

  • categoryListTags:Used to get the category list.Through this tag, we can traverse all categories on the website, or specify categories under a specific model, or even obtain subcategories under a parent category.It will return an array of classification objects, each containing the classification ID, title, link, and other information.

    {% categoryList categories with moduleId="1" parentId="0" %}
    {# 在这里循环处理每个分类 #}
{% endcategoryList %}

    HeremoduleId="1"specifies the content model,parentId="0"which means to get the top-level category.

  • archiveListTags:Used to obtain a list of documents (articles or products). This tag feature is very powerful and can filter and sort documents through various parameters, with the most important beingcategoryIdThrough this parameter, we can specify the documents belonging to a certain or certain categories. For example, to get 10 articles under a certain category:

    {% archiveList archives with categoryId=item.Id type="list" limit="10" %}
    {# 在这里循环处理每个文章 #}
{% endarchiveList %}

    HerecategoryId=item.Idwill combine the article list with the current category (item关联起来，type="list"表示不分页列表，limit="10"则限制了显示数量。如果需要分页显示，可以将typeset"page"and combine.paginationUse the label.

3. 逐步实践：实现分类文章列表

With an understanding of the core tags, we can start building the list of categorized articles.

Firstly, make sure you have created the corresponding content model and categories in the Anqi CMS backend, and published some articles under these categories.

Next, we need to write code in the template file. Usually, this is on the home page of the website (index/index.html) of some model's main page ({模型table}/index.html) or a specific category list page ({模型table}/list.html) 中进行。

假设我们希望在首页展示“新闻动态”和“行业资讯”两个分类下的最新文章，我们可以这样做：

{# 首先，获取所有需要展示的顶级文章分类，假设文章模型的ID为1 #}
{% categoryList categories with moduleId="1" parentId="0" %}
    {% for category in categories %}
        {# 遍历每个分类，然后为每个分类显示一个标题和其下的文章列表 #}
        <section class="category-section">
            <h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3>
            <ul class="article-list">
                {# 在当前分类下获取最新10篇文章 #}
                {% archiveList articlesInCategory with categoryId=category.Id type="list" limit="10" %}
                    {% for article in articlesInCategory %}
                        <li>
                            <a href="{{ article.Link }}">
                                {# 如果文章有缩略图，可以显示出来 #}
                                {% if article.Thumb %}
                                    <img src="{{ article.Thumb }}" alt="{{ article.Title }}" class="article-thumb">
                                {% endif %}
                                <div class="article-info">
                                    <h4>{{ article.Title }}</h4>
                                    <p class="article-desc">{{ article.Description|truncatechars:80 }}</p> {# 截取描述，保持整洁 #}
                                    <span class="article-date">{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                                </div>
                            </a>
                        </li>
                    {% empty %}
                        <li>该分类下暂无文章。</li>
                    {% endfor %}
                {% endarchiveList %}
            </ul>
            <div class="more-articles">
                <a href="{{ category.Link }}">查看更多 {{ category.Title }} 文章 &gt;</a>
            </div>
        </section>
    {% endfor %}
{% empty %}
    <p>暂无可用分类。</p>
{% endcategoryList %}

In this code, we first usecategoryListTraversed all top-level article categories. In each loop, we retrieved the current category'sTitleandLink. Then, within each category, we usedarchiveListTags, throughcategoryId=category.IdParameters, precisely obtain and display the articles under this category.forloop.Counterandforloop.RevcounterSuch loop variables can be used when it is necessary to add special styles or logic to list items.

4. Advanced Techniques and Precautions

  • Control Display Quantity and Pagination: archiveListoflimitParameters can strictly control the number of articles displayed under each category. If a more complex 'load more' or traditional pagination is needed,typeparameter settings"page", then inarchiveListcombine after tagspaginationtags to generate pagination navigation.
  • Multi-level category display:If you need to display multi-level categories, you cancategoryListofforcall it again in the loopcategoryList, and proceed throughparentId=item.Idto get the subcategories, realizing infinite-level nesting. The documentationtag-/anqiapi-category/151.htmlprovides example code for multi-level nested categories.
  • SEO Friendly URL:AnQi CMS supports pseudo-static rule management, you can configure{catname}or{module}Generate more semantically rich classifications and article URLs, enhancing search engine friendliness.
  • Custom classification template:When editing categories in the background, you can specify a "category template" for a particular category (for example,list-news.html）。Thus, when accessing this category, the system will automatically apply the specified template to achieve a personalized display effect, without the need to write complex conditional judgments in the main template.
  • No content prompt when there is nothing.Inforin the loop, using{% empty %}Handle empty lists gracefully and provide friendly prompt information.

With this method, you can flexibly and efficiently display the list of articles by category in AnQiCMS. Whether it's building a rich information portal or a well-organized product showcase website, you can handle it effortlessly.

Common Questions (FAQ)

  1. 问：How to display the latest content of specified categories under different content models (such as articles and products) on the homepage?答：You can call them separately in the homepage template.categoryListLabel to obtain different content models (viamoduleIdclassification by parameters, and then within each category, usearchiveListLabel to obtain and display articles or products under the category. By adjustinglimitandorderParameters, can control the display quantity and sorting, and realize the display of different blocks such as "Latest Articles" or "Latest Products".

  2. 问：Why is it that I have set the category and article, but it does not display on the front-end page?答：This may be caused by several reasons:

    • Template code issue:Check the template in:categoryListandarchiveListLabel parameters are correct, especiallymoduleIdandcategoryId. Make sure the loop variableitemis correctly passed the category ID.
    • Content status:Confirm whether the article has been published, not a draft or deleted.
    • Category configuration:Ensure that the category is enabled and associated with the correct content model.
    • Template Caching:Clear the system cache or page cache, as the front-end display may not be updated immediately after changes are made to the background configuration.

  3. 问：How to implement a "breadcrumb navigation" function to display all parent categories of the current article category?答：安企CMS provides a specialbreadcrumbLabel this issue. You can use it directly in the template.{% breadcrumb crumbs %}Get the breadcrumb navigation path.It automatically detects the category level of the current page or the category to which the article belongs, and generates a navigation list containing all parent categories and the current page, which is very convenient.