分页标签如何配置以提供用户友好的内容列表导航？

在安企CMS中，当我们网站上的内容日益丰富，如何高效地组织和呈现这些信息，让访客在海量内容中轻松找到所需，就成了一个关键课题。优秀的内容列表导航，尤其是分页功能，不仅能提升用户体验，更是搜索引擎优化（SEO）不可或缺的一环。安企CMS提供了强大而灵活的分页标签，让您能够轻松配置出用户友好的内容列表导航。

内容列表的基石：配置内容获取标签

在安企CMS中，所有的内容列表，无论是文章、产品，还是其他自定义模型，都离不开类似archiveList这样的列表标签。这些标签负责从数据库中抓取您指定的内容。当我们需要为这些列表启用分页功能时，archiveList标签中的type参数就显得尤为重要，我们需要将其设置为'page'。

例如，如果您想展示最近发布的10篇文章，并为它们提供分页导航，您的archiveList标签可能会这样配置：

{% archiveList archives with type="page" limit="10" %}
    {# 这里是您的文章列表项的循环代码 #}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                <p>{{item.Description}}</p>
                <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            </a>
        </li>
    {% empty %}
        <li>该列表暂时没有任何内容。</li>
    {% endfor %}
{% endarchiveList %}

在这里，archives变量将包含当前页的文档列表，而分页导航所需的全部信息，则会由系统自动封装到与archiveList标签关联的pages变量中，等待我们下一步的调用。

分页导航的核心：pagination 标签的巧妙应用

获取到内容列表后，接下来就是利用pagination分页标签来构建可见的导航元素了。pagination标签不是独立存在的，它与上述的archiveList标签协同工作，通过archiveList内部生成的pages变量来获取所有分页信息。

它的基本使用方式是这样的：

{% pagination pages with show="5" %}
    {# 这里将是您分页导航的具体HTML结构 #}
{% endpagination %}

在这里，pages就是我们从archiveList或其他列表标签（如tagDataList、commentList等）那里得到的包含分页信息的变量。而show="5"这个参数非常实用，它决定了在分页导航中最多显示多少个页码链接。例如，show="5"意味着它会显示当前页码以及其前后各2个页码，总共5个页码链接，这能让分页条既不至于过长，又能提供足够的导航选择。

pages变量内部包含了所有您构建分页导航所需的信息，比如总条数 (TotalItems)、总页码数 (TotalPages)、当前页码 (CurrentPage)，以及指向首页 (FirstPage)、末页 (LastPage)、上一页 (PrevPage)、下一页 (NextPage) 的完整对象。最重要的是，它还有一个Pages数组，其中包含了所有中间页码的详细信息。

我们可以通过pages变量中的各个字段，灵活地构建出完整且交互性强的分页导航：

  • pages.TotalItems：显示内容总条数。
  • pages.TotalPages：显示总页数。
  • pages.CurrentPage：显示当前是第几页。
  • pages.FirstPage.Name 和 pages.FirstPage.Link：用于构建“首页”链接。FirstPage.IsCurrent可判断是否为首页。
  • pages.PrevPage.Name 和 pages.PrevPage.Link：用于构建“上一页”链接。需要注意检查pages.PrevPage是否存在，如果当前是第一页，则不会有上一页。
  • pages.Pages：这是一个数组，包含了所有可视页码（由show参数控制）。我们可以遍历这个数组来生成中间的页码链接。每个item（页码项）都有item.Name（页码数字）、item.Link（页码链接）和item.IsCurrent（判断是否为当前页，用于添加样式）。
  • pages.NextPage.Name 和 pages.NextPage.Link：用于构建“下一页”链接。同样需要检查pages.NextPage是否存在。
  • pages.LastPage.Name 和 pages.LastPage.Link：用于构建“末页”链接。LastPage.IsCurrent可判断是否为末页。

下面是一个常用的分页导航代码示例，它将展示如何利用这些信息来构建一个完整的分页条：

<div class="pagination-container">
    {% pagination pages with show="5" %}
        <p>
            共 <span>{{pages.TotalItems}}</span> 条内容，
            总 <span>{{pages.TotalPages}}</span> 页，
            当前第 <span>{{pages.CurrentPage}}</span> 页
        </p>
        <ul class="pagination-list">
            {# 首页链接 #}
            <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 item in pages.Pages %}
            <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{item.Link}}">{{item.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>

结合内容列表与分页导航的完整示例

将archiveList与pagination标签结合起来，您可以在一个模板文件中实现从内容获取到分页导航的完整功能。

”`twig {# 假设这是您的文章列表页模板 (e.g., template/article/list.html) #} 

<h1>最新文章</h1>

<ul class="article-items">
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <li class="article-item">
            <a href="{{item.Link}}" class="article-link">
                {% if item.Thumb %}
                    <img src="{{item.Thumb}}" alt="{{item.Title}}" class="article-thumb">
                {% endif %}
                <div class="article-info">
                    <h2 class="article-title">{{item.Title}}</h2>
                    <p class="article-description">{{item.Description}}</p>
                    <div class="article-meta">
                        <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                        <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                        <span>阅读量：{{item.Views}}</span>
                    </div>
                </div>
            </a>
        </li>
    {% empty %}
        <li class="no-content">当前分类下暂时没有文章。</li>
    {% endfor %}
{% endarchiveList %}
</ul>

{# 分页导航区域 #}
<div class="pagination-