{switch $variant}
{case value="0"}
<nav class="{$baseCls}" aria-label="Pagination">
  <div class="{$TpStyle.dom_prefix}-pg-summary">第 {$page} / {$pages} 页</div>
  <ul class="{$TpStyle.dom_prefix}-pg">
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">«</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>«</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">»</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>»</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
  </ul>
</nav>
{/case}
{case value="1"}
<section class="{$baseCls}">
  <ul class="{$TpStyle.dom_prefix}-pg">
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$first_urll ?? '#'}">首页</a>
    </li>
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$last_url ?? '#'}">末页</a>
    </li>
  </ul>
</section>

{/case}
{case value="2"}
{// Variant 02 }
<div class="{$baseCls}">
  <ol class="{$TpStyle.dom_prefix}-pg">
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
  </ol>
</div>

{/case}
{case value="3"}
{// Variant 03 }
<aside class="{$baseCls}">
  <ol class="{$TpStyle.dom_prefix}-pg">
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$first_urll ?? '#'}">首页</a>
    </li>
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">«</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>«</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">»</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>»</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$last_url ?? '#'}">末页</a>
    </li>
  </ol>
</aside>

{/case}
{case value="4"}
{// Variant 04 }
<footer class="{$baseCls}">
  <div class="{$TpStyle.dom_prefix}-pg">
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </span>
    {elseif $it.type=="next"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </span>
    {elseif $it.type=="page"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </span>
    {/if}
    {/volist}
  </div>
</footer>

{/case}
{case value="5"}
{// Variant 05 }
<nav class="{$baseCls}" aria-label="Pagination">
  <div class="{$TpStyle.dom_prefix}-pg-summary">第 {$page} / {$pages} 页</div>
  <div class="{$TpStyle.dom_prefix}-pg">
    <span class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$first_urll ?? '#'}">首页</a>
    </span>
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </span>
    {elseif $it.type=="next"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </span>
    {elseif $it.type=="page"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </span>
    {/if}
    {/volist}
    <span class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$last_url ?? '#'}">末页</a>
    </span>
  </div>
</nav>

{/case}
{case value="6"}
{// Variant 06 }
<section class="{$baseCls}">
  <ul class="{$TpStyle.dom_prefix}-pg">
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">«</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>«</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">»</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>»</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
  </ul>
</section>

{/case}
{case value="7"}
{// Variant 07 }
<div class="{$baseCls}">
  <ul class="{$TpStyle.dom_prefix}-pg">
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$first_urll ?? '#'}">首页</a>
    </li>
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$last_url ?? '#'}">末页</a>
    </li>
  </ul>
  <div class="{$TpStyle.dom_prefix}-pg-jump" data-pages="{$pages}">
    <label>跳到</label>
    <input class="{$TpStyle.dom_prefix}-pg-inp" type="number" min="1" max="{$pages}" value="{$page}">
    <button class="{$TpStyle.dom_prefix}-pg-btn" type="button"
      onclick="(function(btn){var wrap=btn.parentNode;var inp=wrap.querySelector('input');var max=parseInt(wrap.getAttribute('data-pages')||1);var p=parseInt(inp.value||1);p=Math.max(1,Math.min(max,p));var u='{:$first_urll ?? '#'}';if(!u){return;}u=u.replace(/page\d+$/i,'page'+p);window.location.href=u;})(this)">确定</button>
  </div>
</div>

{/case}
{case value="8"}
{// Variant 08 }
<aside class="{$baseCls}">
  <ol class="{$TpStyle.dom_prefix}-pg">
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
  </ol>
</aside>

{/case}
{case value="9"}
{// Variant 09 }
<footer class="{$baseCls}">
  <ol class="{$TpStyle.dom_prefix}-pg">
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$first_urll ?? '#'}">首页</a>
    </li>
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">«</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>«</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">»</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>»</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$last_url ?? '#'}">末页</a>
    </li>
  </ol>
</footer>

{/case}
{case value="10"}
{// Variant 10 }
<nav class="{$baseCls}" aria-label="Pagination">
  <div class="{$TpStyle.dom_prefix}-pg-summary">第 {$page} / {$pages} 页</div>
  <div class="{$TpStyle.dom_prefix}-pg">
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </span>
    {elseif $it.type=="next"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </span>
    {elseif $it.type=="page"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </span>
    {/if}
    {/volist}
  </div>
</nav>

{/case}
{case value="11"}
{// Variant 11 }
<section class="{$baseCls}">
  <div class="{$TpStyle.dom_prefix}-pg">
    <span class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$first_urll ?? '#'}">首页</a>
    </span>
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </span>
    {elseif $it.type=="next"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </span>
    {elseif $it.type=="page"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </span>
    {/if}
    {/volist}
    <span class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$last_url ?? '#'}">末页</a>
    </span>
  </div>
</section>

{/case}
{case value="12"}
{// Variant 12 }
<div class="{$baseCls}">
  <ul class="{$TpStyle.dom_prefix}-pg">
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">«</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>«</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">»</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>»</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
  </ul>
</div>

{/case}
{case value="13"}
{// Variant 13 }
<aside class="{$baseCls}">
  <ul class="{$TpStyle.dom_prefix}-pg">
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$first_urll ?? '#'}">首页</a>
    </li>
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$last_url ?? '#'}">末页</a>
    </li>
  </ul>
</aside>

{/case}
{case value="14"}
{// Variant 14 }
<footer class="{$baseCls}">
  <ol class="{$TpStyle.dom_prefix}-pg">
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
  </ol>
</footer>

{/case}
{case value="15"}
{// Variant 15 }
<nav class="{$baseCls}" aria-label="Pagination">
  <div class="{$TpStyle.dom_prefix}-pg-summary">第 {$page} / {$pages} 页</div>
  <ol class="{$TpStyle.dom_prefix}-pg">
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$first_urll ?? '#'}">首页</a>
    </li>
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">«</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>«</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">»</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>»</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$last_url ?? '#'}">末页</a>
    </li>
  </ol>
</nav>

{/case}
{case value="16"}
{// Variant 16 }
<section class="{$baseCls}">
  <div class="{$TpStyle.dom_prefix}-pg">
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </span>
    {elseif $it.type=="next"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </span>
    {elseif $it.type=="page"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </span>
    {/if}
    {/volist}
  </div>
</section>

{/case}
{case value="17"}
{// Variant 17 }
<div class="{$baseCls}">
  <div class="{$TpStyle.dom_prefix}-pg">
    <span class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$first_urll ?? '#'}">首页</a>
    </span>
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </span>
    {elseif $it.type=="next"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </span>
    {elseif $it.type=="page"}
    <span
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </span>
    {/if}
    {/volist}
    <span class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$last_url ?? '#'}">末页</a>
    </span>
  </div>
  <div class="{$TpStyle.dom_prefix}-pg-jump" data-pages="{$pages}">
    <label>跳到</label>
    <input class="{$TpStyle.dom_prefix}-pg-inp" type="number" min="1" max="{$pages}" value="{$page}">
    <button class="{$TpStyle.dom_prefix}-pg-btn" type="button"
      onclick="(function(btn){var wrap=btn.parentNode;var inp=wrap.querySelector('input');var max=parseInt(wrap.getAttribute('data-pages')||1);var p=parseInt(inp.value||1);p=Math.max(1,Math.min(max,p));var u='{:$first_urll ?? '#'}';if(!u){return;}u=u.replace(/page\d+$/i,'page'+p);window.location.href=u;})(this)">确定</button>
  </div>
</div>

{/case}
{case value="18"}
{// Variant 18 }
<aside class="{$baseCls}">
  <ul class="{$TpStyle.dom_prefix}-pg">
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">«</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>«</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">»</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>»</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
  </ul>
</aside>

{/case}
{case value="19"}
{// Variant 19 }
<footer class="{$baseCls}">
  <ul class="{$TpStyle.dom_prefix}-pg">
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$first_urll ?? '#'}">首页</a>
    </li>
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$last_url ?? '#'}">末页</a>
    </li>
  </ul>
</footer>
{/case}

{default}
<footer class="{$baseCls}">
  <ul class="{$TpStyle.dom_prefix}-pg">
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$first_urll ?? '#'}">首页</a>
    </li>
    {volist name="pagerArr" id="it"}
    {if $it.type=="prev"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">上一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>上一页</a>
      {/if}
    </li>
    {elseif $it.type=="next"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.disabled) || empty($it.url)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-disabled="true">下一页</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}" {if !empty($it.rel)}rel="{$it.rel}" {/if}>下一页</a>
      {/if}
    </li>
    {elseif $it.type=="page"}
    <li
      class="{$TpStyle.dom_prefix}-pg-it {if !empty($it.current)}is-current{/if} {if !empty($it.disabled)}is-disabled{/if}">
      {if !empty($it.current)}
      <span class="{$TpStyle.dom_prefix}-pg-a" aria-current="page">{$it.label}</span>
      {else/}
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{$it.url}">{$it.label}</a>
      {/if}
    </li>
    {/if}
    {/volist}
    <li class="{$TpStyle.dom_prefix}-pg-it is-edge">
      <a class="{$TpStyle.dom_prefix}-pg-a" href="{:$last_url ?? '#'}">末页</a>
    </li>
  </ul>
</footer>
{/default}

{/switch}