How to display the Tag list associated with the article in AnQiCMS?
In AnQiCMS, effectively managing and displaying the list of tags (Tag) for articles can not only help organize content but also significantly improve the internal link structure and search engine optimization (SEO) of the website.Tags act as a flexible classification method, linking articles across categories and themes, providing users with a richer browsing path.
Manage and create article tags in the background
First, understand how to add and manage tags for articles in the AnQiCMS backend is fundamental.When you publish or edit a document, you will see a dedicated 'Tag Tag' input box.Here, you can select an existing tag or directly enter a new tag name, then press Enter to convert it into a new tag.This means the process of creating tags is very convenient, you can add new ones whenever you need according to the content of the article.
The power of tags lies in their flexibility: they do not depend on fixed classification levels, and the same tag can be shared by articles of different content models (such as articles, products).In the "Content Management" module, under the "Document Tag" feature, you can centrally view, edit, and delete all tags that have been created.Each tag can still have an independent "custom URL" set, which is crucial for improving the SEO performance of the tag page, allowing search engines to better crawl and index.In addition, tags also support settings such as 'SEO title', 'tag keywords', 'tag description', etc., to help you manage the meta information of each tag page in detail.
Display associated tags on the article detail page
In AnQiCMS, to display the tag list associated with the current article at the bottom or sidebar of the article detail page, you need to use template tagstagList. This tag is used to retrieve the tag data of a specified document.
Generally, in the template of an article detail page (such asarchive/detail.htmlor a custom article template), you can call it in this way:
<div>
<strong>相关标签：</strong>
{% tagList tags with itemId=archive.Id limit="10" %}
{% if tags %}
{% for item in tags %}
<a href="{{item.Link}}" class="tag-link">{{item.Title}}</a>{% if not forloop.Last %}, {% endif %}
{% endfor %}
{% else %}
暂无相关标签
{% endif %}
{% endtagList %}
</div>
In this code:
{% tagList tags with itemId=archive.Id limit="10" %}:tagListIs the tag for getting the tag list.tagsIs the variable name we define for the tag list data.itemId=archive.IdIs critical, it tells the system to get the current article (by thearchive.IdAll tags associated with the identifier.limit="10"It limits the display of up to 10 tags, you can adjust the number according to your design requirements.{% for item in tags %}: Loop through each tag obtained.{{item.Link}}: Displays the URL link of the tag, clicking on it will jump to the article list page under the tag.{{item.Title}}: Displays the name of the tag.{% if not forloop.Last %}, {% endif %}This is a little trick to add a comma separator after each tag name, but not the last one, making the display more beautiful.
This way, when users visit the article detail page, they can see all the tags involved in this content, making it easier for them to explore related topics further.
Create an independent tag list page
In addition to displaying on the article detail page, you may also want to have a dedicated page listing all the tags on the website, or popular tags. This is usually in the template directory,tag/index.htmlImplement in the file.
To display all tags on the website, you can use this method.tagListTags:
<h1>所有标签</h1>
<div class="tag-cloud">
{% tagList allTags with itemId="0" limit="50" %}
{% if allTags %}
{% for item in allTags %}
<a href="{{item.Link}}" title="查看所有含“{{item.Title}}”标签的文章" class="tag-item">{{item.Title}} ({{item.ArchiveCount}})</a>
{% endfor %}
{% else %}
目前还没有创建任何标签。
{% endif %}
{% endtagList %}
</div>
here,itemId="0"It means to get all tags, not the tags of a specific article.limit="50"It limits the maximum display of 50 tags. You can evenitem.Titleadd it besideitem.ArchiveCountto display how many articles are under the tag, increasing the reference for user selection.
Display the article list under a certain tag
When a user clicks on a tag link (for example{{item.Link}}) they usually expect to see a list of all articles containing that tag. AnQiCMS provides for thistagDataListLabels, this feature is usually implementedtag/list.htmlin the template.
In this template, the system automatically identifies the current label ID being accessed. You can display all articles under this label like this:
<h1>标签：{% tagDetail with name="Title" %} 下的文章</h1>
<div class="article-list">
{% tagDataList archives with type="page" limit="10" %}
{% if archives %}
{% for article in archives %}
<div class="article-item">
<h2><a href="{{article.Link}}">{{article.Title}}</a></h2>
<p>{{article.Description}}</p>
<div class="article-meta">
<span>发布于：{{stampToDate(article.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{{article.Views}}</span>
</div>
</div>
{% endfor %}
{% else %}
当前标签下暂无文章。
{% endif %}
{% endtagDataList %}
{# 分页导航 #}
{% pagination pages with show="5" %}
<div class="pagination-nav">
{% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
{% for pageItem in pages.Pages %}
<a href="{{pageItem.Link}}" class="{% if pageItem.IsCurrent %}current{% endif %}">{{pageItem.Name}}</a>
{% endfor %}
{% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
</div>
{% endpagination %}
</div>
Here:
{% tagDetail with name="Title" %}Used to get the title of the current tag page, ensuring that the user knows which tag's content they are browsing.{% tagDataList archives with type="page" limit="10" %}:tagDataListUsed to get the list of articles belonging to the current tag.archivesIs the variable name for article data.type="page"Enables pagination,limit="10"Sets 10 articles per page.