├── scss ├── utils │ ├── _breakpoint.scss │ ├── _clearfix.scss │ └── _sr-only.scss ├── cosmetics │ └── _cosmetics.scss └── _jekyll-pagination.scss ├── package.json ├── README.md └── template └── pagination.html /scss/utils/_breakpoint.scss: -------------------------------------------------------------------------------- 1 | @mixin pages-breakpoint($breakpoint) { 2 | @media (min-width: $breakpoint) { 3 | @content; 4 | } 5 | } -------------------------------------------------------------------------------- /scss/utils/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @mixin pages-clearfix { 2 | &:before, 3 | &:after { 4 | content: " "; 5 | display: table; 6 | } 7 | 8 | &:after { 9 | clear: both; 10 | } 11 | } -------------------------------------------------------------------------------- /scss/utils/_sr-only.scss: -------------------------------------------------------------------------------- 1 | @if $pages-sr-only == true { 2 | .sr-only { 3 | position: absolute; 4 | width: 1px; 5 | height: 1px; 6 | padding: 0; 7 | margin: -1px; 8 | overflow: hidden; 9 | clip: rect(0, 0, 0, 0); 10 | border: 0; 11 | } 12 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jekyll-pagination", 3 | "version": "1.3.0", 4 | "description": "Jekyll Pagination", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/timble/jekyll-pagination.git" 8 | }, 9 | "author": "Timble CVBA (https://www.timble.net)", 10 | "license": "GPL-3.0", 11 | "bugs": { 12 | "url": "https://github.com/timble/jekyll-pagination/issues" 13 | }, 14 | "homepage": "https://github.com/timble/jekyll-pagination#readme" 15 | } -------------------------------------------------------------------------------- /scss/cosmetics/_cosmetics.scss: -------------------------------------------------------------------------------- 1 | // Cosmetic 2 | @if $pages-cosmetics == true { 3 | .pagination { 4 | padding: 0; 5 | margin: $pages-margin; 6 | text-align: center; 7 | 8 | li { 9 | margin: $pages-item-margin; 10 | padding: 0; 11 | list-style: none; 12 | 13 | &.page { 14 | .pagination-item { 15 | text-decoration: none; // No underlines on circle links 16 | width: $pages-item-size; 17 | height: $pages-item-size; 18 | border-radius: $pages-item-size; 19 | line-height: $pages-item-size; 20 | background: $pages-item-background; 21 | color: $pages-item-color; 22 | box-shadow: $pages-item-shadow; 23 | 24 | } 25 | 26 | a:hover { 27 | background: $pages-item-hover; 28 | } 29 | 30 | &.current-page { 31 | .pagination-item { 32 | background: $pages-item-active; 33 | box-shadow: $pages-item-active-shadow; 34 | color: $pages-item-active-color; 35 | } 36 | } 37 | } 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Jekyll Pagination](http://www.timble.net/images/blog/2015/jekyll-pagination.gif) 2 | 3 | # Better pagination for Jekyll 4 | A Jekyll `include` file of a Mobile-First pagination, configurable with page front-matter. 5 | 6 | ## Elements 7 | 8 | ![Pagination elements](http://www.timble.net/images/blog/2015/jekyll-pagination-elements.png) 9 | 10 | Depending on screen size it shows: 11 | 12 | 1. Previous page link 13 | 2. First page 14 | 3. 'inivisible' pages indicator 15 | 4. x amount of pages before the current page 16 | 5. The current page 17 | 6. x amount of pages after the current page 18 | 7. 'invisible' pages indicator 19 | 8. Last page 20 | 9. Next page link 21 | 22 | ## Installation 23 | 24 | Install with bower: `bower install https://github.com/timble/jekyll-pagination.git` 25 | 26 | ## Options 27 | 28 | You can configure the output using front-matter on blog index page (for example `/blog/index.html`). The following options are available: 29 | 30 | ```html 31 | 32 | --- 33 | paginate: 34 | root: /blog/ 35 | limit: false 36 | page_amount: 7 37 | title_label: Pagination 38 | --- 39 | 40 | ``` 41 | 42 | - **root:** The root of your blog. 43 | - **limit:** Limit of pagination pages, set to false if you want to use the page_amount setting. 44 | - **page_amount:** The amount of pages visible in the pagination. Set to an uneven number for best result. 45 | - **title_label:** The title above pagination (only visible for screen readers) 46 | 47 | Because the front-matter is applied to the blog index page rather than the `_config.yml` it is possible to have multiple blogs on your site. You might need an additonal category aware pager plugin to accomplish this. 48 | 49 | ## SCSS variables 50 | 51 | * All variables in the SCSS file are overwriteable. 52 | * Only set `$pages-clearfix` to `false` if you're already using another `clearfix @mixin` in your prject which this file can access. 53 | * All the styling variables are only applied when `$pages-cosmetics` is `true` (it's `true` by default) 54 | * The breakpoint variables are to show or hide pages when the screen is smaller. Use with caution since more pages than wanted may get hidden. 55 | 56 | ## In action 57 | 58 | * [www.timble.net/blog/](http://www.timble.net/blog/) 59 | * [www.joomlatools.com/blog/](https://www.joomlatools.com/blog/) 60 | * [www.joomlatools.com/developer/blog/](https://www.joomlatools.com/developer/blog/) 61 | -------------------------------------------------------------------------------- /template/pagination.html: -------------------------------------------------------------------------------- 1 | {% assign paginator_title = 'Pagination' %} 2 | {% if page.paginate.title_label %} 3 | {% assign paginator_title = page.paginate.title_label %} 4 | {% endif %} 5 | 6 | {% assign page_amount = 7 %} 7 | {% if page.paginate.page_amount %} 8 | {% assign page_amount = page.paginate.page_amount %} 9 | {% endif %} 10 | 11 | {% assign page_amountmin = page_amount | minus: 2 %} 12 | {% assign offset = page_amountmin | divided_by: 2 %} 13 | {% assign page_amountprev = paginator.page | minus: offset %} 14 | {% assign page_amountnext = paginator.page | plus: offset %} 15 | {% assign totalpages = paginator.total_pages %} 16 | 17 | {% if page_amountprev <= 1 %} 18 | {% assign page_amountprevfix = page_amountprev | minus: 1 %} 19 | {% assign page_amountprev = 0 %} 20 | {% assign page_amountnext = page_amountnext | minus: page_amountprevfix | plus: 1 %} 21 | {% endif %} 22 | 23 | {% if page_amountnext >= totalpages %} 24 | {% assign page_amountnextfix = totalpages | minus: page_amountnext | minus: 1 %} 25 | {% assign page_amountnext = totalpages %} 26 | {% assign page_amountprev = page_amountprev | plus: page_amountnextfix %} 27 | {% endif %} 28 | 29 | {% assign dots_prev = page_amountprev | minus: 1 %} 30 | {% assign dots_next = totalpages | minus: 1 %} 31 | {% assign max_next = totalpages | minus: offset | minus: 1 %} 32 | 33 | {% if totalpages > page_amount %} 34 | {% for count in (2..paginator.total_pages) %} 35 | {% if count == dots_prev %} 36 | {% assign indicator_first = ' pages-indicator--active' %} 37 | {% endif %} 38 | {% if count == dots_next and paginator.page < max_next %} 39 | {% assign indicator_last = ' pages-indicator--active' %} 40 | {% endif %} 41 | {% if forloop.first %} 42 | {% assign relative_first = paginator.page | minus: forloop.index | divided_by: 1 %} 43 | {% endif %} 44 | {% if forloop.last %} 45 | {% assign relative_last = paginator.page | minus: forloop.index | replace: '-', '' | divided_by: 1 | plus: 1 %} 46 | {% endif %} 47 | {% endfor %} 48 | {% endif %} 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /scss/_jekyll-pagination.scss: -------------------------------------------------------------------------------- 1 | // Breakpoint variables 2 | $pages-breakpoint1: 320px !default; 3 | $pages-breakpoint2: 500px !default; 4 | $pages-breakpoint3: 600px !default; 5 | $pages-breakpoint4: 768px !default; 6 | $pages-breakpoint5: 768px !default; 7 | $pages-breakpoint6: 768px !default; 8 | $pages-breakpoint7: 768px !default; 9 | $pages-breakpoint8: 768px !default; 10 | $pages-breakpoint9: 768px !default; 11 | 12 | // Cosmetics variables 13 | $pages-cosmetics: true !default; 14 | $pages-sr-only: true !default; 15 | 16 | // Styling 17 | $pages-margin: 1em 0 !default; 18 | $pages-item-margin: 0 .2em !default; 19 | $pages-item-size: 36px !default; 20 | $pages-item-background: #eee !default; 21 | $pages-item-color: #333 !default; 22 | $pages-item-link-color: #1847AD !default; 23 | $pages-item-shadow: inset 0 0 5px rgba(0, 0, 0, .05) !default; 24 | $pages-item-hover: #ddd !default; 25 | $pages-item-active: #1879CE !default; 26 | $pages-item-active-shadow: inset 0 0 5px rgba(0, 0, 0, .3) !default; 27 | $pages-item-active-color: white !default; 28 | 29 | // Mixins 30 | @import "utils/clearfix"; 31 | @import "utils/breakpoint"; 32 | 33 | // Classes 34 | @import "utils/sr-only"; 35 | 36 | // Behavioural 37 | .pagination { 38 | @include pages-clearfix; 39 | 40 | li { 41 | display: none; 42 | 43 | .pagination-item { 44 | display: block; 45 | speak-number: continuous; 46 | } 47 | } 48 | 49 | // Always display the first, current and last page when 50 | // They are available in the markup 51 | .current-page, 52 | .previous, 53 | .next { 54 | display: inline-block; 55 | } 56 | 57 | .previous a:before { 58 | content: "« " 59 | } 60 | 61 | .next a:after { 62 | content: " »" 63 | } 64 | 65 | // First breakpoint 66 | @include pages-breakpoint($pages-breakpoint1) { 67 | 68 | // When there are active indicators show them 69 | // Using a double class here to win over future breakpoints 70 | .pages-indicator.pages-indicator--active { 71 | display: inline-block; 72 | } 73 | 74 | // The first and last item in the paginator 75 | .first, 76 | .last { 77 | display: inline-block; 78 | } 79 | 80 | // Show indicators on smaller screen when other pages are hidden 81 | // This way we'll never have "" 82 | // But we'll have "" 83 | .pages-indicator--offset-2, 84 | .pages-indicator--offset-3, 85 | .pages-indicator--offset-4, 86 | .pages-indicator--offset-5, 87 | .pages-indicator--offset-6, 88 | .pages-indicator--offset-7 { 89 | display: inline-block; 90 | } 91 | } 92 | 93 | @include pages-breakpoint($pages-breakpoint2) { 94 | // Show items next to active item 95 | .offset-1 { 96 | display: inline-block; 97 | } 98 | 99 | // And hide indicator to make room 100 | .pages-indicator--offset-2 { 101 | display: none; 102 | } 103 | } 104 | 105 | @include pages-breakpoint($pages-breakpoint3) { 106 | // Show items 2 spots next to active item 107 | .offset-2 { 108 | display: inline-block; 109 | } 110 | 111 | // And hide indicator to make room 112 | .pages-indicator--offset-3 { 113 | display: none; 114 | } 115 | } 116 | 117 | @include pages-breakpoint($pages-breakpoint4) { 118 | // Show items 3 spots next to active item 119 | .offset-3 { 120 | display: inline-block; 121 | } 122 | 123 | // And hide indicator to make room 124 | .pages-indicator--offset-4 { 125 | display: none; 126 | } 127 | } 128 | 129 | @include pages-breakpoint($pages-breakpoint5) { 130 | // Show items 3 spots next to active item 131 | .offset-4 { 132 | display: inline-block; 133 | } 134 | 135 | // And hide indicator to make room 136 | .pages-indicator--offset-5 { 137 | display: none; 138 | } 139 | } 140 | 141 | @include pages-breakpoint($pages-breakpoint6) { 142 | // Show items 3 spots next to active item 143 | .offset-5 { 144 | display: inline-block; 145 | } 146 | 147 | // And hide indicator to make room 148 | .pages-indicator--offset-6 { 149 | display: none; 150 | } 151 | } 152 | 153 | @include pages-breakpoint($pages-breakpoint7) { 154 | // Show items 3 spots next to active item 155 | .offset-6 { 156 | display: inline-block; 157 | } 158 | 159 | // And hide indicator to make room 160 | .pages-indicator--offset-7 { 161 | display: none; 162 | } 163 | } 164 | 165 | @include pages-breakpoint($pages-breakpoint8) { 166 | // Show items 3 spots next to active item 167 | .offset-7 { 168 | display: inline-block; 169 | } 170 | 171 | // And hide indicator to make room 172 | .pages-indicator--offset-8 { 173 | display: none; 174 | } 175 | } 176 | 177 | @include pages-breakpoint($pages-breakpoint9) { 178 | // Show items 3 spots next to active item 179 | .offset-8 { 180 | display: inline-block; 181 | } 182 | 183 | // And hide indicator to make room 184 | .pages-indicator--offset-9 { 185 | display: none; 186 | } 187 | } 188 | } 189 | 190 | @import "cosmetics/cosmetics"; --------------------------------------------------------------------------------