How to loop and display the latest 10 articles in the template?
As an experienced CMS website operation personnel, I fully understand the core position of content in website operation.Dynamic display of the latest content not only improves user experience, but also effectively increases the activity of the website and the frequency of search engine crawling.Below, I will elaborate on how to loop and display the list of the latest 10 published articles in the AnQiCMS template.
Display the latest 10 articles in the AnQiCMS template loop
In AnQiCMS, the creation and management of templates follow a set of simple and efficient rules, with syntax similar to the Django template engine, making it easy for front-end developers to get started.To dynamically display the latest 10 articles on the website page, we need to use the built-in template tags and loop structure of AnQiCMS.
The template files of AnQiCMS are usually named with.htmlsuffix and stored in/templateIn the specific template folder under the directory. Static resources such as styles, scripts, and images are placed in/public/static/directory. Variables are used with double curly braces in template files.{{变量}}Definition, while logical tags such as conditional judgment and loop control use single curly braces and the percent sign{% 标签 %}Definition, and it requires using end tags to close, for example{% for ... %}required{% endfor %}.
To obtain the article list, we mainly rely on the AnQiCMS providedarchiveListThe tag is a powerful tool for obtaining lists of articles, products, and other content.By reasonably configuring its parameters, we can accurately control the quantity, sorting method, and category of the required content.
Firstly, we need to use in the template file where we want to display the latest articles,archiveListTags to retrieve data. This tag allows us to specify multiple conditions to filter articles, the most critical of which is limiting the number and sorting method.In order to get the latest 10 published articles, we willtypethe parameter to"list"(indicating to get a list instead of pagination),limitthe parameter to"10"(limiting to get 10 articles), and useorderthe parameter specifies the sorting method as"CreatedTime desc"This means that the articles will be sorted in descending order by creation time, ensuring that the most recently published articles are at the top. In addition,moduleIdThe parameter is used to specify the content model, articles usually use the default article model ID, generally no special specification is required or filled according to actual configuration.
{# 获取最新发布的10篇文章 #}
{% archiveList archives with type="list" limit="10" order="CreatedTime desc" %}
{# 检查是否有文章存在，如果列表为空，则显示“没有内容” #}
{% for item in archives %}
<div class="latest-article-item">
{# 文章标题及链接 #}
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
{# 文章发布时间，使用stampToDate标签格式化 #}
<p class="article-date">发布于：{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</p>
{# 文章简介 #}
<p class="article-description">{{ item.Description }}</p>
{# 如果文章有缩略图，则显示 #}
{% if item.Thumb %}
<div class="article-thumbnail">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
</div>
{% endif %}
{# 可以根据需要添加更多文章信息，例如分类、浏览量等 #}
<p class="article-meta">
{% if item.CategoryId %}
{# 获取文章所属分类的名称和链接 #}
<span>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
{% endif %}
<span>浏览量：{{ item.Views }}</span>
</p>
</div>
{% empty %}
<p>目前还没有任何最新文章发布。</p>
{% endfor %}
{% endarchiveList %}
In the above code,{% archiveList archives with type="list" limit="10" order="CreatedTime desc" %}This line of code is the core, it retrieves the article data that meets the conditions from the database and stores the result in a variable namedarchives. Then,{% for item in archives %}Loop through thisarchivesThe array, each loop will assign the data of the current article toitemVariable.
We can access inside the loopitemThe various properties of the object to display the detailed information of the article, such as{{ item.Title }}Get the article title,{{ item.Link }}Get the link to the article detail page,{{ item.Description }}Get the article summary. Specifically,{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}This line of code shows how to usestampToDatetags to format Unix timestamps into readable dates and times. Among them,"2006-01-02 15:04"Is a date formatting string unique to Go language. We also pass{% if item.Thumb %}Determine if the article has a thumbnail and display it. By nestingcategoryDetailTags, can obtain the name and link of the category of each article.
IfarchiveListThe list of articles obtained is empty,{% empty %}The content within the tag will be executed, providing friendly prompt information. Finally,{% endarchiveList %}and{% endfor %}Tags are used to closearchiveListandforLoop.
In practice, be sure to place the above code snippet in your AnQiCMS template file (for exampleindex.htmlor you define a certain public snippet file). At the same time, please ensure that your template file uses UTF-8 encoding to avoid garbled characters issues.Any modification to the template file may require you to click the "Update Cache" button in the background management interface to ensure that the content of the front-end page is refreshed in a timely manner.In this way, your website can dynamically display the latest and most attractive content, thus better serving your readers.
Frequently Asked Questions (FAQ)
How to modify the number of displayed articles or adjust the sorting method?
You can adjust byarchiveListin the labellimitandorderParameters can easily be implemented. For example, if you want to display 5 articles, you can setlimit="10"changed tolimit="5". If you wish to sort the articles by the number of views in descending order (the most popular articles), you canorder="CreatedTime desc"changed toorder="views desc". These parameters provide great flexibility to meet your different content display needs.
How do I display the latest articles under a specific category?
InarchiveListthe tag withcategoryIdJust use the parameter. For example, if you only want to display the latest articles of category ID 10, you can setarchiveListthe tag to{% archiveList archives with type="list" limit="10" order="CreatedTime desc" categoryId="10" %}. You can also separate multiple category IDs with a comma, such ascategoryId="10,12,15", to display the latest articles under multiple specified categories.
3. Can this code be used to display other content models besides articles, such as the latest products?
Can be. The design of AnQiCMS allows the reuse of the same list tags for different content models. If you want to display the latest products, you need to know the corresponding product model formoduleId. Usually, the article model'smoduleIdis 1, the product modelmoduleIdis 2 (specific values please refer to your AnQiCMS backend content model configuration). Just set thearchiveListput in the tag.moduleIdparameter to the product model's ID, for example{% archiveList products with type="list" limit="10" order="CreatedTime desc" moduleId="2" %}, and thenarchivesVariable name changedproducts(or any name you like) to keep the code clear, you can display the latest product list.