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 class='active'>
<span class='pagination__link'>1</span>
</li>
<li>
<a href="/molecule/pagination/pagination/page/2.html" class="pagination__link">2</a>
</li>
<li>
<a href="/molecule/pagination/pagination/page/3.html" class="pagination__link">3</a>
</li>
<li>
<a href="/molecule/pagination/pagination/page/4.html" class="pagination__link">4</a>
</li>
<li class='disabled'>
<a class='pagination__link'>...</a>
</li>
<li><a href="/molecule/pagination/pagination/page/8.html" class="pagination__link">8</a></li>
<li><a href="/molecule/pagination/pagination/page/2.html" aria-label="Next" class="pagination__link"><span class='fa fa-angle-right'></span>

</a></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 class='active'>
<span class='pagination__link'>1</span>
</li>
<li>
<a href="/molecule/pagination/pagination/page/2.html" class="pagination__link">2</a>
</li>
<li>
<a href="/molecule/pagination/pagination/page/3.html" class="pagination__link">3</a>
</li>
<li>
<a href="/molecule/pagination/pagination/page/4.html" class="pagination__link">4</a>
</li>
<li class='disabled'>
<a class='pagination__link'>...</a>
</li>
<li><a href="/molecule/pagination/pagination/page/8.html" class="pagination__link">8</a></li>
<li><a href="/molecule/pagination/pagination/page/2.html" aria-label="Next" class="pagination__link"><span class='fa fa-angle-right'></span>

</a></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