Created
October 14, 2013 03:24
-
-
Save kara-ryli/6970226 to your computer and use it in GitHub Desktop.
Generate PURE-style paginators in a Jekyll blog (e.g. GitHub Pages)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% comment %} | |
Generate PURE Paginators in a Jekyll blog: | |
http://purecss.io/menus/#paginators | |
http://jekyllrb.com/docs/pagination/ | |
The `page_spread` determines how wide the paginator is; it's the | |
number of links on either side of the center link, so you'll end | |
up with a list of the following sizes: | |
| Spread | Count | | |
| ------ | ----- | | |
| 1 | 3 | | |
| 2 | 5 | | |
| 3 | 7 | | |
Et cetera. | |
You can also set `previous_text` and `next_text` to localize them. | |
Save this in `includes/helpers`. | |
{% endcomment %} | |
{% unless page_spread %} | |
{% assign page_spread = 2 %} | |
{% endunless %} | |
{% unless previous_text %} | |
{% assign previous_text = "Previous" %} | |
{% endunless %} | |
{% unless next_text %} | |
{% assign next_text = "Next" %} | |
{% endunless %} | |
{% if paginator.total_pages > 1 %} | |
<ul class="pure-paginator"> | |
{% capture paginator_root %}/{{ site.paginate_path | replace:':num','' }}{% endcapture %} | |
{% assign page_prev_class = "pure-button prev" %} | |
{% assign page_prev_href = paginator.previous_page_path %} | |
{% unless paginator.previous_page %} | |
{% capture page_prev_class %}{{ page_prev_class }} pure-button-disabled{% endcapture %} | |
{% assign page_prev_href = "#" %} | |
{% endunless %} | |
{% if paginator.page == 2 %} | |
{% assign page_prev_href = paginator_root %} | |
{% endif %} | |
{% assign page_next_class = "pure-button next" %} | |
{% assign page_next_href = paginator.next_page_path %} | |
{% unless paginator.next_page %} | |
{% capture page_next_class %}{{ page_next_class }} pure-button-disabled{% endcapture %} | |
{% assign page_next_href = "#" %} | |
{% endunless %} | |
{% assign center_page = paginator.page %} | |
{% assign min_page = center_page | minus:page_spread %} | |
{% if min_page < 1 %} | |
{% assign min_page = 1 %} | |
{% assign center_page = 1 | plus:page_spread %} | |
{% endif %} | |
{% assign max_page = center_page | plus:page_spread %} | |
{% if max_page > paginator.total_pages %} | |
{% assign max_page = paginator.total_pages %} | |
{% assign min_page = max_page | minus:page_spread | minus:page_spread %} | |
{% if min_page < 1 %} | |
{% assign min_page = 1 %} | |
{% endif %} | |
{% endif %} | |
<li><a class="{{ page_prev_class }}" href="{{ page_prev_href }}">{{ previous_text }}</a></li> | |
{% for page in (min_page..max_page) %} | |
{% if page == paginator.page %} | |
<li><a class="pure-button pure-button-active" href="#">{{ page }}</a></li> | |
{% else %} | |
{% if page == 1 %} | |
{% assign page_url = paginator_root %} | |
{% else %} | |
{% capture page_str %}{{ page }}{% endcapture %} | |
{% capture page_url %}/{{ site.paginate_path | replace:':num',page_str }}/{% endcapture %} | |
{% endif %} | |
<li><a class="pure-button pure-button" href="{{ page_url }}">{{ page }}</a></li> | |
{% endif %} | |
{% endfor %} | |
{% if paginator.next_page %} | |
<li><a class="{{ page_next_class }}" href="{{ page_next_href }}">{{ next_text }}</a></li> | |
{% endif %} | |
</ul> | |
{% endif %} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% assign previous_text = "«" %} | |
{% assign next_text = "»" %} | |
{% assign page_spread = 2 %} | |
{% include helpers/paginator.liquid %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment