Skip to content

Commit dc735a6

Browse files
Dale KunceDale Kunce
Dale Kunce
authored and
Dale Kunce
committed
Add blog pagination with multilingual support
- Configure pagination to display 15 posts per page with proper URL structure - Add pagination navigation with Previous/Next buttons and page info Closes #411
1 parent 7f7c0c1 commit dc735a6

File tree

10 files changed

+138
-1
lines changed

10 files changed

+138
-1
lines changed

‎Gemfile‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ gem "jekyll", "~> 4.3.4"
1010
gem "jekyll-feed", "~> 0.17"
1111
gem "jekyll-sitemap", "~> 1.4"
1212
gem "jekyll-polyglot", "~> 1.8"
13+
gem "jekyll-paginate-v2", "~> 3.0"
1314

1415
# Additional gems for security and performance
1516
gem "webrick", "~> 1.8" # Required for Ruby 3.0+

‎Gemfile.lock‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ GEM
4646
webrick (~> 1.7)
4747
jekyll-feed (0.17.0)
4848
jekyll (>= 3.7, < 5.0)
49+
jekyll-paginate-v2 (3.0.0)
50+
jekyll (>= 3.0, < 5.0)
4951
jekyll-polyglot (1.11.0)
5052
jekyll (>= 4.0, >= 3.0)
5153
jekyll-sass-converter (3.1.0)
@@ -98,6 +100,7 @@ DEPENDENCIES
98100
csv (~> 3.3)
99101
jekyll (~> 4.3.4)
100102
jekyll-feed (~> 0.17)
103+
jekyll-paginate-v2 (~> 3.0)
101104
jekyll-polyglot (~> 1.8)
102105
jekyll-sitemap (~> 1.4)
103106
logger (~> 1.6)

‎_config.yml‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,14 @@ plugins:
5050
- jekyll-feed
5151
- jekyll-sitemap
5252
- jekyll-polyglot
53+
- jekyll-paginate-v2
54+
55+
# Pagination configuration
56+
pagination:
57+
enabled: true
58+
per_page: 15
59+
permalink: '/blog/page/:num/'
60+
title: ':title - page :num of :max'
61+
limit: 0
62+
sort_field: 'date'
63+
sort_reverse: true

‎app/_data/cs.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -476,6 +476,11 @@ blog:
476476
categories: "Kategorie"
477477
nocontent: "Dosud nebyl publikován žádný blog v angličtině."
478478
also_available: "Také dostupné v"
479+
pagination_label: "Stránkování blogu"
480+
previous_page: "Předchozí"
481+
next_page: "Další"
482+
page_info: "Stránka"
483+
of: "z"
479484

480485
#####################
481486
## OSM STATS ##

‎app/_data/en.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -471,6 +471,11 @@ blog:
471471
categories: "Blog Categories"
472472
nocontent: "No blogs currently published in english."
473473
also_available: "Also available in"
474+
pagination_label: "Blog pagination"
475+
previous_page: "Previous"
476+
next_page: "Next"
477+
page_info: "Page"
478+
of: "of"
474479

475480
#####################
476481
## OSM STATS ##

‎app/_data/es.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -467,6 +467,11 @@ blog:
467467
categories: "Blog Categorías"
468468
nocontent: "No hay blogs en ​​español publicado actualmente."
469469
also_available: "También disponible en"
470+
pagination_label: "Paginación del blog"
471+
previous_page: "Anterior"
472+
next_page: "Siguiente"
473+
page_info: "Página"
474+
of: "de"
470475

471476
#####################
472477
## OSM STATS ##

‎app/_data/fr.yml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -467,6 +467,16 @@ blog:
467467
categories: "Blog Catégories"
468468
nocontent: "Il n'y a pas des blogs de langue espagnole actuellement publiés."
469469
also_available: "Aussi disponible en"
470+
pagination_label: "Pagination du blog"
471+
previous_page: "Précédent"
472+
next_page: "Suivant"
473+
page_info: "Page"
474+
of: "de"
475+
pagination_label: "Pagination du blog"
476+
previous_page: "Précédent"
477+
next_page: "Suivant"
478+
page_info: "Page"
479+
of: "de"
470480

471481
#####################
472482
## COUNTRY STATS ##

