How to retrieve and display all article lists under a specified category in AnQiCMS template?

When building a website with AnQiCMS, we often need to display article lists based on specific content categories, whether it is for blog categories, product categories, or news categories.This not only helps organize the content of the website, but also enhances the user browsing experience and the search engine's friendliness.AnQiCMS provides powerful and flexible template tags, making this requirement simple and intuitive.

The AnQiCMS template system adopts syntax similar to the Django template engine, with support from the Go language as the underlying technology, ensuring the efficiency of template parsing. In template files, we usually use double curly braces{{变量}}Output variable content by using single curly braces and percent signs{% 标签 %}Invoke functional tags, such as conditional judgment and loop control. All template files are stored in the same place./templateUnder the directory and use UTF-8 encoding to ensure that the content is displayed correctly.

Core tags:archiveListDeep analysis

To retrieve and display all articles under the specified category, the core of AnQiCMS isarchiveListLabel. This label is specifically used for querying and outputting lists of documents under different content models. Understanding its parameters is the key to successfully achieving the goal.

archiveListThe basic usage of the label is as follows:{% archiveList 变量名称 with 参数1="值1" 参数2="值2" %}...{% endarchiveList %}Amongst, "variable name" is a temporary variable we define for the article list obtained, usually namedarchives, convenient inforloop traversal.

The following are some of the uses inarchiveListCommonly used key parameters:

  1. moduleId(Model ID):In AnQiCMS, articles, products, and others all belong to different 'content models'.Each model has a unique ID. For example, if we want to get the articles under the "Article" model, we may need to specifymoduleId="1"(Specific ID can be viewed in the background "Content Management" -> "Content Model"). This is because the category is attached to a specific content model.
  2. categoryId(Category ID):This is the core parameter to specify which category of articles to retrieve. You can pass a specific category ID, for examplecategoryId="10"If you need to get articles from multiple categories, you can separate multiple IDs with a comma, such ascategoryId="10,11,12"It is worth noting that if you do not specify this parameter on the category list page (i.e., the category ID is already included in the URL),archiveListThe system will automatically try to read the category ID of the current page. If you want to avoid this automatic reading behavior, you can explicitly setcategoryId="0".
  3. type(List type):This parameter determines the display method of the article list.
    • type="list": Used to get a fixed number of article lists,配合limitto use the parameter.
    • type="page": Used to get article lists that support pagination, usually withpaginationCombine labels to display page navigation.
  4. limit(Number displayed):Whentype="list"This parameter specifies the number of articles to display, for examplelimit="10"It can display 10 articles. It also supportsoffset,countPattern, for examplelimit="2,10"Displays 10 articles starting from the third article (skipping the first two).
  5. order(Sort method):We can sort articles according to different needs. Common sorting values include:
    • id desc: Sort by article ID in descending order (the most recently published articles first).
    • views desc: Sort by view count in descending order (the most popular articles first).
    • sort desc: Sort in descending order according to the custom sorting value set in the background.
  6. child(Include subcategories):By default,childparameters fortrueIndicates retrieving articles under the specified category and all its subcategories. If you want to display articles under the current specified category only and exclude subcategories, you can set it tochild=false.
  7. siteId(Site ID):If your AnQiCMS has deployed multiple sites and you want to retrieve data from other sites, you can specify this parameter. Generally, it is not necessary to set it.

WhenarchiveListAfter the label gets the article list, it will assign it to the variable you defined (for examplearchives), this variable is an array object. You can use it in the template.{% for item in archives %}loop through the arrayitemIt represents each article in the array.

Each article(item)contains the following common fields:

  • Id: Article ID
  • Title: Article title
  • Link: Article detail page link
  • Description: Article Summary
  • Content: Article content (usually used on detail pages, while brief introductions are displayed on list pages)
  • CategoryId: Article category ID
  • Views: Article views
  • CreatedTime: Article publish time (timestamp format, needs to be used)stampToDateTag Formatting)
  • Thumb: Article thumbnail address
  • Logo: Article cover first image address
  • and also other fields customized in the "Content Model".

Practice exercise: Get and display the list of articles

UnderstoodarchiveListAfter looking at the various parameters of the tags, let's see some practical application scenarios.

Scene one: Display the latest article list under a fixed category (not paginated)

Assuming we want to display the latest 5 articles of the "Company News" category (category ID 5, belonging to the article model, model ID 1) in a block on the homepage.

