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
- In your
_config.yml, add the line:
paginate: 5Note 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!
- 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.