How to display the Tag list of articles and detailed information of a single Tag as well as associated documents in AnQiCMS?

In a content management system, how to effectively organize and display content is the key to improving user experience and search engine friendliness.AnQiCMS provides a powerful Tag feature that helps us classify and display content more accurately.This article will provide a detailed introduction on how to flexibly use tags in AnQiCMS, including displaying tag lists, viewing detailed information of individual tags, and listing documents associated with specific tags.

The role of tags in AnQiCMS

In AnQiCMS, tags are a flexible content organization method, different from the traditional category (Category).Categories usually represent the hierarchical structure of content, while tags are more focused on the keywords or thematic associations of the content.By adding tags to articles, we can achieve:

• Enhance the discoverability of content: Users can quickly find all related topic articles by clicking on the tags.
• Optimize SEO: The tab can serve as a long-tail keyword landing page, helping search engines better understand the content of the website.
• Improve user experience：to provide users with multi-dimensional content navigation, improving the interactivity and stickiness of the website.

In the AnQiCMS backend, you can conveniently manage all tags.Enter the "Document Tag" feature under "Content Management" to perform add, edit, and delete operations.Each tag has a name, index letter, description, custom URL, and SEO-related settings, all of which provide convenience for front-end display and search engine optimization.

Display the tag list on the website.

To display the tag list at any location on the website (such as the sidebar, article footer, or a dedicated tag cloud page), AnQiCMS providestagListLabel. This label is very flexible and can display various types of label collections according to different needs.

For example, if you want to display the top 10 tags on your website, you can use the following methodtagList:

<div>
    <h3>热门标签</h3>
    <ul>
    {% tagList tags with limit="10" %}
        {% for item in tags %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
        {% endfor %}
    {% endtagList %}
    </ul>
</div>

In this example,tagsis the variable name we define,limit="10"It limited to only displaying 10 tags. EachitemincludesId/Title(Tag name) andLink(Tag page link) and other commonly used information, which can be called as needed.

In addition, when you need to display all the tags associated with the current article on the article detail page,tagListit can also be useful. At this time, you can useitemIdThe parameter allows the tag list to only display tags related to the current document:

<div>
    <strong>文章标签：</strong>
    {% tagList tags with itemId=archive.Id limit="10" %}
    {% for item in tags %}
    <a href="{{item.Link}}">{{item.Title}}</a>
    {% endfor %}
    {% endtagList %}
</div>

here,archive.IdIt will automatically retrieve the ID of the current article to ensure that the displayed tags are unique to the current article.

Display detailed information of a single tag

When a user clicks on a tag, they will usually enter a dedicated tag detail page.On this page, we may need to display the title, description, and other detailed information of the tag to tell the user the theme of the current page.AnQiCMS providedtagDetailTag to get all related data of a single tag.

Generally, intag/detail.htmlortag/index.html(If designed to use this template for all tag lists and individual tag details) such a template file,tagDetailwill automatically retrieve the tag ID of the current page.

<main>
    <h1>{{ tagDetail with name="Title" }}</h1>
    {%- tagDetail tagDescription with name="Description" %}
    {%- if tagDescription %}
    <p>{{ tagDescription }}</p>
    {%- endif %}
    <p>该标签下共有 {{ tagDataList archives with type="list" limit="1" %}{{ archives|length }}{% endtagDataList }} 篇文章。</p>
</main>

In the code above,tagDetail with name="Title"The title of the current tag was directly output,tagDescription with name="Description"Then the description of the tag was retrieved and passed through,ifEnsure that the description is displayed when it is available to avoid blank tags on the page. You can also get theId/Link/FirstLetter(index letter) andLogofields.

display the documents associated with the tag

On the tag detail page, the most core function is of course to display all articles or products with this tag. AnQiCMS'stagDataListTags are specifically used for this purpose. They can retrieve and display all associated documents based on the tag ID and support pagination features to make content display more friendly.

In the template of the label detail page, you can use it like thistagDataListto display the related article list:

<section>
    <h2>相关文章列表</h2>
    <ul>
    {% tagDataList archives with type="page" limit="10" %}
        {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h3>{{item.Title}}</h3>
                <p>{{item.Description|truncatechars:100}}</p>
                <span>发布时间: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量: {{item.Views}}</span>
            </a>
            {% if item.Thumb %}
            <img src="{{item.Thumb}}" alt="{{item.Title}}">
            {% endif %}
        </li>
        {% empty %}
        <li>该标签下暂无文章。</li>
        {% endfor %}
    {% endtagDataList %}
    </ul>

    {# 分页导航 #}
    <nav class="pagination">
        {% pagination pages with show="5" %}
            {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
            {% for page in pages.Pages %}<a class="{% if page.IsCurrent %}active{% endif %}" href="{{page.Link}}">{{page.Name}}</a>{% endfor %}
            {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
        {% endpagination %}
    </nav>
</section>

here,tagDataListAutomatically identify the ID of the current label page and list the relevant articles in a pagination format(type="page"andlimit="10")archivesEach variable containsitemthe content of the articleId/Title/Link/Description/Thumb(thumbnail),CreatedTime(Publishing time) andViews(Reading volume) and other information. The bottompaginationtags are responsible for generating beautiful pagination links, allowing users to easily browse all related content.

BytagList/tagDetailandtagDataListThese three core tags provide comprehensive and powerful support for the AnQiCMS content tagging and display management, helping the website to better organize content and improve user experience and search engine performance.

Frequently Asked Questions (FAQ)

1. Ask: What is the difference between tags and categories? How should I choose to use them?Answer: Tags and categories are both ways to organize content, but they have different focuses.Categories are usually used to build the hierarchical structure of a website, and content is strictly attributed to one or more categories.And tags are more like keywords or themes of content, a piece of content can be marked with multiple tags, and tags usually do not have a hierarchical relationship.When selecting, you can use core, broad topics as categories, and more specific, flexible keywords as tags to provide multi-dimensional content navigation.

2. Ask: Can the URL structure of the AnQiCMS tag page be customized?Answer: yes. AnQiCMS provides a powerful pseudo-static rule setting feature.In the background feature management, find the "pseudo-static rules", you can choose or customize the URL structure of the label page.For example, the default structure may containtag/index.htmlortag/list.htmlBut you can use custom rules to make your URL more descriptive or more SEO-friendly, for example/tags/{tagname}.htmlor/topic/{id}.htmlEtc. In the tag background settings, each tag can also be set to a custom URL alias.

3. Question: Why did I set a tag, but it did not display on the front-end page?Answer: There are several common reasons why the label may not be displayed:

   • Missing or incorrect template codePlease check your template file (such asbash.html/tag/index.htmlorarchive/detail.htmletc.) to see if it has been used correctlytagList/tagDetailortagDataListLabel, make sure the variable names, parameters, and so on are spelled correctly.
   • Label is not associated with contentIf you expect:tagListDisplay the tags of an article, but if the article has not been added any tags, it will not be displayed naturally. Or, if there are no associated documents under a certain tag, thentagDataListit will also be displayed as empty.
   • Cache issueAfter modifying in the background, please try to clear the system cache and clean the browser cache to ensure that the latest content is loaded.
   • Permission or publishing statusMake sure the tag itself is not disabled and all associated articles are published.