AnQiCMS如何显示某个特定Tag下的所有文章列表？

在AnQiCMS中，显示某个特定标签（Tag）下的所有文章列表是一个常见且实用的内容运营需求。通过AnQiCMS灵活的模板系统，您可以轻松实现这一功能，为用户提供更精准的内容导航。

首先，让我们了解一下AnQiCMS中的标签机制。标签是内容组织的重要工具，它允许您为文章、产品等内容添加关键词，从而将相关内容进行横向关联，即使这些内容分属不同的分类。这种关联方式有助于用户发现更多感兴趣的内容，同时也利于搜索引擎优化。在内容管理后台，当您发布或编辑文章时，可以为内容添加一个或多个标签，这些标签随后便可以在前台页面上被调用和展示。

要实现在前端页面显示特定标签下的文章列表，AnQiCMS提供了强大的模板标签功能。其中，tagDataList 标签是专门为此目的设计的。它能够根据指定的标签ID或当前页面自动识别的标签，获取该标签下所有相关的文章列表。

在模板中实现标签文章列表

通常，AnQiCMS会为每个标签生成一个专门的列表页，其默认模板文件路径是 /template/你的模板目录/tag/list.html。在这个特殊的模板文件中，tagDataList 标签会自动识别当前页面的标签ID，从而无需手动指定 tagId 参数。当然，如果您希望在其他页面（例如首页、侧边栏等）显示特定标签下的文章，也可以通过明确指定 tagId 来实现。

逐步构建你的标签文章列表页面

1. 确定模板文件： 如前所述，您可以在 tag/list.html 中进行操作。如果您想在其他页面展示，可以在相应页面（如 index.html 或自定义内容页）中添加以下代码块。

2. 获取标签自身的信息 (可选但推荐)： 在标签列表页中，通常会显示当前标签的名称和描述，以帮助用户了解正在浏览的内容。您可以使用 tagDetail 标签来获取当前标签的详细信息。

   {# 获取当前标签的详细信息 #}
   {% tagDetail currentTag with name="Title" %}
   <h1>{{ currentTag }} 标签下的文章</h1>
   {% tagDetail tagDescription with name="Description" %}
   {% if tagDescription %}
   <p>{{ tagDescription }}</p>
   {% endif %}
   

3. 使用 tagDataList 获取文章列表： 这是核心步骤。tagDataList 标签用于获取指定标签下的文章数据。您可以通过以下参数来精细控制获取的内容：

   • tagId：标签的ID。在 tag/list.html 中通常无需指定，系统会自动识别当前标签ID。若在其他页面调用，则需要明确指定，例如 tagId="123"。
   • moduleId：如果您的网站有多种内容模型（如文章、产品），您可以通过 moduleId 来指定只获取某个模型下的内容，例如 moduleId="1" (通常代表文章模型)。
   • type：设置为 "page" 以启用分页功能，这样当文章数量较多时，可以分多页显示。
   • limit：每页显示的文章数量，例如 limit="10"。
   • order：文章的排序方式，例如 order="id desc" (按ID倒序，即最新发布) 或 order="views desc" (按浏览量倒序)。

   {# 使用 tagDataList 获取标签下的文章列表，并启用分页 #}
   {% tagDataList archives with type="page" limit="10" %}
       {# 循环显示文章列表 #}
       {% for item in archives %}
       <article>
           <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
           {% if item.Thumb %}
           <a href="{{item.Link}}">
               <img src="{{item.Thumb}}" alt="{{item.Title}}">
           </a>
           {% endif %}
           <p>{{item.Description}}</p>
           <footer>
               <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
               <span>阅读量: {{item.Views}}</span>
           </footer>
       </article>
       {% empty %}
       <p>该标签下暂无文章。</p>
       {% endfor %}
   {% endtagDataList %}
   

4. 添加分页导航： 如果 tagDataList 的 type 参数设置为 "page"，那么您就可以使用 pagination 标签来生成分页导航，提升用户体验。

   {# 分页导航 #}
   <div class="pagination">
       {% pagination pages with show="5" %}
           <ul>
               {# 首页链接 #}
               <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                   <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
               </li>
               {# 上一页链接 #}
               {% if pages.PrevPage %}
               <li class="page-item">
                   <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
               </li>
               {% endif %}
               {# 中间页码 #}
               {% for pageItem in pages.Pages %}
               <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                   <a href="{{pageItem.Link}}">{{pageItem.Name}}</a>
               </li>
               {% endfor %}
               {# 下一页链接 #}
               {% if pages.NextPage %}
               <li class="page-item">
                   <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
               </li>
               {% endif %}
               {# 末页链接 #}
               <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                   <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
               </li>
           </ul>
       {% endpagination %}
   </div>
   

完整的模板代码示例

将以上片段组合起来，一个典型的AnQiCMS标签文章列表页面可能看起来像这样：

”`twig {% extends ‘base.html’ %} {# 继承基础模板 #}

{% block title %}

{% tagDetail currentTagTitle with name="Title" %}
<title>{{ currentTagTitle }} - 标签文章列表</title>

{% endblock %}

{% block content %}

<main>
    <section class="tag-header">
        {% tagDetail currentTagName with name="Title" %}
        <h1>标签: {{ currentTagName }}</h1>
        {% tagDetail tagDescription with name="Description" %}
        {% if tagDescription %}
        <p>{{ tagDescription }}</p>
        {% endif %}
    </section>

    <section class="article-list">
        {% tagDataList archives with type="page" limit="10" order="id desc" %}
            {% for item in archives %}
            <article class="article-item">
                {% if item.Thumb %}
                <figure class="article-thumb">
                    <a href="{{item.Link}}">
                        <img src="{{item.Thumb}}" alt="{{item.Title}}">
                    </a>
                </figure>
                {% endif %}
                <div class="article-info">
                    <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
                    <p class="article-description">{{item.Description}}</p>
                    <div class="article-meta">
                        <span>发布于: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                        <span>阅读量: {{item.Views}}</span>
                        {# 您还可以显示文章所属分类 #}
                        {% categoryDetail articleCategory with name="Title" id=item.CategoryId %}
                        <span>分类: <a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{{articleCategory}}</a></span>
                    </div>
                </div>
            </article>
            {% empty %}
            <p>该标签下暂无内容，敬请期待！</p>
            {% endfor %}

            {# 分页导航 #}
            <div class="pagination-container">
                {% pagination pages with show="5" %}
                    <ul class="pagination">
                        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                            <a href="{{pages.FirstPage.Link}}">首页</a>
                        </li>
                        {% if pages.PrevPage %}
                        <li class="page-item">
                            <a href="{{pages.PrevPage.Link}}">上一页</a>
                        </li>
                        {% endif %}
                        {% for pageItem in pages.Pages %}
                        <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                            <a href="{{pageItem.Link}}">{{pageItem.Name}}</a>
                        </li>
                        {% endfor %}
                        {% if pages.NextPage %}
                        <li class="page-item">
                            <a href="{{pages.NextPage.Link}}">下一页</a>
                        </li>
                        {% endif %}
                        <li