How to call and display the list of all website tags (Tag) in AnQiCMS template?

As an experienced website operations expert, I am happy to give you a detailed explanation of how to efficiently and elegantly call and display the Tag list of all websites in the AnQi CMS template.AnQi CMS with its powerful content management capabilities and flexible template mechanism makes this operation intuitive and practical.

Unveiling AnQi CMS: How to call and display all website tag lists in the template

In the era of modern content marketing and SEO optimization, website tags (Tags) play a crucial role.They can not only help users find relevant content quickly and improve the in-site navigation experience, but are also key elements for search engines to understand the theme of the website content.AnQi CMS fully understands its importance and provides a complete tag management function.How can you effectively display these valuable tags in your website template?

Overview of core features: Tag management mechanism of AnQi CMS

On the Anqi CMS backend, you will find the powerful 'Document Tag' management module.Here, you can create, edit, delete various tags, and associate them with your articles, products, and other content.Each tag can have an independent name, index letter, custom URL, and even a dedicated SEO title and description, which lays a solid foundation for subsequent template calls and SEO optimization.

The tag design of AnQi CMS is very flexible, a tag can be associated with documents of different content models at the same time, thus realizing cross-model content aggregation.In the front-end template, we are able to intelligently obtain and render these label data through built-in template tags.

Call and display all tag list templates magic

To call and display all website tag lists in the AnqiCMS template, we need to usetagListThis is the core template tag. This tag is designed to be very flexible, meeting various calling needs from hot tags to the entire site tags.

Generally, you would want to place it at a specific location on the website, such as the homepage sidebar, footer navigation area, or a dedicated "tag cloud" page (usually corresponding to a template filetag/index.html) to display these tags.

Here is the basic structure of the code to call the list of all tags:

<div class="tag-cloud">
    <h2>网站所有标签</h2>
    <ul class="tag-list">
        {% tagList allTags with itemId="0" %} {# 明确指定获取全站所有标签 #}
            {% for tag in allTags %}
                <li class="tag-item">
                    <a href="{{ tag.Link }}" title="查看更多关于 {{ tag.Title }} 的内容">{{ tag.Title }}</a>
                </li>
            {% else %}
                <li class="no-tags-message">抱歉，目前还没有任何网站标签。请在后台添加。</li>
            {% endfor %}
        {% endtagList %}
    </ul>
</div>

Let's parse the logic of this code step by step:

1. {% tagList allTags with itemId="0" %}: This is the core.

   • tagListIs a template tag provided by AnQi CMS specifically for obtaining the tag list.
   • allTagsIt is a variable name specified for the label list data obtained. You can customize it as you like, for examplemyTagsorwebsiteTags.
   • with itemId="0"It is the key parameter here. When you need to obtainAll labels on the sitewhen, explicitlyitemIdis set to0This will tell the system to ignore any content ID associations on the current page and directly pull all published tag data.If you are on a non-content detail page (such as the homepage) and do not specifyitemIdthe system may also default to returning all tags, but for the clarity and robustness of the code, it is explicitly specifieditemId="0"is a good habit.

2. {% for tag in allTags %}: The tag list data will be returned as an array object toallTagsthe variable, so we need to usefora loop to iterate through it. In each iteration,tagthe variable will represent an independent tag object.

3. <li class="tag-item"><a href="{{ tag.Link }}" title="查看更多关于 {{ tag.Title }} 的内容">{{ tag.Title }}</a></li>In the loop body, you can access the properties of each tag object and display them.

   • {{ tag.Link }}This is the URL link of the label, clicking on it will usually jump to the content list page under the label.
   • {{ tag.Title }}This is the display name of the tag.
   • exceptLinkandTitleYou can also access other useful fields, such astag.Id(Label ID),tag.Description(Label description),tag.FirstLetter(Label initial letter) etc., apply flexibly according to your design requirements.

4. {% else %}This isforAn elegant extension of the loop. IfallTagsThe list is empty (i.e., the website currently has no tags), thenelseThe content will be rendered out, giving the user a friendly prompt.

Deep customization: More possibilities for tag lists

In addition to displaying all tags,tagListTags also provide rich parameters, allowing you to have more fine-grained control:

• Limit the Display Quantity: If you only want to display the top 10 popular tags in the sidebar, you can addlimit="10"parameters:{% tagList hotTags with itemId="0" limit="10" %}.

• Sort by alphabet: Would you like to create a label navigation sorted alphabetically? You can useletter="A"orletter="B"set parameters such as.

• Label list pagination: If your website has a large number of tags, you can put them on a dedicated tag page (such astag/index.htmlOn it, you can combinetype="page"Parameters andpaginationtags to implement pagination display, optimize loading speed and user experience.

  {# 示例：在tag/index.html中分页显示所有标签 #}
  {% tagList allTagsPage with type="page" limit="20" %}
      {# 遍历并显示标签的代码与上述类似 #}
      {% for tag in allTagsPage %}
          <li class="tag-item">
              <a href="{{ tag.Link }}" title="{{ tag.Title }}">{{ tag.Title }}</a>
          </li>
      {% endfor %}
  {% endtagList %}
  
  {# 别忘了加上分页导航 #}
  {% pagination pages with show="5" %}
      {# 分页链接的渲染代码 #}
      {# ... 这里省略具体的页面链接渲染代码，可参考文档中的pagination标签用法 #}
  {% endpagination %}
  

When the user clicks on a tag, it will jump to the detail page of that tag (usually corresponding to a template file)tag/list.html), at this time you can usetagDataListTag to retrieve the list of all associated documents under this tag, further improving content aggregation.

Considerations and suggestions in practice.

• Template File Location: Place the above code in the template file where you want to display the tag list. If it is a site-wide feature, you can consider placing it inpartial/the directory under a common template file (such assidebar.htmlorfooter.html)，then use{% include "partial/sidebar.html" %}The way to introduce it into the main template.
• Style beautificationThe beauty of the tag list directly affects user experience. By usingdiv.tag-cloud/ul.tag-list/li.tag-item