How does AnQiCMS display the latest article list on the homepage?

The homepage is the first impression of a visitor arriving at the website, and a timely updated list of the latest articles can effectively enhance the vitality and user stickiness of the website.For users of AnQiCMS, displaying the latest published article list on the homepage is a basic and important feature, which can be easily realized through the flexible template tags provided by the system.

AnQiCMS, with its high efficiency and customizable features, provides users with an intuitive template system.You don't need to delve deeply into complex backend code, just master its powerful template tag usage, and you can freely organize and display content on the website frontend.

Step 1: Find your homepage template file

To modify the homepage content, you first need to locate the homepage template file currently in use on the website. Typically, the Anqi CMS template files are located in the root directory of your website./template/Inside the folder. Within it, you will find a folder named after your theme (for exampledefault), after entering the folder, the homepage template file is usually namedindex.htmlor located atindex/index.html.

If you are unsure which file it is, you can check the folder of your themeconfig.jsonfile, it will define the basic information of the theme. Once you find itindex.htmlFile, you can start editing it to add the display logic for the latest article.

Step two: UnderstandarchiveListThe core usage of tags

AnQiCMS providedarchiveListLabel, this is a core tool for retrieving article lists. In order to display the latest published articles on the homepage, we need to configure this label to retrieve content under a specific model (usually the 'article model') and sort it in descending order by publication time.

archiveListThe tag has several key parameters, which are crucial for displaying the latest article.

  • moduleIdSpecify which content model's articles to retrieve. In AnQiCMS, the 'article model' usually corresponds tomoduleIdWith1. If you have a custom article model, please set it according to the actual model ID in the background "Content Management" -> "Content Model".
  • order: Defines the sorting method of articles. To display the most recently published articles, we usually useid desc(Sorted by article ID in descending order, with newer article IDs being larger) orCreatedTime desc(Sorted by creation time in descending order). Both can achieve the effect of displaying the latest articles,id descusually more concise.
  • limit: Controls the number of articles to display. For example,limit="5"will display the latest 5 articles.
  • type: Usually set tolistIt indicates getting a simple list of articles, not a list with pagination features (the home page usually does not need pagination).

Combine these parameters, the basic structure of the latest article list call is as follows:

{% archiveList latestArticles with moduleId="1" order="id desc" limit="5" type="list" %}
    {% for article in latestArticles %}
        <!-- 在这里编写每篇文章的展示HTML结构 -->
    {% endfor %}
{% endarchiveList %}

In this code block,latestArticlesIs a custom variable name used to store the latest article data you can accessforthrough the looparticleVariables to access the details of each article.

Step 3: Build the display structure of the article.

In{% for article in latestArticles %}Within the loop, we can usearticleVariables to access various attributes of each article and present them on the web. Common article attributes include:

  • article.Title: Article title
  • article.Link: Article detail page link
  • article.Description: Article summary or introduction
  • article.CreatedTime: Article publish time (timestamp format)
  • article.Thumb: Article thumbnail address
  • article.CategoryId: Article category ID

Let's gradually improve the article display structure:

  1. Display article title and link:

    <h3><a href="{{ article.Link }}" title="{{ article.Title }}">{{ article.Title }}</a></h3>

  2. Format the display time:AnQiCMS providedstampToDateThe label can convert the timestamp into a readable date and time string. The date formatting method in the Go language is quite special, for example2006-01-02 15:04:05represent年-月-日 时:分:秒.

    <p class="article-meta">发布于：<span>{{ stampToDate(article.CreatedTime, "2006年01月02日") }}</span></p>

  3. Show article summary:

    <p class="article-description">{{ article.Description }}</p>

    Herearticle.DescriptionIf you do not manually fill in the summary when publishing an article in the background, the system will automatically extract a part of the article content as a summary.

  4. Show article thumbnail:If the article is set to have a thumbnail, it can be displayed to increase visual appeal.

    {% if article.Thumb %}
    <div class="article-thumbnail">
        <a href="{{ article.Link }}" title="{{ article.Title }}">
            <img src="{{ article.Thumb }}" alt="{{ article.Title }}">
        </a>
    </div>
{% endif %}

  5. Display the category of the article:You can combinecategoryDetailLabel, based onarticle.CategoryIdRetrieve and display the category name and category link of the article.

    {% if article.CategoryId %}
    所属分类：<a href="{% categoryDetail with name='Link' id=article.CategoryId %}">{% categoryDetail with name='Title' id=article.CategoryId %}</a>
{% endif %}

Complete example code

Combine all elements above, and you can get a relatively complete list display area of the latest articles. You can place it in the homepage template (index.html) at the position you want to display.

<section class="latest-articles-section">
    <h2>最新动态</h2>
    <ul class="articles-list">
        {% archiveList latestArticles with moduleId="1" order="id desc" limit="5" type="list" %}
            {% for article in latestArticles %}
                <li class="article-item">
                    <div class="item-inner">
                        {% if article.Thumb %}
                            <div class="article-thumbnail">
                                <a href="{{ article.Link }}" title="{{ article.Title }}">
                                    <img src="{{ article.Thumb }}" alt="{{ article.Title }}">
                                </a>
                            </div>
                        {% endif %}
                        <div class="article-content">
                            <h3><a href="{{ article.Link }}" title="{{ article.Title }}">{{ article.Title }}</a></h3>
                            <p class="article-meta">
                                <span>发布于：{{ stampToDate(article.CreatedTime, "2006年01月02日") }}</span>
                                {% if article.CategoryId %}
                                    <span>所属分类：<a href="{% categoryDetail with name='Link' id=article.CategoryId %}">{% categoryDetail with name='Title' id=article.CategoryId %}</a></span>
                                {% endif %}
                            </p>
                            <p class="article-description">{{ article.Description|truncatechars:100 }}</p> {# 截取前100个字符 #}
                            <a href="{{ article.Link }}" class="read-more-btn">阅读全文 &raquo;</a>
                        </div>
                    </div>
                </li>
            {% empty %}
                <li class="no-content-message">目前还没有发布的文章，敬请期待！</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

Please note:in the above codeclassproperties such aslatest-articles-section,articles-listmerely are