How can I design a dedicated display template for the article list in AnQi CMS?

In Anqi CMS, designing a dedicated display template for the article list is a key step in creating a unique website style and optimizing user experience.AnQi CMS provides us with great flexibility with its flexible content model and powerful template engine (similar to Django syntax), allowing us to present a diverse list of articles based on different content types, marketing goals, or user needs.

The article list page of the website is like a content showcase, how to arrange and highlight the key points directly affects the visitor's browsing interest and conversion effect.A well-designed list template that not only makes the content clear at a glance but also brings visual pleasure and improves SEO performance through reasonable layout.Let's explore step by step how to achieve this goal in Anqi CMS.

Step 1: Understand the template basics of Anqi CMS

Before starting the design, we need to first understand some basic conventions of the template files in Anqi CMS. All template files are stored in/templateUnder the directory. When you create a new template, you usually create a template folder for your website in this directory and organize your HTML files in it.

For the article list, AnQi CMS provides a very flexible template matching mechanism. It will search for the most matching template file according to certain rules:

  • Firstly, it will look for the targetSpecific Category IDList template, format is{模型table}/list-{分类ID}.html. For example, if your "News" category ID is 123 and news belongs to the "Article Model" (default table name isarchive), then the system will first look forarchive/list-123.html.
  • If it cannot find a template for a specific category, it will look for one that is suitable forthe entire modelcommon list template, formatted as{模型table}/list.htmlFor example,archive/list.htmlIt will serve as the default template for all article lists.
  • Above, there are some more general template rules, but for list pages, we mainly focus on the above two, which can meet the vast majority of customization needs.

The AnQi CMS template syntax is similar to Django, variables are enclosed in double curly braces{{变量}}Enclosed, logical control (such as conditional judgment, loop) is enclosed in single curly braces with a percentage sign{% 标签 %}Familiarize yourself with these 'magic incantations', and you will be able to call and display data freely in the template.

Step two: create your exclusive list template file by hand.

Now we know the location and naming rules of the template, we can start to get to work.

  1. Determine the customization target:Do you want to design a unified new style for all article lists? Or do you want to design a unique list page for a specific category (such as "Industry News", "Product Cases")?

    • If you wishTo globally modify all article listsof the style, you can create aarchive/list.htmlfile (if it does not exist, or modify the existing one).
    • If you want toCustom category creationYou need to know the ID of the category. For example, the ID of the 'Science and Technology News' category is456Then you can create aarchive/list-456.htmlfile.

  2. Choose the starting point:The simplest way is to copy an existing list template as a starting point for modification. Usually, you can intemplate/default/archive/list.htmlOrtemplate/default/product/list.htmlFind a basic list structure. Copy this file to your custom template directory and rename it according to the naming rules.

  3. Edit the template file:Open this new template file with the code editor you are accustomed to.We will write the HTML structure here and embed the template tags provided by Anqi CMS to dynamically display content.

Step 3: Call the article data in the template

In the custom article list template, the most critical task is to call and display article data. Anqi CMS providesarchiveListtags to complete this task.

  1. Get article list:We usearchiveListTag to retrieve article data. To support pagination, we need to settype="page". At the same time, you can uselimitparameter to control the number of articles displayed per page, for examplelimit="10"It indicates that 10 articles are displayed per page. If you want to specify the articles of a certain category, you can usecategoryIdparameters, for examplecategoryId="123". If this template is designed for a specific category,categoryIdIt can be omitted, the system will automatically identify the current category.

    {% archiveList archives with type="page" limit="10" %}
    {# 在这里循环遍历文章 #}
{% endarchiveList %}

    here,archivesIt is a variable name, it will receive the list of article data, and you can also change it to another name you like.

  2. Loop to display each article: archivesIt is an array object containing multiple articles, we need to useforLoop to iterate over and display the details of each article.

    {% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <a href="{{ item.Link }}" class="article-title">
                <h3>{{ item.Title }}</h3>
            </a>
            {% if item.Thumb %}
                <a href="{{ item.Link }}" class="article-thumbnail">
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" loading="lazy">
                </a>
            {% endif %}
            <p class="article-description">{{ item.Description }}</p>
            <div class="article-meta">
                <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>阅读量：{{ item.Views }}</span>
                <span>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
            </div>
        </div>
    {% empty %}
        <p>该分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

    In this example:

    • item.Title: Article title
    • item.Link: Article link
    • item.Thumb: Article thumbnail (display if it exists)
    • item.Description: Article Summary
    • stampToDate(item.CreatedTime, "2006-01-02"): Format the article creation timestamp to the "Year-Month-Day" format.
    • item.Views: Article views.
    • categoryDetail with name='Title' id=item.CategoryIdandcategoryDetail with name='Link' id=item.CategoryId: Passitem.CategoryIdGet the name and link of the category to which the current article belongs.

The fourth step: add the 'Page Elf' to the list

A complete article list naturally can not be without pagination features, which can help visitors easily browse a large amount of content and is also very friendly to SEO