In website content operation, effectively organizing and displaying related content is crucial for enhancing user experience and website SEO performance.The AnqiCMS 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 AnqiCMS on the front page of the website.
Understand the Tag and its value in AnqiCMS
In AnqiCMS, Tag is a powerful content organization tool.Different from strict hierarchical classification, Tag can span across different content models (such as articles, products, etc.), linking documents with similar themes or attributes.For example, an article about 'website design' and a product for 'website construction' can both be tagged with 'building 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 a document can help break through the inherent classification constraints of your content, forming a multi-dimensional, networked association, which significantly enhances the flexibility of users in searching for information and the strategy of website content.
Core tags:tagDataListusefulness
AnqiCMS provides a special template tag to display the document list associated with a specific Tag on the front page,tagDataListThis tag is the core tool to achieve our goal, it can retrieve and list all documents related to the specified Tag.
tagDataListThe usage of tags is very intuitive. You need to wrap it in a{% tagDataList ... %}and{% endtagDataList %}structure, and iterate over the document data obtained throughfora loop.
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:
archivesIt is the variable name you define for the document list you obtain, 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's ID (which can be found on the Tag management page in the background), 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 at this time.tagIdParameter.typeThe parameter is very important, it determines 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 will support pagination, which is very useful for the case where there are many documents under 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 a specific content model, for example, if you only want to display articles associated with a Tag, you can setmoduleId="1"(Assuming the article model ID is 1).orderParameters can define the sorting method of documents, such as descending by publish timeorder="id desc", or by the number of views in descending orderorder="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 be on a Tag detail page (such astemplate/您的模板目录/tag/detail.htmlortag/list.htmlShow the document list under the Tag, or display content according to a 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 %}The tag is inforAlternative text is displayed when the loop has no content, ensuring a friendly page.
2. Enrich the display content of the document list
To make the list more attractive, we can add the document thumbnail, description, and publish 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,stampToDateIs a very useful filter that can format timestamps into readable date strings, truncatecharsIt can be used to truncate text length to keep the page neat.
3. Implement pagination display
When the number of documents under the Tag is large, pagination is an essential feature.typethe parameter to"page"and combiningpaginationtag to achieve.
<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 is defined bytagDataListoftype="page"the parameters are automatically filled in, then throughpaginationthe tag for rendering.show="5"indicates that the pagination navigation can display up to 5 page number buttons.
By following these steps, you can flexibly display the document list associated with a specific Tag on the AnqiCMS front page.Make good use of the Tag function, which can not only make your website content more organized, but also greatly improve the efficiency of users searching for information.
Frequently Asked Questions (FAQ)
Q1: How can I get the ID or name of the Tag currently displayed on the page, so that it can be used on the page?
In AnqiCMS, if the page you are currently visiting is itself a Tag detail page (for example, the URL contains a 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" %}The title of the Tag will be retrieved. If you assign the obtained Tag information to a variable (for example{% tagDetail currentTag with name="Title" %}), you can reference it{{ currentTag }}in the page.
Q2: Can I display a list of documents with 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 it on a non-Tag page, you just need totagIdSpecify the parameter clearly to display the document list of the Tag you want. For example, if you want to display 5 documents under the Tag with ID 10 in the hot recommendation area of the homepage, you can write the code like this:{% tagDataList archives with tagId="10" type="list" limit="5" %}. It is crucial to know the target Tag's ID in advance.
Q3: Why isn't pagination displayed in my Tag document list?
If yourtagDataListThe call does not display pagination, please check the following two points:
typewhether the parameters are set as"page"?Only whentagDataListoftypeThe parameter is explicitly set to `"page"'