How to display the latest article list on the homepage using AnQiCMS template tags?

In website operation, displaying the latest article list on the homepage is a common method to enhance user engagement and website activity.AnQiCMS provides a powerful and flexible template tag system that allows you to easily implement this feature on the homepage without complex programming knowledge.This article will guide you step by step to configure, making your website's homepage content焕然一新.

Understand the AnQiCMS template system

AnQiCMS uses a syntax similar to the Django template engine, developed in Go language, with efficient and secure features. Template files are usually named with.htmlwith suffix, stored in/templateUnder the directory. You will find that in the template file, we use double curly braces{{变量}}to output variable values, while operations like conditional judgment, loop control, etc., use single curly braces and the percentage sign{% 标签 %}Define it and it needs the corresponding end tag.

This design makes template creation intuitive and easy to understand, even if you are a first-time user of AnQiCMS, you can quickly get started.

First step: Locate your homepage template file

In most cases, the homepage template file of the AnQiCMS website is located in your template directory.index/index.htmlor directly in flattened file organization modeindex.htmlIf you are not sure, you can view the current template path in the "Template Design" section of the background.

Find this file and we will add the code snippet to display the latest article list here.

Second step: usearchiveListTag to get the latest articles

In AnQiCMS,archiveListThe tag is the 'universal key' to get the list of articles. It allows you to filter and display articles based on various conditions (such as categories, models, sorting methods, display quantity, etc.).We need to use some key parameters to display the latest articles on the homepage.

Assuming your article content model ID is1(You can confirm it in the background "Content Management" -> "Content Model"), and you want to display the 5 latest articles, you can use it like thisarchiveListTags:

{% archiveList archives with moduleId="1" order="id desc" limit="5" type="list" %}
    {# 在这里循环展示每一篇文章 #}
{% endarchiveList %}

Here is an explanation of the meaning of these parameters:

  • archivesThis is the variable name you have defined for the article list you have obtained, you can customize it according to your preference, and it will be used in the loop later.
  • moduleId="1"Specify the content we need to retrieve under the article model. If your article model ID is not 1, please change it to the corresponding ID.
  • order="id desc"This is the key, it tells the system to sort the articles in reverse order by ID, so the most recently published articles will be at the top.
  • limit="5": Limit to display only 5 articles. You can adjust this number according to your page layout requirements.
  • type="list": It means we just need a simple list, not a list with pagination features.

Step three: Loop to display article details.

After obtaining the article list, the next step is to iterate through the list and display the title, link, and summary information of each article. We will useforLoop tags to complete this task:

{% archiveList archives with moduleId="1" order="id desc" limit="5" type="list" %}
    {% for item in archives %}
        <div class="latest-article-item">
            <a href="{{ item.Link }}" title="{{ item.Title }}">
                <h3>{{ item.Title }}</h3>
                {% if item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumbnail">
                {% endif %}
                <p>{{ item.Description|truncatechars:100 }}</p>
            </a>
            <div class="article-meta">
                <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>阅读量：{{ item.Views }}</span>
            </div>
        </div>
    {% empty %}
        <p>暂时没有最新文章。</p>
    {% endfor %}
{% endarchiveList %}

Let's take a detailed look atforThe various fields and tags inside the loop:

  • {% for item in archives %}: Loop through.archivesEach article in the variable, the data of each article will be temporarily assigned toitemVariable.
  • {{ item.Link }}Display the link address of the current article.
  • {{ item.Title }}Display the title of the current article.
  • {% if item.Thumb %}and<img src="{{ item.Thumb }}" ...>This will check if the current article has a thumbnail, and if so, it will display it. This is a good practice to avoid placeholders or errors when there is no thumbnail.
  • {{ item.Description|truncatechars:100 }}Output the article summary. This also usestruncatechars:100a filter, which means if the summary text exceeds 100 characters, it will be automatically truncated and an ellipsis will be added to keep the page neat.
  • {% categoryDetail with name="Title" id=item.CategoryId %}This is a clever usage of nested tags.item.CategoryIdOnly the ID of the category can be obtained, whilecategoryDetailthe tag can further obtain the detailed information of the category according to this ID, such as the title of the categoryTitle. Thus, we can display the category name of the article next to the article list.
  • {{ stampToDate(item.CreatedTime, "2006-01-02") }}:item.CreatedTimeIt returns a timestamp, and we need to usestampToDatea function to format it into a readable date."2006-01-02"It is a special string defined by the Go language for date formats, it will output something similar2023-10-27format.
  • {{ item.Views }}Display article views.
  • {% empty %}and<p>暂时没有最新文章。</p>: This is a very practicalforAdditional features of the loop. IfarchivesThe list is empty (i.e., there are no articles to display),emptyThe content in the block will be executed, thus giving a friendly prompt to the user.

A complete code example

Insert the above code snippet into your homepage template file (for exampleindex.htmlAt the appropriate position, usually in the main content area of the page.

<section class="latest-articles-section">
    <h2>最新文章</h2>
    <div class="article-list-container">
        {% archiveList archives with moduleId="1" order="id desc" limit="5" type="list" %}
            {% for item in archives %}
                <div class="latest-article-item">
                    <a href="{{ item.Link }}" title="{{ item.Title }}">
                        <h3>{{ item.Title }}</h3>
                        {% if item.Thumb %}
                            <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumbnail">
                        {% endif %}
                        <p>{{ item.Description|truncatechars:100 }}</p>
                    </a>
                    <div class="article-meta">
                        <span class="category-name">分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                        <span class="publish-date">发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                        <span class="view-count">阅读量：{{ item.Views }}</span>
                    </div>
                </div>
            {% empty %}
                <p>暂时没有最新文章可供显示。</p>
            {% endfor %}
        {% endarchiveList %}
    </div>
</section>

Please note that the above code only includes HTML structure and template tags.To make the page look more beautiful, you need to add the corresponding CSS rules based on your website style.

Complete and clear the cache.

After modifying the template file and saving it, to ensure that the changes