How to retrieve and display the document list under a specified Tag in AnQi CMS?
AnQiCMS (AnQiCMS) offers great convenience to website operators with its flexible content management and powerful template engine.In daily content operations, we often need to aggregate and display lists of associated documents based on specific tags (Tag), such as "Hot Topics", "Technical Tips", or "Product Reviews" and the like.This not only helps users quickly find the content they are interested in, but also effectively improves the internal link structure of the website, which is very beneficial for SEO.
This article will delve into how to retrieve and display the document list under the specified tag in AnQiCMS, helping you better utilize the tag feature and optimize content presentation.
Understand the tag function in AnQiCMS
In AnQiCMS, tags are a very practical way to classify content, different from traditional hierarchical classification, and more focused on the keyword association of content.You can add one or more tags to content models such as articles, products, etc. to achieve multi-dimensional content classification.For example, an article about 'website construction' can be tagged with 'SEO', 'user experience', 'front-end development', and so on.
In the AnQiCMS backend, you can create, edit, and manage tags under the 'Content Management' section of the 'Document Tags' module.Each label has a unique ID and alias, which is useful when calling the front-end template.
Core tags:tagDataListapplication
To retrieve and display the document list under a specified tag, AnQiCMS provides a special template tag:tagDataList. This tag is our core tool, which can flexibly retrieve related documents according to the tag ID.
1. Display the document list under the current tag on the tag details page.
When a user visits a specific tag detail page (for example你的域名/tag/SEO), we usually want to display all documents tagged with the 'SEO' tag directly on this page. At this point,tagDataListTags are not requiredtagIdIt intelligently identifies the tag ID of the current page and retrieves the associated document.
This is a basic template code example, used to display the document list and implement pagination on the tag detail page:
{# 获取当前标签的详细信息，例如标签标题和描述 #}
{% tagDetail currentTag with name="Title" %}
{% tagDetail tagDescription with name="Description" %}
<h2>标签: {{ currentTag }}</h2>
{% if tagDescription %}
<p>{{ tagDescription }}</p>
{% endif %}
<div class="tag-documents">
{# 使用 tagDataList 获取当前标签下的文档列表，并开启分页功能 #}
{% tagDataList archives with type="page" limit="10" %}
{% for item in archives %}
<article class="document-item">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description|truncatechars:150 }}</p> {# 截取前150个字符作为简介 #}
<div class="meta-info">
<span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>浏览量: {{ item.Views }}</span>
{# 如果需要显示文档所属分类，可以这样获取 #}
{% categoryDetail docCategory with name="Title" id=item.CategoryId %}
{% if docCategory %}
<span>分类: <a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{{ docCategory }}</a></span>
{% endif %}
</div>
{% if item.Thumb %}
<div class="document-thumb">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
</div>
{% endif %}
</article>
{% empty %}
<p>抱歉，当前标签下暂无文档。</p>
{% endfor %}
{% endtagDataList %}
{# 添加分页导航 #}
<div class="pagination-controls">
{% pagination pages with show="5" %}
<a class="first-page {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{ pages.FirstPage.Link }}">首页</a>
{% if pages.PrevPage %}
<a class="prev-page" href="{{ pages.PrevPage.Link }}">上一页</a>
{% endif %}
{% for pageItem in pages.Pages %}
<a class="page-number {% if pageItem.IsCurrent %}active{% endif %}" href="{{ pageItem.Link }}">{{ pageItem.Name }}</a>
{% endfor %}
{% if pages.NextPage %}
<a class="next-page" href="{{ pages.NextPage.Link }}">下一页</a>
{% endif %}
<a class="last-page {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{ pages.LastPage.Link }}">尾页</a>
{% endpagination %}
</div>
</div>
In this example:
- We first use
tagDetailGet the current tag title and description to display on the page. tagDataList archives with type="page" limit="10"It will fetch the documents under the current tag, display 10 per page, and assign the document list toarchivesVariable.type="page"is the key to enable pagination.for item in archivesLoop through each document,item.Link/item.Title/item.Description/item.CreatedTime/item.Views/item.Thumbetc. are common fields of the document.stampToDateTags used to format the document's publish time.categoryDetailTags used to get the name and link of the category the document belongs to.- Finally,
pagination pages with show="5"Used to render pagination navigation,show="5"indicating that up to 5 page buttons are displayed.
2. Call the document list by the specified tag ID on other pages
If you want to display selected documents under a specific tag on the homepage, sidebar, article detail page, or any other page on your website, you need to specify the tag ID and the number of documents you want to display.
Assuming you have a label called "Hot Recommendations" with an ID of5You want to display 3 documents under this label on the homepage.
<div class="featured-tags-section">
<h3>热门推荐</h3>
<ul>
{# 使用 tagDataList 获取标签ID为5的文档，限制显示3篇 #}
{% tagDataList hotPicks with tagId="5" limit="3" %}
{% for doc in hotPicks %}
<li>
<a href="{{ doc.Link }}">{{ doc.Title }}</a>
<p class="summary">{{ doc.Description|truncatechars:80 }}</p>
</li>
{% empty %}
<li>暂无热门推荐文档。</li>
{% endfor %}
{% endtagDataList %}
</ul>
</div>
Here:
tagId="5"It precisely specifies which label's documents to retrieve.limit="3"Controlled the number of displayed documents.hotPicksIs the custom variable name you set for this document list.
Flexible and versatile: CombinetagListDisplay tag cloud and content
Sometimes, you may want to display the popular tags or all tags on the website first, and then allow users to click on the tags to jump to the corresponding tag detail page and view the documents under it. This can be done bytagListTag implementation.
`twig
<h3>探索更多话题</h3>