自定义分页条

在栏目列表页或者内容详情页，存在数据列表标签，且标签page属性为true。

例如：<@cms_content>、<@cms_article>、 <@cms_image> 等，当存在分页标签时，页面上下文变量中就会存在分页相关变量，可以通过这些变量来计算分页条需要的参数，分页变量如下：

  • ${PageTotal} = 列表数据总条数
  • ${PageSize} = 列表每页的数据条数
  • ${PageNo} = 当前页码，从1开始
  • ${FirstPage} = 首页URL
  • ${OtherPage} = 其他页URL，带{0}占位符，可替换为指定页码

如果不是有特殊分页需求，建议直接使用系统内置分页调标签 <@page_bar>，稍微调整CSS样式适应页面样式即可

示例1

使用场景：栏目列表页分页条

<div class="pager">
  <#if PageTotal gt 0>
  <#assign PageCount=((PageTotal + PageSize - 1) / PageSize)?floor />
  <div class="prev">
  <#if PageNo gt 1>
    <#if PageNo==2>
    <a href="${FirstPage}"><i class="iconfont">&#xe693;</i></a>
    <#else>
    <a href="${OtherPage?replace('{0}', PageNo-1)}"><i class="iconfont">&#xe693;</i></a>
    </#if>
    <#else>
    <a href="javascript:void(0);"><i class="iconfont">&#xe693;</i></a>
  </#if>
  </div>
  <#assign startPage = max(1, min(PageCount - 6, PageNo - 3)) />
  <#assign endPage = max(startPage, min(PageCount, max(startPage + 6, PageNo + 3))) />
  <div class="nums">
    <#if startPage gt 1>
    <a href="${FirstPage}" class="cur">1</a>
    </#if>
    <#if startPage gt 2>
    <a href="javascript:void(0);">...</a>
    </#if>
    <#list startPage..endPage as pn>
      <#if PageNo==pn>
      <a class="cur" href="javascript:void(0);">${pn}</a>
      <#else>
        <#if 1==pn>
        <a href="${FirstPage}">${pn}</a>
        <#else>
        <a href="${OtherPage?replace('{0}', pn)}">${pn}</a>
        </#if>
      </#if>
    </#list>
    <#if endPage lt PageCount - 1>
    <a href="javascript:void(0);">...</a>
    </#if>
    <#if endPage lt PageCount>
    <a href="${OtherPage?replace('{0}', PageCount)}">${PageCount}</a>
    </#if>
  </div>
  <div class="next">
  <#if PageNo lt PageCount?int>
    <a href="${OtherPage?replace('{0}', PageNo+1)}"><i class="iconfont">&#xe694;</i></a>
    <#else>
    <a href="javascript:void(0);"><i class="iconfont">&#xe694;</i></a>
  </#if>
  </div>
  </#if>
</div>

使用小技巧：

多个模板公用分页条样式时，可以用分页条代码创建一个独立的模板，在各个模板通过<@cms_inclue>标签引用，要求将<@cms_include>标签的属性ssi和cache均设置为false，例如：

<@cms_include file="pagebar.template.html" ssi="false" cache="false"></@cms_include>

内容导航