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, allowing 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 homepage content look fresh.

Understand the AnQiCMS template system

AnQiCMS uses syntax similar to the Django template engine, developed in Go language, with high efficiency and security features. Template files are usually named.htmlwith suffix, stored in/templatedirectory. You will find that in the template files, we use double curly braces{{变量}}Output the variable value, and logical operations such as condition judgment, loop control, etc. use single curly braces and the percent sign.{% 标签 %}And it requires corresponding end tags.

This design makes template creation intuitive and easy to understand, even if you are new to AnQiCMS, you can get started quickly.

Step 1: Locate your homepage template file

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

After finding this file, we will add the code snippet to display the latest article list here.

Step 2: UsearchiveListtags to get the latest articles

in AnQiCMS,archiveListTags are the '万能钥匙' for obtaining the article list.It allows you to filter and display articles based on various conditions (such as categories, models, sorting methods, display quantities, etc.).To display the latest articles on the homepage, we need to utilize some of its key parameters.

Assuming your article content model ID is1(You can confirm this in the "Content Management" -> "Content Model" section of the backend), and you can display 5 of the latest articles in this wayarchiveListTags:

{% 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 a variable name 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 want to retrieve under the article model. If your article model ID is not 1, please modify it to the corresponding ID.
  • order="id desc"This is a key, it tells the system to sort the articles by their ID in reverse order, meaning the latest published articles will be at the top.
  • limit="5"Limit to displaying only 5 articles. You can adjust this number according to your page layout needs.
  • type="list"It indicates that we only need a simple list, not a list with pagination features.

Step 3: Loop to display the article details.

After obtaining the article list, the next step is to iterate through this list and display the title, link, summary, and other information of each article. We will useforTranslate this loop label to complete the 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 fields and labels inside the loop:

  • {% for item in archives %}Loop through:archivesEach article in the variable, the data of each article will be temporarily assigned toitema variable.
  • {{ item.Link }}: Output the link address of the current article.
  • {{ item.Title }}: Output 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 summary of the article. This also usestruncatechars:100a filter, which means if the summary text exceeds 100 characters, it will automatically truncate and add an ellipsis to keep the page tidy.
  • {% categoryDetail with name="Title" id=item.CategoryId %}This is a clever usage of nested tags.item.CategoryIdIt can only retrieve the category ID.categoryDetailThe tag can further retrieve the detailed information of the category based on this ID, such as the title of the category.TitleSo that 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 usestampToDatefunction to format it into a readable date."2006-01-02"Is a special string defined by Go language for date format, it outputs something similar to2023-10-27format.
  • {{ item.Views }}: Shows the page views of the article.
  • {% empty %}and<p>暂时没有最新文章。</p>: This is a very practicalforadditional feature of the loop. IfarchivesThe list is empty (i.e., there are no articles to display),emptythe content in the block will be executed, thereby giving the user a friendly prompt.

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.In order to make the page look more beautiful, you need to add the corresponding CSS rules according to your website style.

finish and clear the cache

Modify the template file and save it, in order to ensure that the change