AnQiCMS provides great convenience for website operators with its flexible content management and powerful template engine.In daily content operation, we often need to aggregate and display lists of related documents based on specific tags (Tag), such as 'Hot Topics', 'Technical Tips', or 'Product Reviews', etc.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 a specific tag in AnQiCMS, helping you better utilize the tagging feature and optimize content presentation.
Understand the tag function in AnQiCMS
In AnQiCMS, tags are a very practical way of content categorization, which is different from the traditional hierarchical classification, and it focuses more on the keyword association of content.You can add one or more tags to articles, products, and other content models to achieve multi-dimensional content classification.For example, an article about 'website construction' can also 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 'Document Tags' module in the 'Content Management' section.Each tag has its unique ID and alias, which is useful when calling the front-end template.
Core tags:tagDataListapplication
To get and display the document list under a specified tag, AnQiCMS provides a special template tag:tagDataListThis tag is our core tool, which can flexibly retrieve related documents based on the tag ID.
1. Display the document list under the current tag on the tag detail page.
When a user visits a specific tag detail page (for example,你的域名/tag/SEO), we usually want to display all documents tagged with "SEO" on this page. At this time,tagDataListTags are not requiredtagIdIt will intelligently identify the tag ID of the current page and retrieve the associated document.
This is a basic template code example, used to display document lists and implement pagination on the label 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 label's title and description to display on the page. tagDataList archives with type="page" limit="10"Retrieves the documents under the current tag, displays 10 documents per page, and assigns the document list.archivesa variable.type="page"It is the key to enabling pagination.for item in archivesLoops through each document,item.Link/item.Title/item.Description/item.CreatedTime/item.Views/item.Thumbare commonly used fields of the document.stampToDateThe tag is used to format the document's publish time.categoryDetailThe tag is 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"Indicates that up to 5 page number buttons are displayed.
2. Call document list by specified tag ID on other pages
If you wish to display selected documents under a specific tag on the homepage, sidebar, article detail page, or any other page on the website, you need to explicitly specify the tag's ID and the number of documents you wish to show.
Assuming you have a label named “Hot Recommendations” with an ID of5, you 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 specifies exactly 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: combinedtagListDisplay tag cloud and content
Sometimes, you might want to display popular tags or all tags on the website first, and then allow users to click on a tag to jump to the corresponding tag detail page to view the documents under it. This can be done bytagListLabel implementation.
`twig
<h3>探索更多话题</h3>