In website content operation, effectively organizing and displaying related content is crucial for improving user experience and the website's SEO performance.AnqiCMS's Tag (Tag) feature is exactly for this.By cleverly using Tag, we can not only provide users with more accurate content navigation, but also enable search engines to better understand the structure of the website content.
This article will focus on how to clearly and effectively display the document list associated with a specific Tag in the front page of the website using AnqiCMS.
Understand the Tag and its value in AnqiCMS
In AnqiCMS, Tag is a powerful content organization tool.不同于严格的分类层级，Tag能够横跨不同的内容模型（如文章、产品等），将具有相似主题或属性的文档关联起来。For example, an article about 'website design' and a product for 'website construction' can both be tagged with 'build website'.
You can easily create, edit, and manage these tags through the 'Document Tags' feature under 'Content Management' in the AnqiCMS admin interface.Adding Tags to documents can help your content break through the inherent classification constraints, forming multi-dimensional and networked content associations. This significantly enhances the flexibility of users in searching for information and the strategy of website content.
Core tags:tagDataListuses
To display a list of documents associated with a specific Tag on the front page, AnqiCMS provides a special template tag -tagDataListThis tag is the core tool to achieve our goals, it can retrieve and list all documents related to the specified Tag.
tagDataListThe usage of the label is very intuitive. You need to wrap it in a{% tagDataList ... %}and{% endtagDataList %}structure, and thenforuse a loop to traverse the obtained document data.
Let's take a look at its basic structure and commonly used parameters:
{% tagDataList archives with tagId="您的TagID" type="page" limit="10" %}
{% for item in archives %}
{# 在这里展示每个文档的信息 #}
{% endfor %}
{% endtagDataList %}
Among them:
archivesIs the variable name you define for the obtained document list, and you can customize it as needed.tagIdThe parameter is used to specify which Tag's documents you want to display. You can directly fill in the Tag ID (which can be viewed in the Tag management page on the back end), or if the current page itself is a Tag detail page, the system will automatically recognize the current Tag's ID, and you can omit it.tagIdParameter.typeParameters are very important, they determine how the list is displayed. When set totype="list"it will only displaylimitthe number of documents specified by the parameter; while set totype="page"When it is, it will support pagination functionality, which is very useful for situations where there are a large number of documents under the Tag.limitIt is used to control how many documents are displayed per page or per time.moduleIdThe parameter allows you to further filter documents under specific content models, for example, if you only want to display articles associated with Tag, you can setmoduleId="1"(Assuming the article model ID is 1).orderThe parameter can define the sorting method of the document, such as descending by publication timeorder="id desc", or descending by viewsorder="views desc".
Practice in the template: Display the document list associated with Tag
Now, we will apply this knowledge to actual template code. Suppose you want to display on a Tag detail page (for exampletemplate/您的模板目录/tag/detail.htmlortag/list.htmlShow the document list under this Tag on the page, or display content according to the specific Tag ID on other pages.
1. Basic document list display
First, create a simple list to display the document title and link.
{# 假设您正在一个Tag详情页，或者您明确知道要展示的TagID #}
<div class="tag-documents-list">
<h3>{{ tag.Title }} 相关文档</h3> {# 假设这里有Tag名称变量 `tag.Title` #}
<ul>
{% tagDataList archives with type="list" limit="5" %} {# 如果不在Tag详情页，需要明确指定 tagId="您想展示的TagID" #}
{% for item in archives %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% empty %}
<li>该标签下暂无任何文档。</li>
{% endfor %}
{% endtagDataList %}
</ul>
</div>
In this example,{% empty %}Tags inforAlternative text is displayed when the loop has no content, ensuring a friendly page.
2. Enrich the document list display content
In order to make the list more attractive, we can add document thumbnails, descriptions, and publishing time. AnqiCMS'sitemvariables provide rich field information, such asitem.Thumb[Thumbnail],item.Description(description),item.CreatedTime(Creation time, as a timestamp).
<div class="tag-documents-list">
<h3>{{ tag.Title }} 相关文档</h3>
<div class="documents-grid">
{% tagDataList archives with type="list" limit="6" moduleId="1" order="views desc" %} {# 假设只显示文章模型，并按浏览量排序 #}
{% for item in archives %}
<div class="document-card">
<a href="{{ item.Link }}" class="document-thumb">
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
{% else %}
<img src="/static/images/default-thumb.jpg" alt="默认图片"> {# 替换为您的默认图片路径 #}
{% endif %}
</a>
<div class="document-info">
<h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
<p class="document-description">{{ item.Description|truncatechars:80 }}</p> {# 截取前80个字符并添加省略号 #}
<span class="document-date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</div>
</div>
{% empty %}
<p>该标签下暂无任何文档。</p>
{% endfor %}
{% endtagDataList %}
</div>
</div>
Please note,stampToDateIt is a very useful filter that can format timestamps into readable date strings, truncatecharsThen you can cut the text length to keep the page neat.
3. Implement pagination display
When there are many documents under the Tag, pagination is an essential function. Totypeparameter settings"page"and combine.paginationthe tag to implement.
<div class="tag-documents-listing">
<h3>{{ tag.Title }} 所有文档</h3>
<div class="documents-items">
{% tagDataList archives with type="page" limit="10" order="id desc" %}
{% for item in archives %}
<div class="document-item">
<h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
<p>{{ item.Description|truncatechars:120 }}</p>
<span>发布日期: {{ stampToDate(item.CreatedTime, "2006年01月02日") }}</span>
</div>
{% empty %}
<p>该标签下暂无任何文档。</p>
{% endfor %}
{% endtagDataList %}
</div>
{# 分页导航区域 #}
<div class="pagination-nav">
{% pagination pages with show="5" %}
<ul>
<li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a></li>
{% if pages.PrevPage %}
<li><a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a></li>
{% endif %}
{% for pageItem in pages.Pages %}
<li class="{% if pageItem.IsCurrent %}active{% endif %}"><a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a></li>
{% endfor %}
{% if pages.NextPage %}
<li><a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a></li>
{% endif %}
<li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a></li>
</ul>
{% endpagination %}
</div>
</div>
In this pagination example,pagesthe variable istagDataListoftype="page"automatically filled in the parameters, and thenpaginationrendered through tags.show="5"indicates that the pagination navigation can display up to 5 page number buttons.
By following these steps, you will be able to flexibly display the document list associated with a specific Tag on the front page of AnqiCMS.Reasonably utilize the Tag function, which can not only make your website content more organized, but also greatly improve the efficiency of users searching for information.
Common Questions and Answers (FAQ)
Q1: How do I get the ID or name of the Tag currently displayed on the page, so that I can use it on the page?
In AnqiCMS, if the page you are currently visiting is itself a Tag detail page (for example, the URL contains the Tag alias or ID), the system will usually automatically pass the detailed information of the Tag to the template. You can usetagDetailLabel to get the current Tag's ID or name. For example,{% tagDetail with name="Id" %}It will get the current Tag's ID,{% tagDetail with name="Title" %}Will retrieve the title of the Tag. If you assign the obtained Tag information to a variable (for example{% tagDetail currentTag with name="Title" %}), then you can refer to it in the page.{{ currentTag }}in the page.
Q2: Can I display the document list of a specific Tag on the homepage or other non-Tag pages?
Of course you can.tagDataListThe design of the Tag is very flexible. When calling from a non-Tag page, you only need to throughtagIdSpecify the parameter explicitly to show the document list of the Tag you want to display. For example, if you want to display 5 documents under the Tag with ID 10 in the hot recommendation area on the homepage, you can write the code like this: {% tagDataList archives with tagId="10" type="list" limit="5" %}The key is that you need to know the ID of the target Tag in advance.
Q3: Why is the pagination not displayed in my Tag document list?
If yourtagDataListCall did not display pagination, please check the following two points:
typeIs the parameter set?"page"?Only whentagDataListoftypeThe parameter is explicitly set to `“page”