Works together with Jekyll's Pagination function to generate a truncated list of links to pages. Fully customizable in Liquid and CSS.

Live demo

Usage

1. In your _config.yml, add the line:

paginate: 5

Note the number you set for paginate is the number of posts/page. 2. Copy _includes/paginator-links.html to your own _includes/ folder. 3. Copy paginator-links.css to your own root folder. (See below)

• Customize this CSS file later to change the look and feel of your links!

4. In your index.html (or wherever you're paginating), paste the following segment:

<style>{% include paginator-links.css %}</style>
{% include paginator-links.html maxPages=5 %}

Here, maxPages is the maximum page numbers shown in the link bar. Use an odd number for best results (so we can center the current page number).

Customizing

Some useful selectors to use in the stylesheet paginator-links.css.

CSS Selector	Component	Description
.paginator-links		A wrapper for the entire generated set of links.
.paginator-links .start-ellipsis::before		The content attribute is the text shown when page numbers have been truncated from the beginning of the list.
.paginator-links .end-ellipsis::before		The content attribute is the text shown when page numbers have been truncated from the end of the list.
.paginator-links .seperator::before		The characters to use as seperators between page numbers.
.paginator-links .first-page::before		The content attribute is the text to use for the link to the first page. If blank, the "First Page" link will not be displayed.
.paginator-links .previous-page::before		The content attribute of this is the text to use for the link to the previous page. If blank, the "Previous Page" link will not be displayed.
.paginator-links .next-page::before		The content attribute of this is the text to use for the link to the next page. If blank, the "Next Page" link will not be displayed.
.paginator-links .last-page::before		The content attribute of this is the text to use for the link to the last page. If blank, the "Last Page" link will not be displayed.
.paginator-links .numbers		A div wrapping directly around the all the numbers, but not the ellipses or navigation buttons.
.paginator-links .number		The styling for each individual number.
.paginator-links a		The actual hyperlink. :link and :visited pseudoclasses are useful here.
.paginator-links .number.current		The currently selected page.

Why root

Everything in this demo is in the root folder of the repository because of the way GitHub Pages renders project pages. Unfortunately there is no work-around for this. However, in user pages you may use any arbitrary directory, so paginator-links.css can be stored in the css/ or styles/ folder of your choice.

Inspiration

• http://stackoverflow.com/questions/14025597/liquid-and-arithmetic
• http://stackoverflow.com/questions/27963027/jekyll-long-pagination-how-to-shorten-it
• http://stackoverflow.com/questions/30125878/can-i-have-a-proper-nice-tiled-pagination-in-jekyll-using-liquid-templates