‎app/_includes/blog.html‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ <h1 class="title feature-header">{{site.data[site.active_lang].blog.title}}</h1>
1313
{% comment %}
1414
Group posts by date to handle multilingual posts.
1515
For posts with the same date, show only one version with links to other languages.
16+
Use paginator.posts for pagination support.
1617
{% endcomment %}
17-
{% assign posts_by_date = site.posts | group_by: 'date' %}
18+
{% assign posts_by_date = paginator.posts | group_by: 'date' %}
1819
{% for date_group in posts_by_date %}
1920
{% assign posts_for_date = date_group.items %}
2021
{% assign current_lang_post = nil %}
@@ -78,6 +79,29 @@ <h2 class="blog-card__title">
7879
</div>
7980
</article>
8081
{% endfor %}
82+
83+
{% comment %}Pagination navigation{% endcomment %}
84+
{% if paginator.total_pages > 1 %}
85+
<nav class="blog-pagination" aria-label="{{site.data[site.active_lang].blog.pagination_label}}">
86+
<div class="pagination-links">
87+
{% if paginator.previous_page %}
88+
<a href="{{ paginator.previous_page_path | relative_url }}" class="pagination-link pagination-previous" rel="prev">
89+
← {{site.data[site.active_lang].blog.previous_page}}
90+
</a>
91+
{% endif %}
92+
93+
<span class="pagination-info">
94+
{{site.data[site.active_lang].blog.page_info}} {{ paginator.page }} {{site.data[site.active_lang].blog.of}} {{ paginator.total_pages }}
95+
</span>
96+
97+
{% if paginator.next_page %}
98+
<a href="{{ paginator.next_page_path | relative_url }}" class="pagination-link pagination-next" rel="next">
99+
{{site.data[site.active_lang].blog.next_page}} →
100+
</a>
101+
{% endif %}
102+
</div>
103+
</nav>
104+
{% endif %}
81105
</div>
82106
</div>
83107

‎app/assets/styles/_blog.scss‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,3 +281,73 @@
281281
.tag:hover::after {
282282
border-left-color: darken($mmGreen, 12%);
283283
}
284+
285+
/* Blog Pagination */
286+
.blog-pagination {
287+
margin: 40px 0 20px 0;
288+
padding: 20px 0;
289+
border-top: 1px solid #eee;
290+
291+
.pagination-links {
292+
display: flex;
293+
justify-content: space-between;
294+
align-items: center;
295+
flex-wrap: wrap;
296+
gap: 15px;
297+
}
298+
299+
.pagination-link {
300+
display: inline-block;
301+
padding: 8px 16px;
302+
background-color: $ButtonColor;
303+
color: white;
304+
text-decoration: none;
305+
border-radius: 4px;
306+
font-weight: 500;
307+
font-family: 'Lato';
308+
font-size: 1em;
309+
transition-property: background;
310+
transition-duration: 0.12s;
311+
transition-timing-function: linear;
312+
letter-spacing: 0.06em;
313+
314+
&:hover {
315+
background-color: darken($ButtonColor, 12%);
316+
color: white;
317+
}
318+
319+
&:active {
320+
background-color: darken($ButtonColor, 15%);
321+
color: white;
322+
}
323+
324+
&:focus {
325+
background-color: darken($ButtonColor, 12%);
326+
color: white;
327+
outline: 2px solid darken($ButtonColor, 20%);
328+
outline-offset: 2px;
329+
}
330+
}
331+
332+
.pagination-info {
333+
color: #666;
334+
font-weight: 500;
335+
font-size: 0.9em;
336+
text-align: center;
337+
flex: 1;
338+
min-width: 120px;
339+
}
340+
341+
// Responsive adjustments
342+
@media (max-width: 480px) {
343+
.pagination-links {
344+
flex-direction: column;
345+
text-align: center;
346+
}
347+
348+
.pagination-info {
349+
order: -1;
350+
margin-bottom: 10px;
351+
}
352+
}
353+
}

‎app/blog.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
layout: default
33
permalink: /blog/
44
id: blog
5+
pagination:
6+
enabled: true
7+
collection: 'posts'
58
---
69
{% assign locale = site.active_lang %}
710
{% include header.html %}

0 commit comments

Comments
 (0)