How to display the document list under a specific Tag in AnQiCMS?

In AnQiCMS, tags are a powerful and flexible way to organize content, allowing you to associate documents in multi-dimensional ways without relying on traditional classification hierarchies.When you want to display all documents under a specific topic or keyword, it is particularly important to show the document list under a specific tag.This not only helps visitors find the content they are interested in faster, but also effectively improves the internal link structure and SEO performance of the website.

Next, we will introduce how to use the powerful template tag function in AnQiCMS to easily display the document list under a specific tag.

1. Create and manage backend tags

First, make sure your document has been tagged. In the AnQiCMS backend, you can manage and apply tags in the following two ways:

  • Add tags when editing the document:On the interface for editing or publishing documents, there is usually a 'Tag label' input box.You can directly enter a new tag name here, press Enter to create and associate it with the current document.At the same time, the system will also provide existing tags for you to choose from, avoiding the need to create duplicates.
  • Label management page is unifiedIn the "Content ManagementHere you can view all the tags created, edit, delete, or add new ones.Each tag can be set to have its name, index letter, custom URL, SEO title, keywords, and description information, which helps optimize the SEO and content richness of the tag page.The tag does not differentiate between content models and categories, and can associate documents across models and categories.

2. Display the document list under a specific tag on the front end

AnQiCMS provides a set of intuitive template tags that allow you to flexibly call and display tags and their associated documents on the website front-end.

Get and display the document list under the label:tagDataListTag

tagDataListThe tag is a core tool for retrieving the document list under a specified tag. Whether you want to automatically display the documents under the current tag on the tag detail page, or manually specify a tag to display its documents on other pages,tagDataListAll of them can meet your needs.

Basic usage:

In the template file, you can use the following structure to call.tagDataList:

{% tagDataList archives with tagId="1" %}
    {% for item in archives %}
        <!-- 在这里展示文档信息 -->
    {% endfor %}
{% endtagDataList %}

here,archivesIt is the variable name you define, which will contain all the document data under the label.tagIdIt is a key parameter used to specify which label's documents you want to retrieve.

tagDataListLabel key parameter parsing:

  • tagId(required or automatically obtained):This is the parameter for specifying the label ID.
    • Automatically obtain:If you are designing the detail page of a label (for exampletag/list.htmlortag/index.htmltemplate),tagDataListit will automatically recognize the tag ID of the current page, at this time you do not need to explicitly settagId.
    • manually specify:On non-label detail pages (such as the homepage, sidebar), if you want to display a specific label's document, you need to explicitly provide the numeric ID of the label, for exampletagId="1".
  • moduleId(Optional):If you only want to retrieve the label documents under a specific content model (such as "article" or "product"), you can filter bymoduleId="1"(assuming the ID of the "article" model is 1)
  • order(Optional):Used to specify the sorting method of the document, for exampleorder="id desc"(Sorted by ID in reverse order, that is, the most recently published is at the top) ororder="views desc"(Sorted by views in descending order). By default, it will follow the custom sorting rules of the backend.
  • limit(Optional):Controls the number of documents returned.limit="10"It will display 10 documents. You can also uselimit="2,10"To implement the effect of skipping the first two, and starting to display 10 documents from the third.
  • type(Optional):Decide the type of the list.
    • type="list"(Default): Returns a list of documents in the specified quantity.
    • type="page": Use it when you need to add pagination functionality to a list.配合paginationTags can achieve a complete page turning effect.
  • siteId(Optional):Under the multi-site management mode, if you need to call data from other sites, you can specifysiteId.

archivesthe document fields available in the variable (inforloop, withitemfor example):

EachitemRepresents a document, you can access various properties such as:

  • item.Id: Document ID
  • item.Title: Document Title
  • item.Link: Document Link
  • item.Description: Document Description
  • item.Thumb: Document thumbnail
  • item.CreatedTime: Document creation time (timestamp, usingstampToDateformat)
  • item.Views: Document views
  • and other custom fields set through the document model.

