Pagination

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

Title	URL
Bootstrap Pagination	http://getbootstrap.com/components/#pagination
UX Pagination	http://uxmovement.com/navigation/avoid-the-pains-of-pagination/
Pagination Tutorial	http://www.slevenbits.com/blog/2013/01/middleman-blog-pagination.html

Tasks

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