In AnQiCMS, flexibly displaying website content is the key to improving user experience and website functionality.Whether you are operating 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 category content under a specific category on a certain page.AnQiCMS's powerful template tag system, especiallyarchiveListLabel, can help you easily achieve this goal.
AnQiCMS with its efficient architecture based on the Go language and rich feature set provides 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 background in development.
Let's explore together how to obtain and elegantly display the list of articles under a specific category or multiple categories on your AnQiCMS site.
Get to know the core tools:archiveListTag
To obtain the list of articles,archiveListIs the label you need to master first. It is very flexible, able to filter and sort articles according to various conditions. Its basic usage form is in{% archiveList 变量名 with 参数 %}and{% endarchiveList %}between, throughfora loop to iterate over the obtained article data.
For example, you want to get a list of articles under a category, the most critical parameter iscategoryId. This parameter allows you to specify one or more category IDs to precisely control which categories of 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 the 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 named:articlesThe variable is used to store the query results.categoryId="1"Specified to retrieve articles under the category with ID 1,limit="5"Limited to displaying only the latest 5 articles,order="id desc"and ensure that these articles are sorted in descending order by ID (i.e., the most recent published).forThe loop will iterate overarticleseach article,item.Link/item.Title/item.Descriptionwhich 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.
Get articles under multiple categories
If you need to display articles from the 'Company News' (ID: 1), 'Industry Dynamics' (ID: 2), and 'Tech Sharing' (ID: 3) categories mixed on a page, categoryIdThe parameter is also supported. You only need to separate multiple category IDs with an English comma,and you can do so.
<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 will alsoorderchange the parameter toviews descSo the list will be sorted from high to low according to the article's viewing volume, helping you display popular content.
It is worth mentioning that inforWithin the loop, we also used{% categoryDetail with name="Title" id=item.CategoryId %}. This trick allows you to display the name of the category of each article next to it, greatly enhancing the navigation and user experience of the content.item.CategoryIdDynamically provides the current article's category ID,categoryDetailThe tag then retrieves the category name based on this ID.
Deep customization and pagination display
In addition to basic category filtering,archiveListThe tag also provides more flexible parameters, making your article list more dynamic.
moduleIdIf you define multiple content models (such as "article model" and "product model") in the AnQiCMS background, you canmoduleId="1"(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"Display 10 articles, or you can also use the offset mode, such aslimit="2,10"Indicates starting from the 3rd article and displaying 10 articles.order: Defines the sorting method of articles, excluding.id desc(Latest) andviews desc(Hot), you can also useorder="sort desc"(Custom sorting in the background) and others.flag: Filter articles based on the recommended attributes set in the background of the article (such as headline[h], recommendation[c], etc.). For exampleflag="c"Only show articles marked as 'recommended'.type="page"withpaginationCombined use of tagsWhen the number of articles is large and needs to be displayed in pages,archiveListoftypethe parameter topageThen you can usepaginationtags to generate pagination navigation.
This is an example of an article list that combines pagination features:
<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 in pages,limit="8"Indicates that 8 articles are displayed per page.pagination pages with show="5"It will generate a pagination navigation bar that displays up to 5 page numbers, and provides links for "Previous page", "Next page", and each page number. You can according topageItem.IsCurrentTo determine the current page and add styles to it.
Summary
The template tag system of AnQiCMS provides great convenience to content operators. By using it flexibly,archiveList/categoryDetail/paginationTags, you can easily get and display the list of articles under a specific category (or multiple categories) at any location on the website, and sort, control the number, and display pagination according to your needs.These features not only help you better organize website content and improve SEO effects, but also bring visitors a smoother, more personalized browsing experience.
Frequently Asked Questions (FAQ)
Q1: I have set upcategoryIdandlimitWhy is the parameter, but the article list is not displayed or the number of displayed articles is incorrect?
A1:Please check several aspects:
- Is the category ID correct?Make sure the category ID you see in the background matches the ID used in the template.
- Has the article been published?Articles with the status "Published" will be displayed on the front end. Drafts or scheduled articles that have not yet 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 use both
moduleIdPlease make sure that the ID matches your