如何显示指定Tag下的所有文章列表,并支持分页展示?

作为一名资深的安企CMS网站运营人员,我深知高质量、易于理解的内容对于用户体验至关重要。今天,我们将探讨如何在安企CMS中实现指定标签下的文章列表展示,并为其添加实用的分页功能,这对于提升用户浏览体验和网站SEO都具有重要意义。

理解标签页面的重要性

在安企CMS中,标签(Tag)是一种强大的内容组织工具。它们允许我们将不同分类甚至不同模型的内容通过共同的主题或关键词关联起来,形成独特的聚合页面。一个精心构建的标签页面不仅能帮助用户快速找到感兴趣的内容,还能为搜索引擎提供更多抓取入口,提升网站的关键词排名。显示指定标签下的文章列表是构建这些有价值页面的核心环节。

定位模板文件

根据安企CMS的模板设计约定,标签相关的文章列表通常由位于您的模板目录下的 tag/list.html 文件负责渲染。如果您正在定制一套新的模板,确保在此路径下创建或修改此文件,以便系统能够正确识别并应用它。

核心标签:获取指定标签下的文章列表

tag/list.html 文件中,我们将使用安企CMS内置的 tagDataList 标签来获取与当前标签关联的所有文章。此标签功能强大,能够根据多种条件筛选内容。

要获取当前访问的标签下的文章列表,tagDataList 标签会自动识别当前页面的标签ID,无需我们手动指定 tagId 参数。如果确实需要获取特定ID的标签文章,可以通过 tagId="X" 的形式传入。

为了实现分页功能,我们必须将 type 参数设置为 "page"。同时,通过 limit 参数来控制每页显示的文章数量。例如,limit="10" 将意味着每页显示10篇文章。

一个基本的 tagDataList 用法如下所示,我们将获取到的文章列表赋值给 archives 变量:

{% tagDataList archives with type="page" limit="10" %}
    {% for item in archives %}
        <article>
            <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
            <p>{{ item.Description|truncatechars:150 }}</p>
            {% if item.Thumb %}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
            {% endif %}
            <time>{{ stampToDate(item.CreatedTime, "2006-01-02") }}</time>
            <span>浏览量:{{ item.Views }}</span>
        </article>
    {% empty %}
        <p>当前标签下没有任何文章。</p>
    {% endfor %}
{% endtagDataList %}

在上面的代码片段中,我们遍历了 archives 变量中的每一篇文章 (item),并展示了其标题、链接、描述、缩略图、发布时间以及浏览量。Description|truncatechars:150 是一个过滤器,用于截断描述文本到150个字符。stampToDate 标签则用于将时间戳格式化为可读的日期格式。

实现分页功能

在文章列表内容展示完毕后,我们需要引入 pagination 标签来生成分页导航。此标签与 tagDataList 结合使用,能够自动识别 type="page" 模式下的分页数据。

pagination 标签通常会接收一个 pages 变量,其中包含了分页所需的所有信息,例如总条数、总页数、当前页码以及上一页、下一页、首页、末页和中间页码的链接。show 参数可以控制在分页导航中最多显示多少个页码按钮。例如,show="5" 会显示当前页附近的最多5个页码。

分页标签的使用示例如下:

<div class="pagination-container">
    {% pagination pages with show="5" %}
        {% if pages.FirstPage %}
            <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
        {% endif %}

        {% if pages.PrevPage %}
            <a class="page-link" href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
        {% endif %}

        {% for item in pages.Pages %}
            <a class="page-link {% if item.IsCurrent %}active{% endif %}" href="{{ item.Link }}">{{ item.Name }}</a>
        {% endfor %}

        {% if pages.NextPage %}
            <a class="page-link" href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
        {% endif %}

        {% if pages.LastPage %}
            <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
        {% endif %}
    {% endpagination %}
</div>

结合文章列表和分页功能,一个完整的 tag/list.html 模板文件内容将包含这两部分,确保用户在浏览标签聚合内容时能够获得流畅且完整的体验。

完整的模板代码示例

将上述两部分代码合并,您可以在 tag/list.html 模板文件中构建一个功能完善的标签文章列表页面:

