Typecho主题开发使用bootstrap的分页样式-马春杰杰

文章目录

一、默认的分页样式

typecho 官方文档中对模板中分页的描述就是简单的一行代码：

<?php $this->pageNav(); ?>

1	<?php $this->pageNav(); ?>

这个代码输出后，实际上内容是下面的 html 代码：

<ol class="page-navigator">
    <li class="current"><a href="#####/page/1/">1</a></li>
    <li><a href="#####/index.php/page/2/">2</a></li>
    <li><a href="#####/page/3/">3</a></li>
</ol>

</ol>

Typecho主题开发使用bootstrap的分页样式

一般来说，借助上面 html 中的 class 来定义 css 即可实现需要的分页样式。

二、自定义内容输出

typecho 允许通过参数对 pageNav() 进行自定义。

如果要契合 bootstrap4 的分页代码，我使用的是如下的代码：

<nav  aria-label="Page navigation ">
        <?php $this->pageNav('«', '»', 1, '...', array('wrapTag' => 'ul', 'wrapClass' => 'pagination', 'itemTag' => 'li',  'textTag' => 'a', 'currentClass' => 'active', 'prevClass' => 'prev', 'nextClass' => 'next',)); ?>
</nav>

<?php $this->pageNav('«', '»', 1, '...', array('wrapTag' => 'ul', 'wrapClass' => 'pagination', 'itemTag' => 'li', 'textTag' => 'a', 'currentClass' => 'active', 'prevClass' => 'prev', 'nextClass' => 'next',)); ?>

</nav>

其中前面四个参数不重复他们的意义，如果要自定义符合框架的样式，那么 html 标签和 class 必然要契合框架的样式。

上面参数中的主要说明：

参数	说明
`wrapTag`	最外层的包裹标签
`wrapClass`	最外层包裹标签的 class
`itemTag`	单独连接的包裹标签
`textTag`	非连接字符的包裹标签，像是 `...` 这种，是没有链接的，但是为了契合bootstrap，我依旧使用 `a`
`currentClass`	active 的 class，是加在 `itemTag` 上的
`prevClass`	prev 的 class
`nextClass`	next 的 class