如何利用`pagination`标签返回的总页数`TotalPages`，实现更复杂的页面跳转逻辑？

安企CMS（AnQiCMS）凭借其基于Go语言的高效架构和灵活的模板系统，为内容运营者提供了强大的自定义能力。在网站内容的呈现中，分页是极其常见的需求，而我们的pagination标签正是为此而生。它不仅能帮助您轻松构建出标准的分页导航，更提供了TotalPages这个宝贵的属性，让您能够跳脱传统分页的束缚，实现更加智能和复杂的页面跳转逻辑。

今天，我们就来深入探讨如何巧妙地利用pagination标签返回的总页数TotalPages，为您的网站访客提供更卓越的导航体验。

深入理解pagination标签与TotalPages

在使用安企CMS进行模板开发时，当我们需要展示列表内容并支持分页时，通常会结合archiveList（或其他内容列表标签）和pagination标签。archiveList负责获取分页数据，而pagination则基于这些数据生成分页链接。

{# 假设我们已经通过 archiveList 标签获取了文章列表并指定了 type="page" #}
{% archiveList archives with type="page" limit="10" %}
    {# 这里是文章列表的循环渲染部分 #}
    {% for item in archives %}
        <p><a href="{{item.Link}}">{{item.Title}}</a></p>
    {% endfor %}
{% endarchiveList %}

{# 接着使用 pagination 标签生成分页导航 #}
<div class="pagination-container">
    {% 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 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>
            <li>总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
        </ul>
    {% endpagination %}
</div>

在这个pagination标签块中，pages是一个包含了所有分页信息的对象。其中，pages.TotalPages正是我们关注的焦点——它存储了当前内容列表的总页数。有了这个数值，我们就能在模板中进行灵活的条件判断，从而实现更高级的交互逻辑。

利用TotalPages实现更复杂的页面跳转逻辑

1. 智能化的“跳转到末页”按钮：提升长列表导航效率

当内容列表的页数非常多时，用户可能希望直接跳到最后一页，而不是通过连续点击“下一页”或中间页码。然而，如果总页数很少，这个“跳转到末页”的按钮就没有必要显示，甚至会显得冗余。这时，TotalPages就能派上用场了。

我们可以设定一个阈值，例如当总页数超过10页时，才显示“跳转到末页”的选项。

<div class="pagination-container">
    {% pagination pages with show="5" %}
        <ul>
            {# ... 标准分页导航部分 ... #}
            <li>总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>

            {# 仅当总页数大于10且不在最后一页时，显示“跳转到末页”按钮 #}
            {% if pages.TotalPages > 10 and pages.CurrentPage < pages.TotalPages %}
                <li class="page-item jump-to-end">
                    <a href="{{pages.LastPage.Link}}">跳转到末页({{pages.TotalPages}})</a>
                </li>
            {% endif %}
        </ul>
    {% endpagination %}
</div>

这样，如果您的网站有大量的内容，用户在浏览深层页面时，可以一键抵达终点，极大提升了用户体验。对于页数不多的列表，这个按钮则会聪明地隐藏起来，保持页面简洁。

2. 简化小流量页面的分页显示：优化用户界面

对于只有少量内容，例如只有一两页的列表，完整的页码导航可能会显得过于笨重。在这种情况下，我们可能希望完全隐藏分页，或者只显示一个简单的提示。

<div class="pagination-container">
    {% pagination pages with show="5" %}
        {% if pages.TotalPages > 1 %}
            {# 当总页数大于1时，显示完整的或简化的分页导航 #}
            <ul>
                {# ... 标准分页导航部分 ... #}
                <li>总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
            </ul>
        {% else %}
            {# 只有一页或没有内容时，显示友好提示，不显示分页 #}
            <p>内容不多，无需分页。</p>
        {% endif %}
    {% endpagination %}
</div>

通过这样的条件判断，您可以根据内容的实际数量，动态调整分页组件的可见性，让用户界面始终保持简洁和高效。

3. 结合用户输入实现精确跳转：满足高级用户需求

对于一些数据密集型或专业性较强的网站，用户可能习惯直接输入页码进行跳转。这时，TotalPages就成为了验证用户输入有效性的关键。

我们可以添加一个输入框，允许用户手动输入页码，并通过JavaScript结合TotalPages进行客户端验证。

”`twig

{% pagination pages with show="5" %}
    {# ... 标准分页导航部分 ... #}
    <ul>
        <li>总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
    </ul>

    <div class="page-jump-input">
        <form onsubmit="jumpToPage(event, {{pages.TotalPages}})">
            <label for="pageNumInput">前往第</label>
            <input type="number" id="pageNumInput" name="page" 
                   min="1" max="{{pages.TotalPages}}" 
                   value="{{pages.CurrentPage}}" 
                   placeholder="页码">
            <label for="pageNumInput">页</label>
            <button type="submit">确定</button>
        </form>
    </div>
{% endpagination %}