In AnQiCMS, flexibly displaying website content is the key to improving user experience and website functionality.Whether you are running a corporate website, a personal blog, or a marketing site, you often encounter the need to display a list of the latest articles, popular products, or multiple related categories on a specific page.archiveListLabels, help you easily achieve this goal.
AnQiCMS with its efficient architecture based on Go language and rich feature set, provides a solid support for content management.Its template engine syntax is concise and efficient, similar to the style of Django, allowing you to achieve complex content display logic through simple tag combinations even if you do not have a deep development background.
Next, let's explore how to retrieve and elegantly display a list of articles under a specific category or multiple categories on your AnQiCMS site.
Understanding Core Tools:archiveListtags
To retrieve the list of articles,archiveListIt is the first tag you need to master. It is very flexible and can filter and sort articles based on various conditions. Its basic usage form is in{% archiveList 变量名 with 参数 %}and{% endarchiveList %}between, throughforto iterate over the retrieved article data.
For example, you want to get a list of articles under a category, the most core parameter iscategoryIdThis parameter allows you to specify one or more category IDs to precisely control which categories' articles are displayed.
Get the list of articles under a single category
Assuming you have a "Company News" category with ID 1. To display the latest articles under this category on the page, you can write template code like this:
<section class="latest-news">
<h2>公司新闻</h2>
<ul>
{% archiveList articles with categoryId="1" limit="5" order="id desc" %}
{% for item in articles %}
<li>
<a href="{{ item.Link }}" title="{{ item.Title }}">
<h3>{{ item.Title }}</h3>
<p>{{ item.Description|truncatechars:100 }}</p>
<span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</a>
</li>
{% empty %}
<li>当前分类下没有找到任何文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</section>
This code first declares a variable namedarticlesto store the query results.categoryId="1"Specifically specifies the articles under the category with ID 1,limit="5"limiting to display only the latest 5 articles,order="id desc"Then ensure that these articles are sorted in descending order by ID (i.e., the most recent published).forThe loop will iterate over one by onearticleseach article,item.Link/item.Title/item.DescriptionThis can help you display the basic information of the article. If there are no articles under this category,{% empty %}the content within the tag will be displayed.
to get the article list under multiple categories
If you need to display articles from the 'Company News' (ID: 1), 'Industry News' (ID: 2), and 'Technical Sharing' (ID: 3) categories on a single page,categoryIdThe parameter also supports. You only need to separate multiple category IDs with English commas.,and they will be separated by commas.
<section class="mixed-articles">
<h2>精选文章</h2>
<ul>
{% archiveList articles with categoryId="1,2,3" limit="10" order="views desc" %}
{% for item in articles %}
<li>
<a href="{{ item.Link }}" title="{{ item.Title }}">
<h4>{{ item.Title }}</h4>
<!-- 在这里，我们可以获取并显示文章所属分类的名称 -->
<span class="category-name">分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>浏览量：{{ item.Views }}</span>
</a>
</li>
{% empty %}
<li>没有找到任何精选文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</section>
In this example,categoryId="1,2,3"Tell the system to look for articles in these three categories. We have also changed the parameter toorder.views descEnglish translation: Such a list will sort the article views from high to low, helping you display popular content.
It is worth mentioning that inforthe loop, we also used{% categoryDetail with name="Title" id=item.CategoryId %}This trick allows you to display the name of the category to which each article belongs on the side of the article, greatly enhancing the navigation and user experience of the content.item.CategoryIdIt will dynamically provide the current article's category ID.categoryDetailTags are used to get the category name based on this ID.
Deep customization and pagination display.
In addition to basic category filtering,archiveListTags also provide more flexible parameters, making your article list more dynamic.
moduleId：If you have defined multiple content models (such as "article model" and "product model") in the AnQiCMS background,moduleId="1"English: (usually 1 represents the article model) to specify which model's content you want to retrieve.limit: Controls the number of articles displayed. For examplelimit="10"Displaying 10 articles, you can also use the offset mode, such aslimit="2,10"Representing starting from the 3rd article and displaying 10 articles.order: Defines the sorting method of articles, except forid desc(newest) andviews desc(hotest), you can also useorder="sort desc"(custom sorting by admin) and so on.flagBased on the recommended attributes set in the background of the article (such as头条[h], 推荐[c] etc.) to filter articles. For exampleflag="c"Only display articles marked as "recommended".type="page"WithpaginationTags can be used togetherWhen the number of articles is large and pagination is needed,archiveListoftypeparameter settingspageThen you can usepaginationtags to generate pagination navigation.
This is an example of an article list that combines pagination functionality:
<section class="paginated-articles">
<h3>最新动态（分页）</h3>
{% archiveList articles with categoryId="4" moduleId="1" type="page" limit="8" order="id desc" %}
{% for item in articles %}
<article>
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" onerror="this.style.display='none';">
<h5>{{ item.Title }}</h5>
<p>{{ item.Description|truncatechars:120 }}</p>
<small>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</small>
</a>
</article>
{% empty %}
<p>这个分类下暂时没有可显示的文章。</p>
{% endfor %}
{# 分页导航 #}
<div class="pagination-nav">
{% pagination pages with show="5" %}
{% if pages.PrevPage %}
<a href="{{ pages.PrevPage.Link }}" class="page-link">上一页</a>
{% endif %}
{% for pageItem in pages.Pages %}
<a href="{{ pageItem.Link }}" class="page-link {% if pageItem.IsCurrent %}active{% endif %}">{{ pageItem.Name }}</a>
{% endfor %}
{% if pages.NextPage %}
<a href="{{ pages.NextPage.Link }}" class="page-link">下一页</a>
{% endif %}
{% endpagination %}
</div>
{% endarchiveList %}
</section>
In this example,type="page"it indicates that we need to display pagination,limit="8"Representing showing 8 articles per page.pagination pages with show="5"Then a pagination navigation bar showing up to 5 page numbers will be generated, and it provides "Previous pagepageItem.IsCurrentTo judge the current page and add styles to it.
Summary
AnQiCMS's template tag system provides great convenience for content operators. By using it flexiblyarchiveList/categoryDetail/paginationTags such as these, you can easily get and display a list of articles under a specific category (or multiple categories) at any location on the website, and sort, control the number of items, and display pagination according to your needs.These features can not only help you better organize website content and improve SEO effectiveness, but also bring visitors a smoother and more personalized browsing experience.
Frequently Asked Questions (FAQ)
Q1: I have setcategoryIdandlimitParameter, but the article list is not displayed or the number of displayed articles is incorrect. Why is that?
A1:Please check several aspects:
- Is the category ID correct?Make sure that the category ID you see in the background is completely consistent with the ID used in the template.
- Has the article been published?Only articles with the status "Published" will be displayed on the front end. Drafts or scheduled articles that have not reached the scheduled time will not be displayed.
- Is the number of articles sufficient?If you set
limit="5"But there are only 3 articles in this category, so only 3 will be displayed naturally. - Does the content model match?If you have used
moduleIdparameters, please make sure that the ID matches your