How to dynamically retrieve and display an article list through template tags in Anqi CMS?

Dynamic display of website content is one of the core elements of modern website operations, it not only improves user experience and allows visitors to easily find the information they are interested in, but also effectively assists in search engine optimization (SEO), making the website more favored by search engines.In AnQi CMS, through the powerful template tag feature, we can flexibly retrieve and display various types of article lists.

The AnQi CMS template system borrows the syntax of the Django template engine, with a natural and smooth style. It will be very quick for you to get started if you are familiar with front-end development. We mainly use two symbols to operate in the template file: double curly braces{{ 变量 }}Used to output variable content, while the single curly bracket plus percent sign{% 标签 %}is used to perform logical judgments, loops, or call specific function tags.

Core Tool:archiveListTag

To dynamically retrieve and display the article list, we first need to understand the "universal" tag in Anqi CMSarchiveList. This tag is the foundation for building article lists, providing rich parameters to help us accurately filter, sort, and display articles.

Basic article list acquisition

If you just want to display a few of the latest articles on a single page, without pagination, thenarchiveListthe tag will be very simple and practical. We usually give this tag a variable name, such asarticlesThen proceedforLoop through this variable to display the information of each article.

For example, to display the titles and summaries of the 5 latest articles on the homepage:

<div class="latest-articles">
    {% archiveList articles with type="list" limit="5" order="id desc" %}
        {% for item in articles %}
            <article>
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                <p>{{ item.Description }}</p>
                <footer>
                    <span>发布日期：{{ stampToDate(item.CreatedTime, "2006年01月02日") }}</span>
                    <span>浏览量：{{ item.Views }}</span>
                </footer>
            </article>
        {% empty %}
            <p>暂无文章内容。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

In this code block:

• archiveList articlesDefined a namedarticlesThe variable used to store the list of retrieved articles.
• type="list"Indicates that we are getting a fixed number of lists, not prepared for pagination.
• limit="5"Limited to displaying only the latest 5 articles.
• order="id desc"Tell the system to sort articles by article ID in descending order, which usually means the most recent ones are at the top. You can also useorder="views desc"sort by views, ororder="sort desc"sort by backend custom sorting.
• for item in articlesLoop througharticlesEach article in the variable, assigns the data of the current article toitem.
• item.Link/item.Title/item.Description/item.ViewsAll are attributes of each article, which can be accessed through.the syntax.
• stampToDate(item.CreatedTime, "2006年01月02日")It is a very useful time formatting function. The timestamp in AnQi CMS is usually 10 digits long, and you need to usestampToDatePass the Go language time format (for example “2006-01-02”) so that it can be converted to the date format we are familiar with.
• {% empty %}the block will bearticlesWhen the list is empty, it is displayed to avoid the page from being blank.

If you need to display the thumbnail of the article, you can make use ofitem.Thumboritem.Logoproperties. To ensure that the image is displayed only when it exists, you can combineifthe tag to use:

{% if item.Thumb %}
    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb" />
{% endif %}

CombinemoduleIdRetrieve specific content model article

AnQi CMS supports a flexible content model, which means you may not only have the 'Article' model, but also other models such as 'Product', 'Case', and others. If you want to get a list of articles under a specific model, you need to usemoduleIdParameters. Usually, the "article model" ofmoduleIdWith1is the "product model".2. You can view the specific ID in the content model management on the back end.

For example, get the latest 5 product lists:

{% archiveList products with type="list" moduleId="2" limit="5" order="id desc" %}
    {% for product in products %}
        <div class="product-item">
            <a href="{{ product.Link }}">
                {% if product.Logo %}
                    <img src="{{ product.Logo }}" alt="{{ product.Title }}" />
                {% endif %}
                <h3>{{ product.Title }}</h3>
            </a>
            <p>{{ product.Description }}</p>
        </div>
    {% endfor %}
{% endarchiveList %}

Implement pagination: Make the article list easier to browse

Pagination is an essential function when there are many articles. To implement pagination lists in Anqi CMS,archiveListwith the tag andpaginationtag usage

first, archiveListit is necessary to transfertypeis set to"page"Specify the number of items per pagelimitThen, inarchiveListlabel'sendarchiveListAfter that, we usepaginationtags to generate pagination navigation.

Here is an example of an article list with pagination

`twig

{% archiveList articles with type="page" limit="10" %}
    {% for article in articles %}
        <article class="article-item">
            <h2><a href="{{ article.Link }}">{{ article.Title }}</a></h2>
            {% if article.Thumb %}
                <img src="{{ article.Thumb }}" alt="{{ article.Title }}" />
            {% endif %}
            <p class="article-description">{{ article.Description }}</p>
            <div class="article-meta">
                <span>分类: {% categoryDetail with name="Title" id=article.CategoryId %}</span>
                <span>浏览量: {{ article.Views }}</span>
                <span>发布时间: {{ stampToDate(article.CreatedTime, "2006年01月02日") }}</span>
            </div>
        </article>
    {% empty %}
        <p>这里暂时没有文章。</p>
    {% endfor %}

    <div class="pagination-nav">
        {% pagination pages with show="5" %}
            <a href="{{ pages.FirstPage.Link }}" class="page-link">首页</a>
            {% if pages.PrevPage %}<a href="{{ pages.