In website operation, a tag (Tag) is an extremely useful content organization tool.They can not only help users find the content they are interested in faster, improve the user experience of the website, but also optimize the search engine's crawling and understanding of the website content, which has a positive effect on SEO performance.tagListandtagDataListThese template tags allow us to easily display a list of tags on the website as well as documents related to specific tags.

Manage your website tags flexibly.

In Anqi CMS, tags are cross-content model and category, which means the same tag can be applied to different types (such as articles, products) and documents under different categories.This makes the content association closer, and also provides users with more dimensions of content navigation.You can find the 'Document Tag' feature in the 'Content Management' module on the backend to perform tag add, delete, modify, and query operations.Here you can set the tag name, index letter, custom URL, SEO title and description, etc., which lays the foundation for front-end display and SEO optimization.

Next, we will delve into how to utilizetagListandtagDataListthese core tags to build an efficient tag display and content association on your website.

UsetagListTag display website tag list

tagListTags are mainly used to display lists of tags at various locations on the website, such as the 'Hot Tags' area in the sidebar, the 'Tag Cloud' at the bottom of the website, or an independent tag index page.It can help users get an overview of the main content themes on the website.

When we want to display a series of tags in a template, we can use it like thistagList:

{% tagList tags with limit="10" %}
    {% for item in tags %}
        <a href="{{item.Link}}">{{item.Title}}</a>
    {% endfor %}
{% endtagList %}

In this code block,tagsis the variable name we give to the tag listlimit="10"Then it specifies the first 10 tags we want to display. By loopingtagsVariable, we can obtain detailed information about each tag, such as the title of the tag{{item.Title}}and the link of the tag{{item.Link}}and then display it on the page.

tagListTags also provide some practical parameters to meet different display requirements:

  • itemId: This parameter is very useful, when you want to display related tags with the current article on the article detail page, you can specify it.itemIdIt will default to reading the ID of the current document. If you want to display tags for the entire site (for example, on the homepage or a global tag cloud), you can explicitly set ititemId="0".
  • limit: Control the number of displayed tags. For examplelimit="20"It can display 20 tags. It even supports"offset,limit"patterns, such aslimit="5,10"indicating starting from the 5th tag and getting 10 tags.
  • letter: If you want to filter tags by the first letter, for example, to only display tags that start with 'A', you can useletter="A".
  • categoryId: You can call the tag list under a specific category, for example, only displaying all tags under the 'news' category.
  • type="page"When you need to create an independent pagination page for a tag list (for example, a tag index page,tag/index.html), you can settype="page", then combinepaginationtags to achieve pagination display.

By combining these parameters, you can flexibly control the display range, number, and sorting of tags, providing users with clear navigation.

UsetagDataListTags display the document list under a specific tag.

When a user clicks on a tag, it usually jumps to a page that displays all the documents associated with the tag. At this time,tagDataListTags come into play. They can retrieve and display the associated document list based on the specified tags.

Assuming you have created a tag detail page (usually the template file istag/list.htmlortag/index.html），and hope to display all documents under the current tag on this page, you can use it like thistagDataList:

{% tagDataList archives with type="page" limit="10" %}
    {% for item in archives %}
    <article>
        <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
        <p>{{item.Description}}</p>
        <div>
            <span>发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量：{{item.Views}}</span>
        </div>
    </article>
    {% empty %}
    <p>该标签下暂时没有文档。</p>
    {% endfor %}

    {# 分页导航 #}
    {% pagination pages with show="5" %}
        {# 这里是分页链接的展示代码 #}
    {% endpagination %}
{% endtagDataList %}

In this code block,archivesis the variable name we use for the document list,type="page"andlimit="10"It means that we will display pagination with 10 records per page. In the tag detail page,tagDataListusually it is not necessary to specifytagId, it will automatically identify the tag ID of the current page.

tagDataListThe tag also supports rich parameters:

  • tagId: Specify the tag under which the document should be queried. It is usually used on non-tag detail pages, while on tag detail pages, it will default to fetching the tag ID of the current page.
  • moduleId: If your website has multiple content models (such as articles, products), you can filter to display only the documents under the article model bymoduleId="1"(assuming 1 is the article model ID).
  • order: Control the sorting method of documents, for exampleorder="views desc"Sorted in descending order by views,order="id desc"Sorted in descending order by the most recent release.
  • limit: Similar totagListcontrol the number of documents returned.
  • type="page": Enable pagination feature, withpaginationTags can build a complete pagination navigation.
  • siteId: If you use the multi-site feature, you can specify from which site to retrieve the data.

CombinetagDataListandpaginationTags, you can create a comprehensive and rich document list page for each tag, greatly enhancing user experience and content discoverability.

Integrate and apply to enhance the value of website content

Of Security CMStagListandtagDataListTags work together to help you build a dynamic and organized website content structure. First, you can usetagListDisplay popular tags on the sidebar or bottom of the website to guide users to the tag detail page; then, in the tag detail page, utilizetagDataListProvide all relevant documents under the tag for users.

Frequently Asked Questions (FAQ)

Q1: I want to display related tags with the current article on each article detail page of the website, how should I operate?

A1:You can usetagListTags, and do not need to be explicitly specifieditemIdparameter. WhentagListThe tag is called on the document detail page, it intelligently identifies the current document ID and automatically loads the tags associated with the document. For example:

<h4>相关标签：</h4>
{% tagList tags %}
    {% for item in tags %}
        <a href="{{item.Link}}" class="tag-item">{{item.Title}}</a>
    {% endfor %}
{% endtagList %}

Q2: If my website has a very large number of tags, how can I avoid displaying a long list of tags on the page or implement pagination?

A2:For cases with a large number of tags, you cantagListlabel'slimitParameters to control the display quantity, for examplelimit="20"Only the first 20 tags will be displayed. If you need an independent tag index page and implement pagination, you can use it on the tag homepage (usuallytag/index.html)tagListand settype="page"then cooperate withpaginationtags to generate pagination navigation:

{# 标签列表分页显示示例 #}
{% tagList tags with type="page" limit="20" %}
    {% for item in tags %}
        <a href="{{item.Link}}" class="tag-cloud-item">{{item.Title}}</a>
    {% endfor %}
    {# 结合分页标签 #}
    {% pagination pages with show="5" %}
        {# 完整的分页链接代码，这里省略 #}
    {% endpagination %}
{% endtagList %}

Q3: Can I display documents under a specific tag in other non-tag pages of the website, such as a module on the homepage?

A3:Of course you can. You can usetagDataListLabel, and throughtagId

`twig

Latest recommendation: Document about 'AnQi CMS'

{% tagDataList archives with tagId=“5” limit=“3” order=“id desc” %}

{% for item in archives %}
<div class="featured-article">
    <h4><a href="{{item.Link}}">{{item.Title}}</a></h4>
    <p>{{item.Description|truncatechars:100}}</p>
</div>
{% endfor