In AnqiCMS, flexibly displaying website content is the key to improving user experience and meeting operational needs.Whether you want to highlight the latest articles on the homepage, or display popular products in the sidebar, or customize content lists for specific columns, the powerful document list tags of AnqiCMS can help you a lot.By cleverly using these tags, you can easily achieve a diverse presentation of content, making your website more vibrant and attractive.
Core tags:archiveListThe strength of it
AnqiCMS's template system providesarchiveListThis is the core tag, it is a universal tool for you to get and display lists of various documents (articles, products, etc.)This tag can not only filter content based on multiple conditions, but also control the sorting method, display quantity, and even handle pagination logic.Understand and use proficientlyarchiveListwhich will greatly enhance your freedom in website content layout.
Display the latest content: allow visitors to always grasp the dynamics.
Do you want to display the latest articles or products in a prominent position on the website to attract user attention?archiveListThe label sorting function can easily achieve this. Usually, we can sort in descending order by the document's publication time (i.e., ID) to ensure that the latest content is at the top.
You can set it up like this to get the latest article list:
{% archiveList latestArticles with moduleId="1" order="id desc" limit="5" %}
{% for item in latestArticles %}
<div class="article-item">
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
<p>{{ item.Description|truncatechars:80 }}</p> {# 截取前80个字符并添加省略号 #}
<span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</a>
</div>
{% endfor %}
{% endarchiveList %}
In this code block:
moduleId="1"Specify the article model we need to retrieve (if you want to display the latest product, you can change it to the corresponding product model ID).order="id desc"Tell the system to sort by ID in descending order, usually the larger the ID represents a later release time, thus achieving the effect of "latest."limit="5"Limit to displaying only the latest 5 articles.stampToDate(item.CreatedTime, "2006-01-02")It is a very useful time formatting function that can convert timestamps into easily readable date formats.
Show popular content: Insight into user interests.
Understanding what content is most popular and showcasing it is an effective strategy for increasing website interaction rates.AnqiCMS records the number of views for each document, and we can use this data to filter popular content.
To display popular articles or products, you can useorder="views desc"parameters to sort in descending order by views:
{% archiveList hotProducts with moduleId="2" order="views desc" limit="4" %}
{% for item in hotProducts %}
<div class="product-card">
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
<h4>{{ item.Title }}</h4>
<p>浏览量: {{ item.Views }}</p>
</a>
</div>
{% endfor %}
{% endarchiveList %}
Here:
moduleId="2"Assuming 2 is the ID of the product model.order="views desc"Present content sorted by views from high to low, showing the most popular content.item.ThumbUsed to get product thumbnails, making the list display more intuitive.
Display content of specified categories: precisely targeting the target audience.
Website content is usually organized into different categories, such as "Company News", "Industry Dynamics", or "Product Solutions", etc. AnqiCMS'sarchiveListTags allow you to precisely specify which or which categories of content to display.
Assume you want to display articles under the 'Company News' category (category ID 3) on a page, you can do it like this:
{% archiveList companyNews with moduleId="1" categoryId="3" limit="6" %}
{% for item in companyNews %}
<div class="news-item">
<a href="{{ item.Link }}">
<h5>{{ item.Title }}</h5>
<p>{{ stampToDate(item.CreatedTime, "2006-01-02") }}</p>
</a>
</div>
{% endfor %}
{% endarchiveList %}
If you want to display articles from multiple categories at the same time (for example, ID 3 and 5), just separate the category IDs with a comma:categoryId="3,5".
Additionally,categoryIdThe parameter is not specified, it will default to obtaining the current page's category ID, which is very suitable for directly calling articles under the current category on the category list page. If you do not want to obtain the content of the subcategories, you can also addchild=falseParameter.
Display recommended attribute content: highlight operation focus
AnqiCMS provides various recommendation attributes (such as头条[h], recommendation[c], slide[f], etc.) to facilitate operations personnel in marking important content. UtilizeflagParameters, you can easily extract this content marked specifically for display.
For example, to display the articles marked as "slider" on the homepage as carousel content:
{% archiveList slideshowArticles with moduleId="1" flag="f" limit="3" %}
{% for item in slideshowArticles %}
<div class="carousel-item">
<a href="{{ item.Link }}">
<img src="{{ item.Logo }}" alt="{{ item.Title }}">
<div class="carousel-caption">{{ item.Title }}</div>
</a>
</div>
{% endfor %}
{% endarchiveList %}
Hereflag="f"Make sure only articles marked as "Slide" are displayed.item.LogoGenerally used to get the first cover image, very suitable for carousel scenes.
More advanced applications and auxiliary tags
- Pagination display:When the content is large, combine
type="page"andpaginationTags can realize elegant pagination functions and improve the user's browsing experience.archiveListLabel settingstype="page"After that, the system will automatically handle the pagination logic, and then you can usepaginationTags to render pagination. - Tag content list:If you want to display related documents based on a tag (Tag),
tagDataListTags would be a more direct choice. It is witharchiveListThe usage is similar, but focuses on the tag ID. - Dynamic content model:AnqiCMS supports custom content models, which means you can create different content structures for various business needs. While using
archiveListbe sure to pass throughmoduleIdSpecify the content model you want to retrieve to ensure data accuracy. - Traverse the nested category list:cooperate
categoryListTags, you can first display the categories in a loop, and then use them under each category.archiveListTags display articles under the category, realizing more complex navigation and content layout.
By using the above method, you can fully utilize the document list tag of AnqiCMS to flexibly and efficiently display your latest, popular, or specified category of articles and products on the front end.This not only optimizes the content structure of the website, but also better guides users to discover the information they are interested in.
Frequently Asked Questions (FAQ)
1. How can I display the latest articles and products on the homepage at the same time?You can use two tags separatelyarchiveListto achieve this. The firstarchiveListSpecify the tagmoduleId="1"(Article Model ID) andorder="id desc"to get the latest articles, the secondarchiveListSpecify the tagmoduleId="2"(Product Model ID) andorder="id desc"Get the latest products. Both do not affect each other and can be displayed side by side on the page.
2. Why does my article list only show 10 articles and no pagination links?If you want the article list to have pagination functionality,archiveListthe tag must be settype="page"parameters. At the same time,archiveListafter the end of the tag,paginationyou need to use the tag to render the pagination navigation links. For example:{% archiveList archives with type="page" limit="10" %}...{% endarchiveList %}Following{% pagination pages with show="5" %}...{% endpagination %}.
3. How do I display other articles under the current article category on the article detail page, but not the content of the subcategories?In the article detail page,archiveListThe tag will default to getting the ID of the current article category. To display only other articles in the current category (excluding subcategories), you canarchiveListspecify it in the tagcategoryId="{{ archive.CategoryId }}"(Here, thearchive.CategoryIdIs the category ID of the current article andchild=falseParameters. For example:{% archiveList relatedArticles with categoryId="{{ archive.CategoryId }}" child=false limit="5" %}.