{# tag/list.html #}

{# 获取当前标签的详细信息,用于页面TDK或标题展示 #}
{% tagDetail currentTag with name="Title" %}
{% tdk seoKeywords with name="Keywords" %}
{% tdk seoDescription with name="Description" %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ currentTag }} - {% tdk with name="Title" siteName=true %}</title>
    <meta name="keywords" content="{{ seoKeywords }}">
    <meta name="description" content="{{ seoDescription }}">
    {# 引入您的CSS文件 #}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
</head>
<body>
    {# 引入公共头部,如果您的模板有的话 #}
    {% include "partial/header.html" if_exists %}

    <main class="main-content">
        <section class="tag-articles">
            <h1>标签:{{ currentTag }}</h1>

            <div class="article-list">
                {% tagDataList archives with type="page" limit="10" %}
                    {% for item in archives %}
                        <article class="article-item">
                            <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
                            <p class="article-description">{{ item.Description|truncatechars:150 }}</p>
                            {% if item.Thumb %}
                                <div class="article-thumb">
                                    <a href="{{ item.Link }}">
                                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                                    </a>
                                </div>
                            {% endif %}
                            <div class="article-meta">
                                <time datetime="{{ stampToDate(item.CreatedTime, "2006-01-02T15:04:05") }}">发布于: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</time>
                                <span>浏览量: {{ item.Views }}</span>
                            </div>
                        </article>
                    {% empty %}
                        <p class="no-content-message">当前标签下暂时没有相关的文章。</p>
                    {% endfor %}
                {% endtagDataList %}
            </div>

            <div class="pagination-container">
                {% pagination pages with show="5" %}
                    <ul class="pagination">
                        {# 首页 #}
                        {% if pages.FirstPage %}
                            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                                <a class="page-link" href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
                            </li>
                        {% endif %}
                        {# 上一页 #}
                        {% if pages.PrevPage %}
                            <li class="page-item">
                                <a class="page-link" href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
                            </li>
                        {% endif %}
                        {# 中间多页 #}
                        {% for item in pages.Pages %}
                            <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                                <a class="page-link" href="{{ item.Link }}">{{ item.Name }}</a>
                            </li>
                        {% endfor %}
                        {# 下一页 #}
                        {% if pages.NextPage %}
                            <li class="page-item">
                                <a class="page-link" href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
                            </li>
                        {% endif %}
                        {# 尾页 #}
                        {% if pages.LastPage %}
                            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                                <a class="page-link" href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
                            </li>
                        {% endif %}
                    </ul>
                {% endpagination %}
            </div>
        </section>
    </main>

    {# 引入公共底部,如果您的模板有的话 #}
    {% include "partial/footer.html" if_exists %}
</body>
</html>

常见问题 (FAQ)

问:我能否在非 tag/list.html 模板中显示指定 Tag 的文章列表并分页?

答:当然可以。您可以在任何模板文件(例如首页 index/index.html 或自定义页面)中使用 tagDataList 标签。在这种情况下,您需要明确地通过 tagId="X" 参数来指定您想要显示哪个标签下的文章,并同样设置 type="page"limit 参数。但请注意,分页链接的生成可能需要您手动构建URL,或者确保您的URL结构能正确传递分页参数。

问:如何优化标签页面的SEO表现?

答:除了确保内容质量和页面加载速度外,标签页面的SEO优化包括几个关键点。首先,确保每个标签都有独特的、有吸引力的名称,并在后台为标签设置有意义的SEO标题、关键词和描述。其次,保持标签内容的更新活跃,避免出现大量空标签页。另外,可以考虑在相关文章中互链到标签页面,以及在站点地图中包含标签页面的URL,帮助搜索引擎发现和索引。

问:如果我设置了自定义伪静态规则,分页链接会受到影响吗?

答:安企CMS的 pagination 标签通常会智能地根据您在后台设置的伪静态规则来生成正确的、SEO友好的分页链接。只要您的伪静态规则配置正确(特别是包含 {page} 参数来处理分页),系统会负责生成符合规则的URL。如果遇到问题,请检查 plugin-rewrite.md 文档中关于分页伪静态规则的配置指南,并确保您的模板中 pagination 标签没有通过 prefix 参数进行不必要的重定义。