In the Aanqi CMS, the homepage often plays a crucial role in displaying the latest content and attracting visitors' attention. If you want to clearly list the titles and brief introductions of the latest 10 articles on the homepage,archiveListThe label is a powerful tool to achieve your goals. It is flexible and easy to use, allowing you to easily present dynamic content in the most prominent position on the website.
To display the latest 10 article titles and summaries on the homepage, we need to utilizearchiveListSeveral core parameters of the label to filter and display data.This tag is typically used to retrieve lists of various documents, whether articles, products, or other custom content models, it can always be put to good use.
Firstly, you need to open the homepage template file of your website. Depending on the organization of your template, this may betemplate/your_template_name/index/index.htmlortemplate/your_template_name/index.html.
We will construct in this way in the template filearchiveListTags:
{% archiveList archives with type="list" limit="10" order="id desc" moduleId="1" %}
{% for item in archives %}
<div class="latest-article-item">
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p>{{item.Description|safe}}</p>
<span class="article-date">发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<a href="{{item.Link}}" class="read-more">阅读详情</a>
</div>
{% empty %}
<p>暂时没有文章可供展示。</p>
{% endfor %}
{% endarchiveList %}
Let's analyze this code step by step, and see what each parameter and part is used for:
{% archiveList archives with ... %}: ThisarchiveListThe start of a tag,archivesIt is the variable name we give to the list of articles obtained. Inside the tag, we pass various parameters through the keyword.withThe keyword is used to pass various parameters.type="list": This parameter specifies that we are getting a fixed number of lists, not a paginated list. Because we specifically want to display 10,listthe type is more suitable.limit="10"This is the key to controlling the display of article numbers. It is set to10which means only the latest 10 articles are obtained.order="id desc"This parameter determines the sorting method of the articles.id descmeans to sort by article ID in reverse order.In AnQi CMS, the article ID is usually auto-incremented, so the larger the ID, the later the article was published, which ensures that the latest published articles are obtained.order="CreatedTime desc"It will be sorted in reverse order according to the creation time of the article, with a similar effect.moduleId="1": Secure CMS supports various content models (such as articles, products, single pages, etc.).moduleId="1"English translation: Usually used to specify that we only want to get the content under the "Article Model".If your article model ID is not 1, please adjust it according to the actual situation. You can view or edit the model ID in the background under "Content Management" -> "Content Model".{% for item in archives %}: This is a loop statement, it will iteratearchiveListthe data of each article retrieved by the tag, and assign the data of the current article toitema variable.<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>In the loop, we useitem.Titleto get the title of the article, and useitem.LinkGenerate a link to the article detail page.<p>{{item.Description|safe}}</p>:item.DescriptionIt is the summary of the article. Here an extra usage has been made.|safeFilter. If the article summary may contain HTML tags (such as bold, italic, etc.),|safeThe filter ensures that these HTML tags are parsed correctly instead of being displayed as plain text.<span class="article-date">发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>:item.CreatedTimeIs the creation time of the article (a timestamp). We usestampToDate函数将其格式化为易于阅读的日期格式，例如“2006-01-02”会显示为“2023-10-27”。{% empty %}: IfarchiveListLabel did not find any articles that match the criteria (for example, the website has just been set up and no articles have been published),emptyLabel content will be displayed, which is a friendly user prompt.{% endfor %}and{% endarchiveList %}: They are loop andarchiveListthe end tag.
Place this code in the appropriate position of your homepage template, save it, and then refresh your website homepage. You should be able to see the latest 10 article titles and summaries neatly arranged on the page.You can add CSS styles to these elements based on your own website design to make them look more aesthetically pleasing.
Common Questions (FAQ)
How to only display the latest 10 articles under a specific category, rather than the latest articles from the entire site?
If you want to only display the latest article under a specific category,archiveListtags incategoryIdFor example, if you want to display categories with ID:5[The article, you can modify the code to:]
{% archiveList archives with type="list" limit="10" order="id desc" moduleId="1" categoryId="5" %}
{# ... 循环内容不变 ... #}
{% endarchiveList %}
You can find the corresponding category ID in the "Content Management" -u003e "Document Category" section of the AnQi CMS backend. If you need to display articles from multiple categories, the IDs can be separated by commas, for example,categoryId="5,8,12".
2. How can I display not the latest articles but the top 10 articles with the highest views?
To display the articles with the highest views, you just need to modifyorderthe parameter. Just putorder="id desc"toorder="views desc",viewsRepresents the number of page views for an article.
{% archiveList archives with type="list" limit="10" order="views desc" moduleId="1" %}
{# ... 循环内容不变 ... #}
{% endarchiveList %}
This is,archiveListTags will be sorted from high to low according to the number of page views of the articles, thus displaying the 10 most popular articles on the website.
3.type="list"andtype="page"What are the differences, when should it be usedtype="page"?
type="list"Used to get a fixed number of article lists, just like what we do in this example.It will not automatically generate pagination navigation, suitable for use in sidebar, home page fixed area, and other places that need to display a small number of articles.
type="page"Then it is used to get a list of articles that can be paginated. When you need to display a large number of articles on a single page and want to browse more content through 'Previous page', 'Next page', or page number jumps, then it should be used.type="page".配合paginationtags,type="page"Automatically handles pagination logic, generates pagination links. For example, on article list pages or search result pages,type="page"It is the more suitable choice.