<div class="news-section">
    <h2>公司新闻</h2>
    <ul>
        {% archiveList archives with moduleId="1" categoryId="5" order="id desc" limit="5" %}
            {% for item in archives %}
            <li>
                <a href="{{ item.Link }}">
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" {% if not item.Thumb %}style="display:none;"{% endif %}>
                    <h3>{{ item.Title }}</h3>
                    <p>{{ item.Description|truncatechars:80 }}</p> {# 截取80个字符并添加... #}
                    <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    <span>阅读量：{{ item.Views }}</span>
                </a>
            </li>
            {% empty %}
            <li>暂无新闻文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

Code analysis:

  • moduleId="1"：Specify the content we want to retrieve under the article model.
  • categoryId="5"：Explicitly specify to retrieve only articles with category ID 5.
  • order="id desc"：Ensure the articles are sorted in descending order by article ID, i.e., the most recently published ones come first.
  • limit="5"Limit to displaying only the latest 5 articles.
  • {% for item in archives %}: Loop through each article obtained.
  • {{ item.Thumb }}: Output the thumbnail of the article.{% if not item.Thumb %}style="display:none;"{% endif %}Is a small trick, hide the image tag when there is no thumbnail.
  • {{ item.Title }}/{{ item.Link }}/{{ item.Description }}/{{ item.Views }}Output the article title, link, summary, and view count separately.
  • {{ stampToDate(item.CreatedTime, "2006-01-02") }}:CreatedTimeIt is a timestamp, we usestampToDatetag to format it as a date in the format of 'Year-Month-Day'.
  • {{ item.Description|truncatechars:80 }}: Use a filter to truncate the article summary to 80 characters and automatically add an ellipsis.
  • {% empty %}If:archivesIf empty (i.e., no articles), then display 'No news articles available.'.

Scenario two: Displaying article lists on the category list page with pagination support

When visiting a category page, we want to display all articles under that category and provide pagination. In this case, it is usually not necessary to specify manuallycategoryId,archiveListIt will intelligently identify the category ID of the current page.

<div class="article-list-container">
    <h1>{% categoryDetail with name="Title" %}</h1> {# 显示当前分类的标题 #}

    <ul class="article-list">
        {% archiveList archives with type="page" moduleId="1" order="id desc" limit="10" %}
            {% for item in archives %}
            <li>
                <a href="{{ item.Link }}">
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" {% if not item.Thumb %}style="display:none;"{% endif %}>
                    <h2>{{ item.Title }}</h2>
                    <p>{{ item.Description }}</p>
                    <div class="meta-info">
                        <span>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                        <span>阅读：{{ item.Views }}</span>
                    </div>
                </a>
            </li>
            {% empty %}
            <li>当前分类暂无文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>

    {# 分页导航 #}
    <div class="pagination-nav">
        {% pagination pages with show="5" %}
            <ul>
                <li {% if pages.FirstPage.IsCurrent %}class="active"{% endif %}><a href="{{ pages.FirstPage.Link }}">首页</a></li>
                {% if pages.PrevPage %}<li class="prev"><a href="{{ pages.PrevPage.Link }}">上一页</a></li>{% endif %}
                {% for page_item in pages.Pages %}
                    <li {% if page_item.IsCurrent %}class="active"{% endif %}><a href="{{ page_item.Link }}">{{ page_item.Name }}</a></li>
                {% endfor %}
                {% if pages.NextPage %}<li class="next"><a href="{{ pages.NextPage.Link }}">下一页</a></li>{% endif %}
                <li {% if pages.LastPage.IsCurrent %}class="active"{% endif %}><a href="{{ pages.LastPage.Link }}">末页</a></li>
            </ul>
        {% endpagination %}
    </div>
</div>

Code analysis:

  • <h1>{% categoryDetail with name="Title" %}</h1>: Use.categoryDetailThe tag retrieves and displays the title of the current category, so the user knows which category they are browsing.
  • type="page": Activate pagination feature.
  • limit="10": Displays 10 articles per page.
  • {% pagination pages with show="5" %}This is the core of pagination. It generates apagesAn object that contains all the information needed for pagination (total number of pages, current page, first page, last page, previous page, next page, and the list of middle page numbers).show="5"Indicates that the middle page number can display a maximum of 5.
  • By traversingpages.Pageswe constructed page number links and usedIsCurrentattribute to judge the current page number so as to addactiveStyle.

Summary and **practice**

Retrieve and display the list of articles under a specified category in AnQiCMS, mainly aroundarchiveListtags. By using flexible techniques.moduleId/categoryId/type/limitandorderWith parameters, you can easily achieve various content display needs. CombinestampToDateand format time, as well aspaginationTagging to implement pagination, able to build a functional and user-friendly dynamic content area.

What are some practical suggestions:

  • clearmoduleIdandcategoryId:When designing a template, first determine the content model ID and category ID you want to operate.
  • Pay attention to case sensitivity:The template tags and parameters of AnQiCMS are case-sensitive, be sure to spell them correctly.
  • Handle empty data:Use{% empty %}Or clause:{% if %}Use conditions to elegantly handle cases without articles, to avoid the page displaying blank or errors.
  • Make good use of filters:When displaying article summaries on the page, usetruncatecharsortruncatewordsFilters can effectively control the length of text and keep the page neat.
  • Image processing:When displaying article thumbnails, determineitem.ThumbWhether it exists can avoidsrcBrowser errors or style issues caused by empty properties.

By using these techniques, you can fully utilize the template function of AnQiCMS to create a rich and diverse content display page.

Frequently Asked Questions (FAQ)

Q1: I want to display a list of articles with different content models on a page, how should I operate? A1:You can call multiple timesarchiveListtags, and specify different ones each time you callmoduleIdImplement the parameter. For example, you can call the `archiveList` method once