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

In the Auto CMS, the homepage carries the important responsibility of attracting visitors and displaying the latest news.Generally, displaying the latest published article list prominently on the homepage is an effective way to enhance user experience and guide content browsing.The Anqi CMS, with its flexible template system and powerful content management features, makes this operation very direct and efficient.

Understanding the content structure of Anqi CMS

Before we start displaying the latest articles, we first need to have a basic understanding of the content organization method of the Anqi CMS.The 'Content Model' allows users to define different types of content, such as 'Article Model', 'Product Model', and so on.Each article belongs to a specific model and can be further categorized into different classifications.On the template level, Anqi CMS provides a rich set of tags to help us extract and display the required data from these structured contents.

The core method to display the latest article list on the homepage

To display the latest published articles on the homepage, we will mainly rely on the security CMS provided byarchiveListTemplate tag. This tag is specifically used to obtain the list data of various documents (including articles) and provides various parameters to accurately control the content we want to display.

First, make sure your homepage template file (usually/template/你的模板名/index.html) is ready. Then, add it to the location where you want to display the article list.archiveListLabel.

Key parameter parsing:

  • moduleIdThis parameter is used to specify which content model article you want to get. By default, the article model is usually corresponding to themoduleIdresponse for1. If you have customized the content model, please check the corresponding ID of your article model in the background under "Content Management -> Content Model".
  • orderTo get the "latest published" articles, we need to sort them in descending order of publication time. You can setorder="id desc"ororder="CreatedTime desc".id descusually means sorting the articles in reverse order of their creation in the database.CreatedTime descThen it is explicitly in reverse chronological order of publication. In actual use, both may have similar effects, butCreatedTime descexpresses "latest release" more accurately.
  • limitThis parameter is used to control the number of displayed articles. For example,limit="10"The most recent 10 articles will be displayed.
  • type: By default,archiveListTagstypeparameter settings"list"It will list the specified number of articles directly.

How to build an article list:

archiveListTags will create an iterable article array inside. We can useforProcess each article one by one in a loop, and extract the title, link, publication time, abstract, or thumbnail information for each article to display. Each article is usually named in the loop.item，you can accessitem.Title/item.Linketc.

The time of article publication is returned as a timestamp by the SafeCMS. To display it in the date format we are accustomed to, we need to usestampToDateThe label is formatted. This label is very flexible and can output various date and time styles based on the format string you provide.

Example code and explanation

Here is a simple code example of displaying the latest 5 articles on the Anqi CMS home page:

<section class="latest-articles">
    <h2>最新发布</h2>
    <ul class="article-list">
        {% archiveList archives with moduleId="1" order="CreatedTime desc" limit="5" %}
            {% for item in archives %}
                <li class="article-item">
                    <a href="{{ item.Link }}" title="{{ item.Title }}">
                        {% if item.Thumb %}
                            <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
                        {% endif %}
                        <h3>{{ item.Title }}</h3>
                        <p class="article-meta">发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</p>
                        <p class="article-description">{{ item.Description|truncatechars:100 }}</p>
                    </a>
                </li>
            {% empty %}
                <li class="no-articles">目前还没有最新文章发布。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

Code interpretation:

  1. {% archiveList archives with moduleId="1" order="CreatedTime desc" limit="5" %}:
    • Here is a definition of a namedarchivesThe variable, it will contain the article list we get.
    • moduleId="1"Specified that we are getting the content under the 'Article Model'.
    • order="CreatedTime desc"Ensure that the articles are sorted from new to old by publishing time.
    • limit="5"Limited to displaying the latest 5 articles.
  2. {% for item in archives %}Loop through:archivesEach article in. The data of the current article can be accessed throughitemvariable.
  3. {% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">{% endif %}：This part of the code checks if the article has a thumbnail image.item.Thumb)，If there is one, display this image.
  4. <h3>{{ item.Title }}</h3>：Display the article's title.
  5. <p class="article-meta">发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</p>:
    • item.CreatedTimeGet the article's publication timestamp.
    • stampToDate(..., "2006-01-02")Translate timestamp to a string in the format of 'Year-Month-Date'. You can modify the format string as needed, for example"2006年01月02日 15:04"It will display more detailed time information.
  6. <p class="article-description">{{ item.Description|truncatechars:100 }}</p>: Display the summary of the article (item.Description）。Here usedtruncatechars:100Filter, truncates the summary to a maximum of 100 characters, and automatically adds an ellipsis to prevent the content from being too long and affecting the layout.
  7. {% empty %}<li class="no-articles">目前还没有最新文章发布。</li>{% endfor %}This is a very practical structure. IfarchivesThe list is empty (i.e., no articles meet the criteria), it will displayemptythe content in the block instead of displaying an empty list.

**Practical Suggestions and Optimization**

  • Control the number of displayed items：Home page article list should not be too long, generally 5-10 articles are enough, too many articles may affect page loading speed and user attention.
  • Optimize image loadingIf your article has many thumbnails, consider adding the lazy load attribute to the images to improve the speed of the first screen loading.The CMS of Anqi supports lazy loading of images in content details.
  • Improve article contentEnsure each article has a clear title, an attractive thumbnail, and a concise summary. These elements are crucial for increasing the click-through rate of the article list.
  • SEO-friendlyThe article's title and link are both important components of search engine optimization, ensureitem.Titleanditem.LinkUsing them correctly helps search engines better understand your content.

By following these steps, you can easily display the latest list of published articles on the homepage of the Anqi CMS website.The template tag feature of AnQi CMS is powerful and intuitive, making content display very flexible.

Common Questions (FAQ)

1. Can I display the latest articles under a specific category on the homepage?

Of course you can. You canarchiveListtag.categoryIdParameters to specify the ID of one or more categories. For example, to display the latest articles with category ID 2, you can modify the tag to: {% archiveList archives with moduleId="1" categoryId="2" order="CreatedTime desc" limit="5" %}English. If you want to display multiple categorized articles, separate the IDs with commas, likecategoryId="2,3,4".

English. If my article does not have an uploaded thumbnail, what will be displayed?

In AnQi CMS, if you do not manually upload a thumbnail when publishing an article, but the article content contains images, the system will automatically try to extract the first image in the article content as a thumbnail. If there are no images in the article content either, then in the templateitem.Thumboritem.LogoWill be empty, you can through{% if item.Thumb %}Such a judgment to avoid displaying a broken image link, or set a default placeholder to ensure the beauty of the page.

3. How to adjust the display format of the article publish time?

The display format of the article publish time is bystampToDateThe second parameter (format string) of the label decides. This format string follows the Go language's date formatting rules. For example:

  • "2006-01-02"Is displayed as年-月-日(such as2023-10-27)
  • "2006年01月02日"Is displayed asXXXX年XX月XX日(such as2023年10月27日)
  • "2006-01-02 15:04"Is displayed as年-月-日 时:分(such as2023-10-27 14:30) You can modify this format string according to your needs to achieve the desired display effect.