When building a website in 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 a list of all articles under a specific category in the template.AnQiCMS with its efficient architecture based on the Go language and the template engine syntax similar to Django, makes this task both intuitive and powerful.

Template files in AnQiCMS are usually named with.htmlwith suffix, stored in/templateUnder the directory. You will find that variables are usually referenced using double curly braces{{变量}}while logical tags such as conditional judgment and loop control use single curly braces and the percentage sign{% 标签 %}Define, and it must have the corresponding end tag. Familiarize yourself with these basic conventions, which will help you understand and write template code more smoothly.

Core Tool:archiveListTag

To display the list of articles under a specific category in the AnQiCMS template, we mainly use a powerful tagarchiveList. This tag is 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 viewing the category management on the back-end, each category has a unique ID), then it will be very simple to call the list of articles under that category.

UsearchiveListWhen tagging, you can specifycategoryIdParameters to filter articles. Moreover, considering that AnQiCMS supports flexible content models (such as article models, product models, etc.), you also need to go throughmoduleIdParameters to specify which model's articles you want to retrieve. Usually, the article model corresponds tomoduleIdDefault to1, Product Model is2.

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

{% 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 code above:

  • archiveList articles: We will assign the list of articles we obtain to a variable namedarticles.
  • categoryId="1": Specify the articles to be obtained by category ID 1.
  • moduleId="1": Specify the content under the article model.
  • limit="10": Limit to display 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 iterationarticlesEach article in the variable. Inside the loop,itemrepresents the current article object being traversed.
  • {{item.Link}}/{{item.Title}}etc: you can pass through directlyitemObject access to various properties of an article, such as links, titles, descriptions, creation time, and views, etc.
  • {{stampToDate(item.CreatedTime, "2006-01-02")}}: This is a timestamp formatting label that can convert the creation timestamp of an article into a readable date format.
  • {% empty %}: This is a very practical feature, whenarticlesWhen the list is empty,emptyThe content within the block will be displayed to avoid blank pages.

2. Display the article list with pagination feature.

If a category has a lot of articles, we usually need to display them in pages. At this time, just need toarchiveListlabel'stypethe parameter to"page"and combiningpaginationLabel it:

{% 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"tell the system to prepare pagination data,pagination pages with show="5"it will generate pagination links,pagesThe variable contains all pagination information, you can flexibly display the home page, previous page, next page, and page number links in the middle.

Dynamic display: traverse categories and display their articles

In certain scenarios, you may want to display multiple categories on the homepage or other aggregation pages, and show the corresponding article list under each category. At this time, you need to combinecategoryListLabel to first get the category list, then nest it 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 get all the articles under the article modelparentIdWith0(which is the top-level category) and assign it tocategoriesVariable.
  • {% for category in categories %}: The outer loop traverses each top-level category.
  • categoryId=category.Id: This is a critical step! Inside thearchiveListIn the label, we will get the outer loopcategory.IdDynamically ascategoryIdPassed as a parameter, to ensure that each category only displays its own articles.
  • articles_in_category: Assign a unique variable name for the article list in the inner loop to avoid conflicts with the outer or other parts.

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

Practical skills and precautions

  • Template File Location: The template files of AnQiCMS are stored in a unified location./templateUnder the directory, each template set has its own independent folder. The code you write will usually be placed inside these template files.
  • Variable naming casePlease note that the variable names in AnQiCMS templates are case-sensitive, for exampleitem.Titleanditem.titleare considered different variables.
  • moduleIdselection: Choose correctly according to the actual structure of your websitemoduleIdEssential. Article