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

In the Anqi CMS, designing a dedicated display template for the article list is a key step to creating a unique website style and optimizing user experience.The flexible content model and powerful template engine (similar to Django syntax) provided by AnQi CMS gives us great freedom, allowing us to present a diverse list of articles according to different content types, marketing goals, or user needs.

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

Step 1: Understand the template basics of Anqi CMS

Before starting the design, we need to understand some basic conventions of the template files in the security CMS. All template files are stored in/templateThe directory. When you create a new template, you usually create a template folder belonging to your website in this directory and organize your HTML files within 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 search for the template forSpecific 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 a template for a specific category cannot be found, it will then look for a template that isapplicable to the whole modeland has a general list template format, which is{模型table}/list.html. For example,archive/list.htmlThis will be the default template for all article lists.
  • At the next level, 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 template syntax of AnQi CMS is similar to Django, variables are enclosed in double curly braces{{变量}}Encapsulation, logical control (such as conditional judgment, loop) is used with single curly braces followed by a percent sign{% 标签 %}。Familiarize yourself with these 'magic spells', and you'll be able to call and display data in the template freely.

第二步：Create your exclusive list template file by hand.

Now we know the storage location and naming rules of the template, let's get started.

  1. Confirm the customization target:Are you looking 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

    • If you wishto globally modify all articles listof the style, you can create aarchive/list.htmlfile (if it does not exist, or modify the existing one).
    • if you want toSpecific category customizationYou need to know the ID of the category. For example, the ID of the "Science and Technology Information" 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. Typically, 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 above naming rules.

  3. Edit template file:Use the code editor you are accustomed to open this newly created template file.We will write the HTML structure here and embed the template tags provided by the Aanqi CMS to dynamically display content.

Step 3: Call article data in the template

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

  1. Get the list of articles:We usearchiveListLabel to retrieve article data. To support pagination, we need to settype="page". You can also uselimitparameter to control the number of articles displayed per page, for examplelimit="10"Displays 10 articles per page. If you want to specify articles from a particular category, you cancategoryIdparameters, such ascategoryId="123". If this template is designed for a specific category,categoryIdIt can usually be omitted, the system will automatically recognize 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 any other name you like.

  2. Display each article in a loop: archivesis an array object containing multiple articles, we need to usefora loop to iterate through and display the details of each article in turn.

    {% 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.LinkArticle link
    • item.Thumb：Article thumbnail (display after determining its existence)
    • item.DescriptionArticle summary
    • stampToDate(item.CreatedTime, "2006-01-02")：Format the article creation timestamp to the format “Year-Month-Day”.
    • item.Views：Article views.
    • categoryDetail with name='Title' id=item.CategoryIdandcategoryDetail with name='Link' id=item.CategoryId: Throughitem.CategoryIdGet the name and link of the current article's category.

Step 4: Add 'Page精灵' to the list.

A well-rounded article list naturally wouldn't be complete without pagination functionality, which helps visitors easily browse a large amount of content and is also very friendly to SEO.