How to display a list of tags and their details for all or specific articles on a website?
Hello!As an experienced AnQi CMS website operator, I fully understand your needs for the Tag function in content organization and optimization.Tags are an indispensable part of website content management, as they not only help users find relevant content faster, but also effectively improve the website's SEO performance.Below, I will explain in detail how to display the tag list and detailed information of all or specified articles on the AnQiCMS website.
Display the tag list and details of website articles in AnQiCMS
In Anqi CMS, the Tag feature provides a flexible and powerful way for content organization.By carefully setting and managing tags, you can associate articles of different categories, different models, but related to the same theme, which greatly facilitates users in exploring content and provides search engine crawlers with a clearer content structure.AnQiCMS provides dedicated template tags to help you display these tags and their associated content on the website front end.
Display the list of all website tags
If you need to display all or part of the popular tags on a page of the website, such as a "tag cloud" page or sidebar, you can use the tags provided by AnQiCMS.tagListLabel. This label can help you flexibly control the display quantity, sorting method, and even filter according to the first letter or category of the label.
You can define a tag list in the following way:
{% tagList tags with limit="50" order="id desc" %}
<div class="tag-cloud">
{% for item in tags %}
<a href="{{item.Link}}" title="查看所有关于 {{item.Title}} 的文章">{{item.Title}}</a>
{% empty %}
<p>暂无可用标签。</p>
{% endfor %}
</div>
{% endtagList %}
In the above code,tagsIs the variable name you define for the tag list.limit="50"The parameter limits the maximum display of 50 tags,order="id desc"It specified to sort by tag ID in descending order. Inside the loop,item.LinkThe link to the tag detail page will be generated,item.TitleIt will display the tag name. If the website has not set any tags,{% empty %}The content within the block will be displayed.
If you want to display all tags on a dedicated tag index page (for example)tag/index.html) and support pagination, you can implement tags in the following way:tagListadd in thetype="page"the parameter and cooperatepaginationTag implementation:
{% tagList tags with type="page" limit="20" order="id desc" %}
<ul class="tag-list-paginated">
{% for item in tags %}
<li><a href="{{item.Link}}">{{item.Title}} ({{item.ArchiveCount}} 篇文章)</a></li>
{% empty %}
<li>暂无可用标签。</li>
{% endfor %}
</ul>
{% endtagList %}
<div class="pagination-area">
{% pagination pages with show="5" %}
{# 此处添加分页导航的HTML结构，例如首页、上一页、中间页码、下一页、尾页等 #}
<a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
{% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>{% endif %}
{% for pageItem in pages.Pages %}<a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>{% endfor %}
{% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>{% endif %}
<a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
{% endpagination %}
</div>
In this example,item.ArchiveCountCan display the number of articles associated with the tag, helping users understand the popularity of the tag.
Displays the tag list of the specified article.
On the article detail page, you often need to display all the tags associated with the current article. AnQiCMS'stagListThe tag is very smart, when it is called in the document detail page, it will default get the current article ID throughitemIdAll labels under the automatically acquired parameters do not require you to manually specify the article ID.
Here is an example of an article detail page (for examplearticle/detail.html) where the current article tags are displayed.
<article class="article-detail">
<h1>{{archive.Title}}</h1>
<!-- 文章内容及其他信息 -->
<div class="article-tags">
<strong>相关标签:</strong>
{% tagList tags with limit="10" %}
{% for item in tags %}
<a href="{{item.Link}}" class="tag-item">{{item.Title}}</a>
{% empty %}
<span>当前文章暂无标签。</span>
{% endfor %}
{% endtagList %}
</div>
</article>
This code will automatically detect the article currently being viewed and list up to 10 tags associated with the article.When users click on these tags, they can jump to the details page of the tag to view all articles containing that tag.
Display Tag Details Information
When a user clicks on a tag, they will usually enter a dedicated tag detail page.On this page, you may need to display the detailed information of the tag itself, such as the tag name, description, and even a Logo related to the tag.tagDetailLabel to retrieve this information.
On a tag details page (usually corresponding to a template filetag/list.htmlortag/detail.html), you can obtain and display the tag details like this:
<section class="tag-header">
{% tagDetail currentTag with name="Title" %}
<h1>{{currentTag}}</h1>
{% endtagDetail %}
{% tagDetail tagDescription with name="Description" %}
{% if tagDescription %}
<p class="tag-description">{{tagDescription}}</p>
{% endif %}
{% endtagDetail %}
{% tagDetail tagLogo with name="Logo" %}
{% if tagLogo %}
<img src="{{tagLogo}}" alt="{% tagDetail with name='Title' %}" class="tag-logo">
{% endif %}
{% endtagDetail %}
</section>
In this example,currentTag/tagDescriptionandtagLogoIt is defined as a variable for the label title, description, and Logo.tagDetailBy default, the label will automatically identify the label ID based on the current page's URL to obtain the corresponding detailed data.
Show the list of articles under the specified Tag
The core function of the tag detail page is to display all the articles tagged with that tag. To do this, you can usetagDataListThe tag is specifically used to retrieve the list of articles associated with the tag ID, and it supports pagination, sorting, and other functions.
The following is a typical usage of displaying the article list under the tag on the tag detail page:
<section class="tag-articles">
<h2>“{% tagDetail with name="Title" %}”相关文章</h2>
{% tagDataList archives with type="page" limit="10" order="views desc" %}
<ul class="article-list">
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h3 class="article-title">{{item.Title}}</h3>
<p class="article-description">{{item.Description|truncatechars:150}}</p>
<div class="article-meta">
<span>发布于: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量: {{item.Views}}</span>
</div>
</a>
</li>
{% empty %}
<li>此标签下暂无文章。</li>
{% endfor %}
</ul>
{% endtagDataList %}
<div class="pagination-area">
{% pagination pages with show="5" %}
{# 此处添加分页导航的HTML结构 #}
<a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
{% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>{% endif %}
{% for pageItem in pages.Pages %}<a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>{% endfor %}
{% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>{% endif %}
<a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
{% endpagination %}
</div>
</section>
In this example,tagDataListTag throughtype="page"Pagination feature is enabled,limit="10"Specify 10 articles to be displayed per page,order="views desc"then sorted in descending order by the number of page views of the articles.item.Link/item.Title/item.Description/item.CreatedTimeanditem.ViewsThe fields are used to display the detailed information of the article list.
By using these AnQiCMS built-in tags, you can flexibly and efficiently display and manage tags and their related content at various positions on the website, thereby enhancing the user experience and the overall content structure of the website.
Frequently Asked Questions (FAQ)
Why did I set the tag but it didn't display on the front-end page?
Answer: Please first check your AnQiCMS backend, make sure you have created and managed tags in "Content Management" -> "Document Tags".Next, when publishing or editing an article, confirm that the article has been correctly checked or entered with the corresponding tags.tagListortagDataListUse tags to call them. Finally, if your website has enabled caching, please try to update the system cache to ensure that the latest data is rendered.
How to set a friendly URL for tabs to benefit SEO?
Answer: AnQiCMS supports pseudo-static functionality, you can use "Function Management" -> "Pseudo-Static Rule" to define the URL structure of the tab page. Indesign-director.mdThe document mentions that the template path for the tag home page is usuallytag/index.html, the tag document list page istag/list.html. The pseudo-static rules can be configured in the background. For example, you can set the URL of the tag list page to/tags/{tagname}(-{page}).htmlor/tag/{id}(-{page}).htmlof which{tagname}or{id}It will dynamically generate a custom URL alias or ID based on the tag, which helps search engines better understand and crawl your tag page.
Ask: Can I display independent tag lists for articles of different content models?
Answer: Although AnQiCMS tags are shared across the entire site, they do not differentiate between content models (such as articles and products can share the same tag), but when calling the tag list,tagListandtagDataListThe tag itself does not directly support filtering bymoduleIdHowever, when displayingthe article list under a specific tagthen,tagDataListThe tag does supportmoduleIdThe parameter's. This means that you can display the list of articles under a specific tag bymoduleId="1"(article model ID) ormoduleId="2"(Product Model ID) to only display the content under the tag that belongs to a specific model. If you need to filter out tags that are only associated with a specific model article, you may need to make more advanced customization in the controller logic on the tag page or list page, or use the template.tagDataListFirst get the article, then extract the tags in reverse.