How to display the latest published article list on the homepage of AnQiCMS?

The homepage is the first impression visitors get when they arrive at the website. A timely updated list of the latest articles can effectively enhance the website's activity and user stickiness.For users of AnQiCMS, displaying the list of latest published articles on the homepage is a basic and important feature, which can be easily achieved through the flexible template tags provided by the system.

AnQiCMS offers an intuitive template system with its efficient and customizable features.You do not need to delve deeply into complex backend code, just master the 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 being used by the website. Usually, the template files of Anqi CMS are located in the root directory of your website./template/Inside the folder. You will find a folder named after your topic (e.g.,default), after entering the folder, the home page template file is usually namedindex.htmlor located inindex/index.html.

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

Step 2: UnderstandarchiveListThe core usage of tags

AnQiCMS providesarchiveListLabel, this is the core tool for getting the list of articles.To display the latest published articles on the homepage, we need to configure this tag to fetch content under a specific model (usually the 'Article Model') and sort it in descending order of publication time.

archiveListThere are several key parameters for the label, which are crucial for displaying the latest articles:

  • moduleIdSpecify which content model's articles to retrieve. In AnQiCMS, the 'article model' usually corresponds tomoduleIdresponse for1If you have a custom article model, please set it according to the actual model ID in the background "Content Management" -> "Content Model".
  • orderDefine the sorting method of the article. To display the most recently published articles, we usually useid desc(sorted by article ID in descending order, newer article IDs are larger) orCreatedTime desc(Sorted by creation time in descending order). Both can achieve the effect of displaying the latest articles.id descis usually more concise.
  • limit: Controls the number of articles to display. For example,limit="5"the latest 5 articles will be displayed.
  • type: Typically set tolist, indicating to retrieve a simple list of articles without pagination functionality (the homepage usually does not require pagination).

Combining these parameters, a basic latest article list call structure 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,latestArticlesis a custom variable name used to store the latest article data you get, you canforin the loop byarticleAccess the detailed information of each article using a variable.

Step 3: Build the display structure of the article.

In{% for article in latestArticles %}Within the loop, we can usearticleAccess each article's various properties and display them on the web page. Common article properties include:

  • article.Title: Article title
  • article.Link: Article detail page link
  • article.Description: Article abstract or summary
  • 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 of the publish time:AnQiCMS providesstampToDateTags, which can format timestamps into readable date and time strings. The date formatting method in 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. Display article summary:

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

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

  4. Display article thumbnail:If the article has set a thumbnail, it can be displayed to enhance 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 the article belongs to:You can combinecategoryDetailtags, 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 latest article list display area. You can place it at the location you want to display in the homepage template.index.html)

<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 code:classproperty (such aslatest-articles-section,articles-listetc) is only for