How to display all Tag tags associated with a document in AnQi CMS template?

AnQi CMS is an efficient and flexible content management system that provides rich features for content operators, among which 'tags' play a key role as an important means of content classification and association, enhancing the structuralization of website content, optimizing user experience, and SEO.As an experienced website operations expert, I know how to maximize the value of content using these tools.Today, let's talk about how to accurately display all the Tag tags associated with a document in the AnQiCMS template.

The importance of tags and the tag management mechanism of AnQiCMS

Before delving into template operations, let's first review the value of tags (Tag).Tags are not just small labels for content; they are more like keywords for content, helping users quickly find related information, enhancing cross-references within the site's content, which is crucial for user engagement and search engine optimization (SEO).By tags, we can connect content scattered across different categories and even different models, based on common themes or keywords, forming a content network that greatly enriches the depth and breadth of users' browsing.

AnQiCMS is well-versed in this, providing an intuitive and powerful tag management feature.In the background, when you edit or publish a document, you can directly select existing tags in the "Tag label" field, or quickly create a new tag by entering it and pressing the Enter key.The system will automatically associate these tags with the current document.In addition, AnQiCMS also provides an independent 'Document Tag' management page, allowing you to uniformly view, edit, and manage the tags of the entire site, ensuring the standardization and consistency of the tag system.

The core of displaying tags in the template:tagListTag

To display all the tags associated with a document in the AnQiCMS template, we mainly rely on a powerful template tag——tagListThis tag is designed to retrieve and display tag lists, it can intelligently recognize the current page context, and can also specify the tag set to be retrieved through parameters.

AnQiCMS template syntax is similar to the Django template engine, variables are enclosed in double curly braces{{变量}}where logical control uses single curly braces and the percent sign{% 逻辑 %}Understanding this is crucial for writing template code.

Step to display tags on the document detail page

Assuming you are visiting an article or product detail page, you want to display all related tags at the bottom of the page.

1. Locate the template file:Generally, the template file for the document (article or product) detail page is located in the current theme directory.{模型table}/detail.htmlfor examplearticle/detail.htmlorproduct/detail.html）。If you have specified a custom template for a particular document, you need to edit the corresponding template file.

2. UsetagListTag get tag list:In the document detail page,tagListTag has a very convenient feature: when you do not specifyitemIdWhen a parameter is specified, it will automatically identify the document ID of the current page and retrieve all tags associated with the document. This greatly simplifies the operation.

   Therefore, you can insert the following code at an appropriate location in the template (such as below the document content, in the sidebar, etc.)

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

   Let's decode this code:

   • {% tagList tags %}This istagListThe start tag. We assign the list of tags obtained to a variable namedtagsbecause we did not specifyitemIdthe parameter, the system will default to finding the tags associated with the current document.
   • {% for item in tags %}: This isforLoop, used for iterationtagsEach label in the variable. Inside the loop, the data of each label is accessed throughitemthe variable.
   • <a href="{{ item.Link }}" class="tag-item">{{ item.Title }}</a>: This is the display format of each label.
     • {{ item.Link }}: The link address of the tag will be output. Clicking it will usually jump to the document list page under the tag.
     • {{ item.Title }}: The name of the tag will be output.
     • class="tag-item"Here we added a CSS class name for you to beautify the tag style later, making it more in line with the overall design of the website.
   • {% endfor %}:forEnd of the loop marker.
   • {% endtagList %}:tagListThe end tag of the tag.

3. Styled tags (optional but recommended):To make the tags look nice on the page, you can add the corresponding styles in the website's CSS file, for example:

   .document-tags {
       margin-top: 20px;
       padding: 15px;
       background-color: #f8f8f8;
       border-radius: 5px;
   }
   .document-tags strong {
       font-weight: bold;
       margin-right: 10px;
       color: #333;
   }
   .tag-item {
       display: inline-block;
       padding: 5px 10px;
       margin-right: 8px;
       margin-bottom: 8px;
       background-color: #e0e0e0;
       color: #555;
       text-decoration: none;
       border-radius: 3px;
       font-size: 14px;
       transition: background-color 0.3s ease;
   }
   .tag-item:hover {
       background-color: #007bff;
       color: #fff;
   }
   

Advanced Techniques: Control Label Display More Flexibly

AlthoughtagListThe default behavior is already very intelligent, but in some specific scenarios, you may need more fine-grained control:

• Display Tags for Specific Documents:If you want to use the label for a non-document detail page or need to display a specific document (other than the current document), you can useitemIdParameters. For example, to display all tags of the document with ID 123:

  {% tagList specificTags with itemId="123" %}
      {% for item in specificTags %}
          <a href="{{ item.Link }}">{{ item.Title }}</a>
      {% endfor %}
  {% endtagList %}
  

• Limit the number of tags displayed:If a document is associated with many tags, you may only want to display a part of them.limitParameters can help you control the number of tags displayed, for example, showing only the first 5 tags:

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

• Handling the case without tags:If a document does not have any associated tags, by defaultforThe loop will not output anything inside. To provide a better user experience, you can make use offorrepeatedlyemptya clause to display a prompt message:

  {% tagList tags %}
      {% for item in tags %}
          <a href="{{ item.Link }}">{{ item.Title }}</a>
      {% empty %}
          <span>暂无相关标签。</span>
      {% endfor %}
  {% endtagList %}
  

By using the above method, you can easily and flexibly display any tags associated with documents in the AnQiCMS template, thereby effectively improving the organization and user experience of the website's content.

Frequently Asked Questions (FAQ)

1. Q: If the document is not associated with any tags, what will the page display?A: If the document is not associated with any tags,{% tagList tags %}in the labelforThe loop will not output anything. To provide a better user experience, you can{% for %}use labels inside{% empty %}use a clause to display a prompt text, such as “No related tags available.”

2. Q:tagListCan the order of the tags obtained be fixed? Can I control their sorting?A:tagListLabels do not provide a direct sorting parameter by default.It usually returns based on the order of creation or association of tags.If you have a specific requirement for the display order of tags, you may need to adjust it in the tag management on the backend, or customize the sorting after obtaining the tag data through JavaScript on the frontend.

3. Q: Where will I be redirected when I click on the tag? How is this link generated?A: When you use it in the template{{ item.Link }}AnQiCMS will automatically generate the URL corresponding to the tag. After clicking, the user is usually navigated to the