When building websites with AnQiCMS, we often need to make the page content more flexible to meet the display needs of different sections.One of the most common needs is how to accurately display the list of all articles under a specific category in a template.AnQiCMS Thanks to its efficient architecture based on the Go language and syntax similar to Django's template engine, this task becomes both intuitive and powerful.

Template files are usually named in AnQiCMS.htmlwith suffix, stored in/templateThe directory. You will find that variables are usually referred to with double curly braces{{变量}}While logical labels such as conditional judgment and loop control use single curly braces and the percent sign{% 标签 %}Definition, and it must have corresponding end tags. Familiarity with these basic conventions will help you understand and write template code more smoothly.

Core Tools:archiveListtags

To display the article list under a specific category in the AnQiCMS template, we mainly use a powerful tag ——archiveListThis tag is specifically used to retrieve lists of various documents, whether it is a regular list, related documents, or content that needs to be displayed with pagination.

1. Display the list of articles under a single known category

If you clearly know the ID of a category (for example, by checking the category management in the background, each category has a unique ID), it will be very simple to call the article list under the category.

UsearchiveListwhen labeling, you can specifycategoryIdParameters are used to filter articles. In addition, considering that AnQiCMS supports flexible content models (such as article models, product models, etc.), you also need to go throughmoduleIdThe parameter is used to specify which model's articles you want to get. Usually, the article model corresponds tomoduleIdThe default is1, the product model is2.

For example, to display articles with ID1All articles under the article classification:

{% archiveList articles with categoryId="1" moduleId="1" limit="10" %}
    <ul>
    {% for item in articles %}
        <li>
            <a href="{{item.Link}}">{{item.Title}}</a>
            <p>{{item.Description}}</p>
            <small>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}} | 浏览量：{{item.Views}}</small>
        </li>
    {% empty %}
        <li>这个分类下暂时没有文章。</li>
    {% endfor %}
    </ul>
{% endarchiveList %}

In the above code:

  • archiveList articles：We will assign the article list we obtain to a variable namedarticles.
  • categoryId="1"：Specify the classification ID 1 to obtain the articles.
  • moduleId="1"：Specify the content under the article model.
  • limit="10"：Limit to displaying the latest 10 articles. If you want to display all articles, you can omit this parameter or set a sufficiently large number.
  • {% for item in articles %}This is a loop label, used for iteration.articlesIterate over each article in the variable. In the loop body,itemrepresents the current article object being iterated over.
  • {{item.Link}}/{{item.Title}}etc: They can be accessed directly throughitemAccess the various properties of the object, such as links, titles, descriptions, creation time, and views.
  • {{stampToDate(item.CreatedTime, "2006-01-02")}}：This is a formatted timestamp label that can convert the article's creation timestamp to a readable date format.
  • {% empty %}：This is a very practical feature whenarticlesThe list is empty,emptyBlock content will be displayed to avoid blank pages on the page.

2. Display article list with pagination feature

If there are many articles under a category, we usually need to display them in pages. At this time, just need to setarchiveListTagstypeparameter settings"page"and combine.paginationthe tag:

{% archiveList articles with categoryId="1" moduleId="1" type="page" limit="10" %}
    <ul>
    {% for item in articles %}
        <li>
            <a href="{{item.Link}}">{{item.Title}}</a>
            <p>{{item.Description}}</p>
            <small>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}} | 浏览量：{{item.Views}}</small>
        </li>
    {% empty %}
        <li>这个分类下暂时没有文章。</li>
    {% endfor %}
    </ul>

    <div class="pagination-wrapper">
    {% pagination pages with show="5" %}
        {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
        {% for p in pages.Pages %}
            <a class="{% if p.IsCurrent %}active{% endif %}" href="{{p.Link}}">{{p.Name}}</a>
        {% endfor %}
        {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
    {% endpagination %}
    </div>
{% endarchiveList %}

Here,type="page"inform the system to prepare the pagination data,pagination pages with show="5"It will generate pagination links,pagesThe variable includes all pagination information, allowing you to flexibly display the home page, previous page, next page, and middle page links.

Dynamic display: Traverse categories and display their articles

In certain scenarios, you may wish to display multiple categories in the home page or other aggregated pages, and show the corresponding article lists under each category. At this time, you need to combinecategoryListLabel to first get the category list, then nested insidearchiveList.

Assuming we want to display all top-level categories under the article model, and show 5 articles under each category:

{% categoryList categories with moduleId="1" parentId="0" %}
    {% for category in categories %}
        <section class="category-block">
            <h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3>
            <ul>
            {% archiveList articles_in_category with categoryId=category.Id moduleId="1" limit="5" %}
                {% for item in articles_in_category %}
                    <li>
                        <a href="{{item.Link}}">{{item.Title}}</a>
                        <small>({{stampToDate(item.CreatedTime, "2006-01-02")}})</small>
                    </li>
                {% empty %}
                    <li>暂无文章。</li>
                {% endfor %}
            {% endarchiveList %}
            </ul>
        </section>
    {% endfor %}
{% endcategoryList %}

In this code block:

  • {% categoryList categories with moduleId="1" parentId="0" %}：we first obtain all the articles under the model.parentIdresponse for0（which is the top-level category）and assign it to.categoriesa variable.
  • {% for category in categories %}：The outer loop traverses each top-level category.
  • categoryId=category.Id：This is a critical step! Inside the layer,archiveListLabel within, we will get the outer loopcategory.IdDynamically ascategoryIdPass the parameter to ensure that only the articles under each category are displayed.
  • articles_in_categorySpecify an independent variable name for the article list in the inner loop to avoid conflicts with the outer loop or other parts.

Through this nested structure, you can easily achieve a more dynamic and rich article display layout.

Useful Tips and Considerations

  • Location of template file: The template files of AnQiCMS are stored uniformly in/templateThe directory contains an independent folder for each template set. The code you write is usually placed within these template files.
  • Variable name case sensitivityPlease note that variable names in AnQiCMS templates are case-sensitive, for exampleitem.Titleanditem.titleare considered different variables.
  • moduleIdoptions：According to the actual structure of your website, choose correctlymoduleIdVery important. Article