Introduction

The pagination partial allows a cycle pattern between collections within the site, such as a blog.

Setup

To allow the pagination to work on blog listings the following front matter must be present:

  • blog : docs
  • pageable : true
  • per_page : 5

Default

= codeBlender "pagination", "molecule", { nextPage: @nextPage, prevPage: @prevPage, pageNo: page_number, pages: num_pages }
<nav aria-label='Page navigation' class='text-center'>
<ul class='pagination'>
<li><a href="/molecule/pagination/pagination/page/7.html" aria-label="Previous" class="pagination__link"><span class='fa fa-angle-left'></span>

</a></li>
<li><a href="/molecule/pagination/pagination.html" class="pagination__link">1</a></li>
<li class='disabled'>
<a class='pagination__link'>...</a>
</li>
<li>
<a href="/molecule/pagination/pagination/page/5.html" class="pagination__link">5</a>
</li>
<li>
<a href="/molecule/pagination/pagination/page/6.html" class="pagination__link">6</a>
</li>
<li>
<a href="/molecule/pagination/pagination/page/7.html" class="pagination__link">7</a>
</li>
<li class='active'>
<span class='pagination__link'>8</span>
</li>
</ul>
</nav>


Size - large

= codeBlender "pagination", "molecule", { nextPage: @nextPage, prevPage: @prevPage, pageNo: page_number, pages: num_pages, size: "lg" }
<nav aria-label='Page navigation' class='text-center'>
<ul class='pagination pagination-lg'>
<li><a href="/molecule/pagination/pagination/page/7.html" aria-label="Previous" class="pagination__link"><span class='fa fa-angle-left'></span>

</a></li>
<li><a href="/molecule/pagination/pagination.html" class="pagination__link">1</a></li>
<li class='disabled'>
<a class='pagination__link'>...</a>
</li>
<li>
<a href="/molecule/pagination/pagination/page/5.html" class="pagination__link">5</a>
</li>
<li>
<a href="/molecule/pagination/pagination/page/6.html" class="pagination__link">6</a>
</li>
<li>
<a href="/molecule/pagination/pagination/page/7.html" class="pagination__link">7</a>
</li>
<li class='active'>
<span class='pagination__link'>8</span>
</li>
</ul>
</nav>


Resources Useful websites and tutorials

Tasks

Task Date
Test this with Directory Indexes etc
Enable options to show all numbers
Mark up the pagination with correct schema.org stuff