How to display the description and link of a specific Tag label in AnQiCMS?

In Anqi CMS, a tag (Tag) is a powerful content organization tool that not only helps you classify content more accurately but also optimizes the website's SEO performance and improves the user's browsing experience.Sometimes, you may want to display not only the name of the label at a certain position on the front end of the website, but also its more detailed description information, and even jump directly to the link related to the content of the label.

This is not a difficult matter, Anqi CMS provides flexible template tags, allowing you to easily meet these needs.We will start from the background settings and gradually delve into the actual application of the front-end templates, ensuring that you can fully master them.

1. Add description and link for Tag label in the background

Firstly, we need to ensure that each Tag label has a complete description and correct link structure. These configurations are completed in the Anqi CMS backend.

  1. Enter the Tag label management interface:Log in to the Anqi CMS backend and navigate to the 'Document Tag' option under 'Content Management' via the left menu.
  2. Create or edit Tag labels:In the document tag list, you can choose to edit an existing tag, or click "Add new document tag" to create a new tag.
  3. Perfect the Tag tag information:On the label editing page, there are several key fields directly related to our goal:
    • Tag name:This is the display name of the label, which is also the most basic identifier.
    • Custom URL:This field allows you to set a personalized, SEO-friendly link alias for tags.The Anqi CMS usually automatically generates pinyin URLs based on tag names, but you can manually modify them to ensure uniqueness and semanticization.This custom URL will directly affect the jump link of the front-end tag.
    • Tag description:
    • SEO title and label keywords:Although it is not directly displayed, these fields are crucial for improving the search engine visibility of the tab page, and it is recommended that you also improve them.

After completing these settings, save your changes. Now, your Tag tag is equipped with callable description and link information.

Second, display the description and link of the Tag label on the website front-end

The AnQi CMS uses a syntax similar to the Django template engine, calling back-end data through specific template tags. We will demonstrate how to operate in several common scenarios.

1. Display the list and description of all Tag tags

If you want to display all or part of the Tag tags on the website sidebar, footer, or dedicated tag aggregation page, and include their descriptions and links, you can usetagList.

tagListThe label is mainly used to obtain the list of document labels. When you want to obtain all tags (instead of the tags of a specific document), you need toitemIdthe parameter to0.

<div class="tag-cloud">
    <h3>热门标签</h3>
    {% tagList tags with itemId="0" limit="20" %} {# 获取所有标签，限制显示20个 #}
    {% for item in tags %}
        <div class="tag-item">
            <a href="{{ item.Link }}" title="{{ item.Description }}">{{ item.Title }}</a>
            {% if item.Description %}
                <p class="tag-description">{{ item.Description }}</p>
            {% endif %}
        </div>
    {% empty %}
        <p>目前还没有任何标签。</p>
    {% endfor %}
    {% endtagList %}
</div>

Code analysis:

  • {% tagList tags with itemId="0" limit="20" %}This line of code will retrieve all the Tag tags on the website and store them in a variable namedtags.limit="20"It limits the display to only the 20 most recently added tags.
  • {% for item in tags %}：TraversetagsEach tag data in the variable.
  • {{ item.Link }}Display the link address of the tag.
  • {{ item.Title }}Display the name of the tag.
  • {{ item.Description }}Display the introduction (description) set in the background for the tag.
  • {% if item.Description %}This is a conditional judgment, only when the label has a description is it displayedp.

2. Display specific Tag details on the Tag label detail page

When the user clicks on a Tag label to enter its detail page (usually corresponding totag/list.htmlortag/index.htmlWhen using a template), you may wish to display detailed information such as the name, description, and even images of the Tag at the top of the page. In this case,tagDetailTags come into play. On the Tag detail page,tagDetailIt will default to retrieving information about the current Tag.

<div class="tag-detail-header">
    {% tagDetail tagInfo with name="Title" %} {# 获取当前Tag的标题，并赋值给tagInfo变量 #}
    {% tagDetail tagDescription with name="Description" %} {# 获取当前Tag的描述，并赋值给tagDescription变量 #}
    {% tagDetail tagLogo with name="Logo" %} {# 获取当前Tag的Logo，并赋值给tagLogo变量 #}

    {% if tagLogo %}
        <img src="{{ tagLogo }}" alt="{{ tagInfo }}" class="tag-logo">
    {% endif %}
    <h1>{{ tagInfo }}</h1>
    {% if tagDescription %}
        <p class="intro">{{ tagDescription }}</p>
    {% endif %}

    {# 如果需要显示当前标签下的文档列表，可以结合 tagDataList 标签 #}
    <h3>“{{ tagInfo }}”相关文章：</h3>
    <ul class="archive-list">
        {% tagDataList archives with tagId=tag.Id type="page" limit="10" %} {# 获取当前标签下的文章，每页10条 #}
        {% for doc in archives %}
            <li>
                <a href="{{ doc.Link }}">
                    <img src="{{ doc.Thumb }}" alt="{{ doc.Title }}" />
                    <h4>{{ doc.Title }}</h4>
                </a>
                <p>{{ doc.Description|truncatechars:100 }}</p> {# 截取文章描述前100字 #}
            </li>
        {% empty %}
            <li>暂无相关文章。</li>
        {% endfor %}
        {% endtagDataList %}
    </ul>

    {# 分页导航（如果使用了 type="page"） #}
    <div class="pagination">
        {% pagination pages with show="5" %}
            {# ... 分页链接代码，可参考tag-/anqiapi-tag/149.html文档示例 ... #}
        {% endpagination %}
    </div>
</div>

Code analysis:

  • {% tagDetail tagInfo with name="Title" %}In the Tag details page, you can directly go throughname="Title"To get the title of the current Tag and assign it totagInfothe variable. Similarly, getDescriptionandLogo.
  • {{ tagInfo }}/{{ tagDescription }}/{{ tagLogo }}Output these variable values.
  • {% tagDataList archives with tagId=tag.Id type="page" limit="10" %}This line of code will retrieve all documents associated with the current Tag and perform pagination. Here is thetag.IdIt will automatically retrieve the Tag ID of the current page.
  • {{ doc.Link }}/{{ doc.Title }}/{{ doc.Thumb }}/{{ doc.Description|truncatechars:100 }}: Traverse the document list and output the document's link, title, thumbnail, and extracted description.

3. Display the associated Tag tags on the document detail page.

On the article or product detail page, you would usually like to display all the Tag tags associated with the current document in the bottom or sidebar.

`twig

<span>标签：</span>
{% tagList tags with limit="10" %} {# 默认获取当前文档关联的标签，限制10个 #}
{% for item in tags %}
    <a href="{{