Manage and display content in AnQi CMS, the tag (Tag) is undoubtedly a very practical tool.It can help us organize documents more flexibly, achieve multi-dimensional content aggregation, and is very beneficial for improving the website's SEO performance and user experience.When we need to display a list of all documents under a specific tag on a particular tag page, or at any location on the website, tagDataListTags are the indispensable tools we need.
The versatility of (Tag) andtagDataListits core function
In the daily operation of websites, we often need to classify and archive content.Categories are typically hierarchical, while tags provide a flattened, thematic association method.For example, an article about 'AnQi CMS tutorial' can belong to the 'Technical Articles' category, and can also be tagged with 'AnQi CMS', 'CMS tutorial', 'Go language', and many other tags.When the user clicks the "Go Language" tag, they expect to see all documents related to Go Language, regardless of which main category they belong to.tagDataListLabels are designed to meet this need, they can accurately extract and display all documents associated with the specified tags.
UsetagDataListThe label is very intuitive. Its basic syntax structure is{% tagDataList 变量名称 with tagId="1" %}. Here,变量名称It is a name you define to access the document data obtained in subsequent loops.tagIdThe parameter is the core, it tells the system which document list under which tag you want to get. This ID can be found on the "Document Tag" management page of the Anqi CMS background.
Flexible configuration, accurately obtain document list
tagDataListTags provide multiple parameters, allowing you to more finely control the acquisition and display of document lists:
tagIdAs mentioned before, this is the key parameter of the specified tag ID. If you are currently on a tag detail page (such astag/list.htmlortag/index.htmltemplate), and it is omittedtagIdparameter,tagDataListAutomatically identifies the current page's tag ID and retrieves the document under it.This greatly simplifies the template development of tabs. Of course, if you want to get specific tag documents on other pages or force a specific tag, you still need to set it explicitlytagId="X", where X is the numeric ID of the tag.moduleId: AnQi CMS supports various content models (such as articles, products). If you only want to display documents under a specific content model, you can usemoduleIdparameters to filter. For example,moduleId="1"You can only retrieve documents under the article model.orderThe sorting method of documents can also be flexibly controlled. You can sort by document ID (id descorid asc), views (views desc), or a custom sorting set up on the backend (sort descSort the document to meet different display needs.limitThis parameter is used to control the number of documents displayed. For example,limit="10"It will display the latest 10 documents. It also supports more advanced "offset" modes, such aslimit="2,10"Represents starting from the second document and fetching 10 data, which is very useful in some special layouts.typeWhen you need to add pagination functionality to the document list,type="page"Is your choice; if it is just to list a fixed number of documents,type="list"it is more appropriate. After choosing,type="page"you still need to cooperate with,paginationtags to achieve pagination effects together.siteIdFor an enterprise CMS that has enabled the multi-site feature, if you need to call documents under specific tags across sites, you can setsiteIdParameter to achieve.
Traverse the documents to display rich information
When you usetagDataListLabeling the document list, it usually needs to be accompanied byforLoop through these documents and display their information one by one. Inside the loop, each document can be accessed through a custom variable (such as the one mentioned above.archivesofitem）to access its various properties.
These available document properties are very rich, including:
Id: The unique ID of the document.Title: The document title.Link：The link to the document's detail page, which can be used directly to create hyperlinks.Description: Brief description or summary of the document.Logo: Address of the cover main image of the document.Thumb: Address of the cover thumbnail image of the document.CreatedTime: Publication time (timestamp format), usually combined withstampToDateThe filter formats the display, for example{{stampToDate(item.CreatedTime, "2006-01-02")}}.Views: Document's view count.Category: Complete information about the document's category, including category ID, title, link, etc.- Custom fieldIf you define additional custom fields for documents in the background content model, you can also access and display them.
{{item.您的自定义字段名}}.
Combined with pagination, optimize the user experience.
If the number of documents under the tag is large, in order to avoid the page from being too long, it is usually necessary to use pagination functions. WhentagDataListoftypethe parameter topageIt will return an object containing pagination information. At this point, we can use it紧接着paginationtags to generate pagination navigation.
For example, the code structure of a typical tag document list display is as follows：
<div class="tag-documents-list">
{# 使用tagDataList获取指定标签下的文档列表，并开启分页功能 #}
{% tagDataList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="document-item">
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="document-thumb">
{% endif %}
<p>{{ item.Description }}</p>
</a>
<div class="document-meta">
<span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>浏览量：{{ item.Views }}</span>
<span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
</div>
</div>
{% empty %}
<p>当前标签下暂无文档。</p>
{% endfor %}
{% endtagDataList %}
{# 分页导航区域，仅当type="page"时有效 #}
<div class="pagination-nav">
{% pagination pages with show="5" %}
<ul>
{# 首页链接 #}
<li {% if pages.FirstPage.IsCurrent %}class="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 {% if pageItem.IsCurrent %}class="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 {% if pages.LastPage.IsCurrent %}class="active"{% endif %}><a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a></li>
</ul>
{% endpagination %}
</div>
</div>
As shown in the above example, tagDataListTags are not only powerful but also very flexible in use. They can meet various needs from simple lists to complex pagination displays, helping us efficiently build content aggregation pages based on tags, thereby optimizing the content structure and user browsing experience of the website.
Frequently Asked Questions (FAQ)
1.tagDataListandarchiveListWhat is the difference between these tags? When should I use them?
tagDataList主要用于获取与特定“标签”关联的文档列表。它的核心是根据tagIdIt is very suitable for filtering content, especially on the tag detail page or in areas where it is necessary to display aggregated content of a specific tag.archiveListis a more general document list tag, which can be used in many ways (such ascategoryIdcategory ID,moduleIdmodel ID,flagrecommended attributes,userIdauthor ID,qSearch for keywords and) to filter documents. You can usearchiveListas the 'universal key' to get the document list, andtagDataListIt is a more professional tool for the specific dimension of "tag". It is recommended to use it first on the tag pagetagDataListbecause it is more logical and better suited to the specific routing of tags.
2. How to let in the tag detail page of Anqi CMStagDataListAutomatically identify the current tag ID without manually specifyingtagId?
This is a very convenient feature. When you use the tag detail page of Anqi CMS (for example, in your template directory),tag/list.htmlortag/index.htmlfile)tagDataListif you omit the tag,tagIdThe parameter, the system will intelligently automatically detect and use the tag ID corresponding to the current page URL to obtain the document list. This means that you usually just need to write{% tagDataList archives with type="page" limit="10" %}It can be done without manual search and hard codingtagId. Only when you want to display a specific tag's documents on a non-tag detail page, or when you want to obtainotherdocuments of a tag, you need to specify explicitlytagId="X".
3. How totagDataListIn the loop, display the custom field of the document?
IntagDataListIn the loop, you can go throughitemVariables directly access all default and custom fields of the document. If your document model defines a custom field namedproduct_numberyou can use it directly within the loop{{ item.product_number }}To display its value. Anqi CMS will provide these custom fields as part of the document object.For more complex custom field types (such as image groups or rich text), it may be necessary to use other filters (such as|safeUsed for HTML content) or auxiliary tags to render correctly.