How to display the list of articles by category in AnQiCMS?

It is crucial to organize and present 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.AnQiCMS (AnQiCMS) has provided us with flexible and powerful tools, making this need accessible.

To implement 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巧妙运用特定的标签 in the front-end template.

1. Understanding Basics: Content Model and Document Classification

In Anqi CMS, the content model is the foundation for defining the structure of different types of content, for example, you can create an 'article model' to manage blog posts, or 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 this content.Each category belongs to a specific content model. For example, under the 'Article Model', you can create categories such as 'News Updates', 'Industry Information', 'Technical Tutorials', and so on.This hierarchical classification method makes content management and organization well-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 freedom for the front-end display.

2. Core Tools: The Use of Template Tags

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

  • categoryListTags:Used to obtain the category list. Through this tag, we can traverse all categories on the website, or specify the categories under a specific model, or even obtain the child categories under a certain parent category.It will return an array of category objects, each containing the category ID, title, link, and other information.For example, to get all top-level categories under the 'Article Model' (assuming its ID is 1), you can use it like this:

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

    HeremoduleId="1"specifies the content model,parentId="0"which represents getting the top-level category.

  • archiveListTags:Used to retrieve a list of documents (articles or products). This tag feature is very powerful, and it can filter and sort documents through various parameters, with the most important beingcategoryId. By 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.Idthe article list with the current category (itemCombine ittype="list"Represents a non-paginated listlimit="10"It limits the number of displayed items. If you need to display in pages, you cantypeis set to"page"and combiningpaginationlabel usage

3. Step-by-step practice: Implementing categorized article lists

With an understanding of the core tags, we can begin to build a classified article list.

First, 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), the homepage of a model ({模型table}/index.html) or a specific category list page ({模型table}/list.htmlIt is carried out in the middle.

Assuming we want to display the latest articles under the categories of "News Dynamics" and "Industry Information" on the homepage, we can do it this way:

{# 首先，获取所有需要展示的顶级文章分类，假设文章模型的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 iteration, we took out the current category'sTitleandLink. Then, within each category, we usedarchiveListtags, throughcategoryId=category.IdParameters, accurately obtain and display the articles under this category.forloop.Counterandforloop.RevcounterSuch a loop variable can be used when you need 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 you need a more complex "load more" or traditional pagination, you can combinetypethe parameter to"page", then inarchiveListtags afterpaginationtags to generate pagination navigation.
  • Multi-level category display:If you need to display multi-level categories, you cancategoryListofforcall again within the loopcategoryListAnd thenparentId=item.Idto get the sub-categories and achieve infinite-level nesting. The documenttag-/anqiapi-category/151.htmlprovides example code for multi-level category nesting.
  • SEO-friendly URL:Anqi CMS supports static rule management, you can configure through{catname}or{module}Generate variables to create more semantically rich categories and article URLs, enhancing search engine friendliness.
  • Custom category template: When editing categories in the background, you can specify a "category template" for a specific category (such aslist-news.html)。So, when accessing the category, the system will automatically apply the specified template to achieve a personalized display effect, without needing to write complex conditional judgments in the main template.
  • No content prompt when there is nothing:InforUsed in loop:{% empty %}Can elegantly handle the case where the list is empty, providing friendly prompt information.

By using the above method, you can flexibly and efficiently display the article list by category in AnQiCMS, whether it is to build a rich information portal or a clear product showcase website, you can easily cope with it.

Frequently Asked Questions (FAQ)

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

  2. Ask: Why have I set categories and articles, but they are not displayed on the front-end page?Answer: This may be caused by several reasons:

    • Template code issue:Check the template incategoryListandarchiveListAre the parameters of the tag correct, especiallymoduleIdandcategoryIdEnsure the loop variableitemis correctly passed the category ID.
    • Content status:Confirm that 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 cache:Clear system cache or page cache, as sometimes the front-end display will not update immediately after changing the background configuration.

  3. How to implement a feature similar to 'breadcrumb navigation' to display all parent categories of the current article?Answer: Anqi CMS provides a specialbreadcrumbLabel this issue. You can use it directly in the template{% breadcrumb crumbs %}To get the breadcrumb navigation path. It will automatically detect the category or article category level of the current page and generate a navigation list containing all parent categories and the current page, which is very convenient.