Example: Display document list (with pagination) on the tag detail page

Assuming you are editingtemplate/{您的模板目录}/tag/list.htmlortag/index.htmlFile:

{# 获取当前标签的详细信息 #}
{% tagDetail currentTag with name="Title" %}
<h1>标签：{{ currentTag }}</h1>

{% tagDetail tagDescription with name="Description" %}
{% if tagDescription %}
<p>{{ tagDescription }}</p>
{% endif %}

<ul class="tag-document-list">
    {% tagDataList archives with type="page" limit="10" order="id desc" %}
        {% for item in archives %}
        <li>
            <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>
                <div class="meta">
                    <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    <span>浏览量: {{ item.Views }}</span>
                </div>
            </a>
        </li>
        {% empty %}
        <li>
            当前标签下没有找到相关文档。
        </li>
        {% endfor %}
    {% endtagDataList %}
</ul>

{# 分页功能 #}
<div class="pagination-wrapper">
    {% pagination pages with show="5" %}
        {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}" class="prev">上一页</a>{% endif %}
        {% for page_item in pages.Pages %}
            <a href="{{ page_item.Link }}" class="{% if page_item.IsCurrent %}active{% endif %}">{{ page_item.Name }}</a>
        {% endfor %}
        {% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}" class="next">下一页</a>{% endif %}
    {% endpagination %}
</div>

In this example:

  1. {% tagDetail currentTag with name="Title" %}and{% tagDetail tagDescription with name="Description" %}Used to get the title and description of the current tag to enrich the page content.
  2. tagDataList archives with type="page" limit="10" order="id desc"It will retrieve the latest 10 documents under the current tag and enable pagination mode.
  3. {% for item in archives %}Loop through each document and display its title, thumbnail, description, publish date, and views.
  4. {% empty %}The block will display a prompt when there are no documents.
  5. {% pagination pages with show="5" %}The label is responsible for generating pagination navigation, allowing users to browse all documents.

Get the list of all tags:tagListTag

If you want to first display all the available tags on the website, and then have the user click on a tag to jump to the corresponding document list page, you can usetagList.

<div class="all-tags-cloud">
    <h2>热门标签</h2>
    <ul>
        {% tagList allTags with itemId="0" limit="50" %} {# itemId="0" 表示获取所有标签 #}
            {% for tag in allTags %}
            <li><a href="{{ tag.Link }}">{{ tag.Title }} ({{ tag.ArchiveCount }})</a></li> {# ArchiveCount 属性需要确保在后台开启了统计 #}
            {% endfor %}
        {% empty %}
        <li>暂无标签。</li>
        {% endtagList %}
    </ul>
</div>

This example lists all the tags on the website, each tag has a link pointing to its document list page.

3. Practical Tips and Suggestions

  • Custom URL for tags:When editing tags in the background, you can set a custom URL. This is crucial for creating SEO-friendly tag page links, for example.yourdomain.com/tag/seo-optimizationinstead ofyourdomain.com/tag/123.
  • The combination of tags and categories:Labels and categories are not exclusive. Categories provide a macroscopic tree structure, while labels provide a microcosmic network connection. Using them reasonably can provide users with a multi-dimensional content navigation.
  • Control the display quantity and sorting:UtilizelimitandorderParameter, you can easily create lists of 'Hot Tag Articles', 'Latest Tag Articles', etc., to meet the content display needs of different regions.
  • Pagination processing:For labels with a large amount of content, it is necessary to usetype="page"cooperatepaginationtags to provide pagination functionality, optimize user experience and page loading speed.

By using these template tags provided by AnQiCMS, you can efficiently and flexibly display the document list under specific tags, thereby greatly enriching the content organization form of the website and bringing your users a more convenient browsing experience.

Frequently Asked Questions (FAQ)

  1. Ask: How can you display the document list under a specific tag on non-tag pages (such as the homepage)? Answer:You can use it directly.tagDataListLabel, and throughtagId