Better pagination

[MihajloNesic]

If there are many pages on the blog, all page numbers show up and can get a bit messy.

Desktop

Mobile

I've used Bootstrap's pagination component for style. The current page is highlighted. There are X trail pages from the current page, which can be changed in _config.yml. There's next and previous page buttons (if there is a next/prev page). Also, user can toggle whether or not to show first and last page buttons in pagination.

Here are some screenshots:

Desktop

Mobile (with first and last page buttons)

Mobile (without first and last page buttons)

[MihajloNesic]

This looks great, I'm merging this into my project, thank you :)

Feel free to modify however you want 😄

[frchico]

Thanks for the PR. I implanted it on the website that I'm doing. However, I had to keep the definition of the class .pagination in the main.css and modify the index.html to use the new include. I believe that this makes it easier to merge and make it available in the main repository.

Anyway, thank you very much for the code.

[MihajloNesic]

I agree that this enhancement can be difficult to integrate on heavily modified websites. But for a starter code, I think it’s ok to modify existing classes, especially a class like pagination which is a class specific only of the pagination component.

Feel free to use the code however you like.

[mgroheu]

In main.scss need to be added a code to avoid layers overlapping.

in .pagination > .active > a z-index: 0 !important;