The pagination partial allows a cycle pattern between collections within the site, such as a blog.
To allow the pagination to work on blog listings the following front matter must be present:
= 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>
= 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>
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 |
Task | Date |
---|---|
Test this with Directory Indexes etc | |
Enable options to show all numbers | |
Mark up the pagination with correct schema.org stuff |