How to display the list of all document tags in AnQiCMS template?

As an experienced website operations expert, I know that the template development of the content management system is the key to website operation efficiency and content display effect.AnQiCMS (AnQiCMS) provides us with great convenience with its efficient and flexible features based on the Go language.Today, let's delve deeply into a very practical requirement in content operation: how to elegantly display the tag list of all documents in the AnQiCMS template.

Tags play a crucial role in modern website content management.They are not just keywords of content, but also bridges connecting different themes and aggregating relevant information.By carefully designed tags, we can significantly improve the website's SEO performance, guide users to discover more interesting content, and thus optimize the user experience and the time spent on the site.In AnQiCMS, fully utilizing the tag function can make our website content more three-dimensional and easy to find.

Understanding tag and template structure in AnQiCMS

In the AnQiCMS ecosystem, tags are a content organization method that transcends traditional classification limitations.You can imagine that an article may belong to the 'Marketing' category, but it can also be tagged with 'SEO optimization', 'Content strategy', 'Social media', and many other tags, which together depict the multiple thematic dimensions of the article.AnQiCMS provides powerful tag management features in the background, allowing us to create, edit, and manage these tags, and even set custom URLs and SEO information for them, which undoubtedly provides great flexibility for content operations.

AnQiCMS template system uses a syntax similar to Django template engine, simple and powerful. We mainly use two tags to interact with data: double curly braces{{变量}}Used to output variable content, while the single curly bracket plus percent sign{% 标签 %}It is used to perform logical operations, such as conditional judgments, loop traversals, and calling system built-in function tags. To display the list of all document tags, we need to rely on a core tag -tagList.

Core tags:tagListMagic

tagListThe tag is designed by AnQiCMS specifically for obtaining the document tag list.Its use is very intuitive and can help us easily display the required label set at any location on the page.

usually, we would call it like this:

{% tagList tags with limit="10" %}
    {# 在这里循环输出标签信息 #}
{% endtagList %}

In this code block:

• tagListis the name of the tag we call.
• tagsis the variable name we define for the list of tags obtained, you can name it according to your preference, for exampleallDocumentTagsThis variable will be an array containing multiple label objects.
• with limit="10"This is a parameter indicating that we want to retrieve up to 10 tags. This parameter is optional, and you can adjust the display quantity according to your actual needs.

The key to retrieving all document tags:itemId="0"

to displayallDocument tags, not just tags related to the current page, an extremely important parameter isitemId="0". WhenitemIdthe parameter is set to"0"then,tagListThe tag will ignore the context of the current page and instead query all tags used in the entire site's documents.

Therefore, here is a complete code example showing how to display the list of all document tags.

<div class="all-tags-section">
    <h2>全站标签云</h2>
    <ul class="tag-cloud">
        {% tagList allDocumentTags with itemId="0" limit="50" %}
            {% for tagItem in allDocumentTags %}
                <li class="tag-item">
                    <a href="{{ tagItem.Link }}" title="{{ tagItem.Title }}">{{ tagItem.Title }}</a>
                </li>
            {% empty %}
                <li class="no-tags-found">暂无任何标签</li>
            {% endfor %}
        {% endtagList %}
    </ul>
</div>

Let's analyze the code in detailtagItemThe valuable information contained in the variable:

• tagItem.Id: The unique ID of the tag.
• tagItem.Title: The display name of the tag, which is what we usually see.
• tagItem.Link: The link to the detail page of the tag, clicking on it will jump to the list page showing all documents under the tag. This is crucial for SEO and user navigation.
• tagItem.Description: Tag description information, can be set in the background, usually used for SEO optimization.
• tagItem.FirstLetter: The initial letter of the tag name, often used for displaying tag lists sorted alphabetically.
• tagItem.CategoryId: If the label is associated with a category, the category ID will be displayed.

In this example, we also巧妙ly made use offorin the loopemptya statement block. This means iftagListNo tags found, the page will display "No tags available" in a friendly manner instead of a blank space, which enhances the robustness of the user experience.

Advanced Applications and Personalized Display

In practice, we are not satisfied with simply listing all the tags, but also hope that they are presented in a more attractive or functional way:

1. Build an independent tag index page:In/template/你的模板目录/tag/index.htmlIn this specific template file, you can create a dedicated tag index page. CombinedtagListandpaginationtags, you can achieve a complete, paginated site-wide tag archive. For example:

   <div class="tag-index-page">
       <h1>所有标签</h1>
       <ul class="tag-list-full">
           {% tagList tags with itemId="0" type="page" limit="30" %}
               {% for item in tags %}
                   <li class="tag-entry">
                       <a href="{{ item.Link }}">{{ item.Title }} ({{ item.ArchiveCount }}篇文章)</a>
                       <p class="tag-description">{{ item.Description }}</p>
                   </li>
               {% empty %}
                   <li>当前站点尚未创建任何标签。</li>
               {% endfor %}
           {% endtagList %}
       </ul>
   
       {# 分页导航，仅在 type="page" 模式下生效 #}
       {% pagination pages with show="5" %}
           <div class="pagination-controls">
               {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}" class="prev-page">上一页</a>{% endif %}
               {% for pageItem in pages.Pages %}
                   <a href="{{ pageItem.Link }}" class="page-number {% if pageItem.IsCurrent %}active{% endif %}">{{ pageItem.Name }}</a>
               {% endfor %}
               {% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}" class="next-page">下一页</a>{% endif %}
           </div>
       {% endpagination %}
   </div>
   

   Please note,item.ArchiveCountIt is a very practical attribute that can display the number of associated documents under the label, allowing users to have a direct understanding of the popularity of the label.type="page"The parameter tells the system to generate pagination data and cooperatepaginationLabels display pagination links.

2. Create a "Hot TagsAlthoughtagListThe tag itself does not provide a direct parameter for sorting by popularity, but we canlimitCombine backend operation strategies (such as manually adjusting the display order of commonly used tags or regularly updating the recommended tag list) to simulate this effect. For example, only the most commonly used 10-20 tags are displayed in the sidebar or footer area, which guides users to focus on the core content:

   <aside class="sidebar-tags">
       <h3>热门标签</h3>
       <ul class="popular-tags">
           {% tagList popularTags with itemId="0" limit="15" %}
               {% for tag in popularTags %}
                   <li><a href="{{ tag.Link }}">{{ tag.Title }}</a></li>
               {% endfor %}
           {% empty %}
               <li>暂无热门标签。</li>
           {% endtagList %}
       </ul>
   </aside>
   

3.