Skip to content

Commit e41fac2

Browse files
realcoding2003realcoding2003
committed
feat(pagination): 영어/일본어 페이지에 페이지네이션 추가
jekyll-paginate가 루트에서만 동작하는 제약으로 인해 JS 기반 클라이언트 사이드 페이지네이션으로 3개 언어 통일
1 parent b3d4403 commit e41fac2

6 files changed

Lines changed: 169 additions & 33 deletions

File tree

‎_data/en.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ posts:
1111
recent: "Recent Posts"
1212
view_all: "View All Posts"
1313
date_format: "%B %d, %Y"
14+
prev_page: "Previous"
15+
next_page: "Next"
1416

1517
ui:
1618
previous_post: "← Previous"

‎_data/ja.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ posts:
1111
recent: "最新記事"
1212
view_all: "すべての記事を見る"
1313
date_format: "%Y年%m月%d日"
14+
prev_page: "前へ"
15+
next_page: "次へ"
1416

1517
ui:
1618
previous_post: "← 前の記事"

‎_data/ko.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ posts:
1111
recent: "최근 포스트"
1212
view_all: "모든 포스트 보기"
1313
date_format: "%Y년 %m월 %d일"
14+
prev_page: "이전"
15+
next_page: "다음"
1416

1517
ui:
1618
previous_post: "← 이전 포스트"

‎en/index.html‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ <h2>{{ lang_data.posts.recent }}</h2>
3131
<div class="posts-list">
3232
{% assign english_posts = site.posts | where: "lang", "en" %}
3333
{% if english_posts.size > 0 %}
34-
{% for post in english_posts limit:20 %}
34+
{% for post in english_posts %}
3535
<article class="post-item">
3636
<h3 class="post-title">
3737
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
@@ -55,7 +55,61 @@ <h3 class="post-title">
5555
<p style="color: var(--text-secondary); padding: var(--spacing-xl) 0;">Coming Soon! English posts will be available soon.</p>
5656
{% endif %}
5757
</div>
58+
59+
<nav class="pagination" id="pagination-nav" style="display:none">
60+
<a href="#" class="pagination-btn pagination-prev" id="prev-btn">← {{ lang_data.posts.prev_page }}</a>
61+
<span class="pagination-info" id="page-info"></span>
62+
<a href="#" class="pagination-btn pagination-next" id="next-btn">{{ lang_data.posts.next_page }} →</a>
63+
</nav>
5864
</section>
5965
</div>
6066
</div>
6167
</main>
68+
69+
<script>
70+
(function() {
71+
var POSTS_PER_PAGE = 10;
72+
var posts = document.querySelectorAll('.posts-list .post-item');
73+
if (posts.length <= POSTS_PER_PAGE) return;
74+
75+
var totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
76+
var params = new URLSearchParams(window.location.search);
77+
var currentPage = parseInt(params.get('page')) || 1;
78+
currentPage = Math.max(1, Math.min(currentPage, totalPages));
79+
80+
var nav = document.getElementById('pagination-nav');
81+
var prevBtn = document.getElementById('prev-btn');
82+
var nextBtn = document.getElementById('next-btn');
83+
var pageInfo = document.getElementById('page-info');
84+
var basePath = window.location.pathname;
85+
86+
function showPage(page) {
87+
var start = (page - 1) * POSTS_PER_PAGE;
88+
var end = start + POSTS_PER_PAGE;
89+
for (var i = 0; i < posts.length; i++) {
90+
posts[i].style.display = (i >= start && i < end) ? '' : 'none';
91+
}
92+
pageInfo.textContent = page + ' / ' + totalPages;
93+
94+
if (page > 1) {
95+
prevBtn.href = page === 2 ? basePath : basePath + '?page=' + (page - 1);
96+
prevBtn.classList.remove('disabled');
97+
} else {
98+
prevBtn.removeAttribute('href');
99+
prevBtn.classList.add('disabled');
100+
}
101+
102+
if (page < totalPages) {
103+
nextBtn.href = basePath + '?page=' + (page + 1);
104+
nextBtn.classList.remove('disabled');
105+
} else {
106+
nextBtn.removeAttribute('href');
107+
nextBtn.classList.add('disabled');
108+
}
109+
}
110+
111+
nav.style.display = '';
112+
showPage(currentPage);
113+
window.scrollTo(0, 0);
114+
})();
115+
</script>

‎index.html‎

Lines changed: 53 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,7 @@ <h2>{{ lang_data.posts.recent }}</h2>
2727

2828
<div class="posts-list">
2929
{% assign korean_posts = site.posts | where: "lang", "ko" %}
30-
{% assign posts_per_page = 10 %}
31-
{% assign current_page = paginator.page | default: 1 %}
32-
{% assign offset_val = current_page | minus: 1 | times: posts_per_page %}
33-
{% for post in korean_posts limit: posts_per_page offset: offset_val %}
30+
{% for post in korean_posts %}
3431
<article class="post-item">
3532
<h3 class="post-title">
3633
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
@@ -52,35 +49,60 @@ <h3 class="post-title">
5249
{% endfor %}
5350
</div>
5451

55-
{% assign total_korean = korean_posts | size %}
56-
{% assign total_pages = total_korean | divided_by: posts_per_page %}
57-
{% assign remainder = total_korean | modulo: posts_per_page %}
58-
{% if remainder > 0 %}
59-
{% assign total_pages = total_pages | plus: 1 %}
60-
{% endif %}
61-
62-
{% if total_pages > 1 %}
63-
<nav class="pagination" aria-label="페이지 네비게이션">
64-
{% if current_page > 1 %}
65-
{% if current_page == 2 %}
66-
<a href="/" class="pagination-btn pagination-prev">← {{ lang_data.posts.prev_page | default: "이전" }}</a>
67-
{% else %}
68-
<a href="/page{{ current_page | minus: 1 }}/" class="pagination-btn pagination-prev">← {{ lang_data.posts.prev_page | default: "이전" }}</a>
69-
{% endif %}
70-
{% else %}
71-
<span class="pagination-btn pagination-prev disabled">← {{ lang_data.posts.prev_page | default: "이전" }}</span>
72-
{% endif %}
73-
74-
<span class="pagination-info">{{ current_page }} / {{ total_pages }}</span>
75-
76-
{% if current_page < total_pages %}
77-
<a href="/page{{ current_page | plus: 1 }}/" class="pagination-btn pagination-next">{{ lang_data.posts.next_page | default: "다음" }} →</a>
78-
{% else %}
79-
<span class="pagination-btn pagination-next disabled">{{ lang_data.posts.next_page | default: "다음" }} →</span>
80-
{% endif %}
52+
<nav class="pagination" id="pagination-nav" style="display:none">
53+
<a href="#" class="pagination-btn pagination-prev" id="prev-btn">← {{ lang_data.posts.prev_page }}</a>
54+
<span class="pagination-info" id="page-info"></span>
55+
<a href="#" class="pagination-btn pagination-next" id="next-btn">{{ lang_data.posts.next_page }} →</a>
8156
</nav>
82-
{% endif %}
8357
</section>
8458
</div>
8559
</div>
8660
</main>
61+
62+
<script>
63+
(function() {
64+
var POSTS_PER_PAGE = 10;
65+
var posts = document.querySelectorAll('.posts-list .post-item');
66+
if (posts.length <= POSTS_PER_PAGE) return;
67+
68+
var totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
69+
var params = new URLSearchParams(window.location.search);
70+
var currentPage = parseInt(params.get('page')) || 1;
71+
currentPage = Math.max(1, Math.min(currentPage, totalPages));
72+
73+
var nav = document.getElementById('pagination-nav');
74+
var prevBtn = document.getElementById('prev-btn');
75+
var nextBtn = document.getElementById('next-btn');
76+
var pageInfo = document.getElementById('page-info');
77+
var basePath = window.location.pathname;
78+
79+
function showPage(page) {
80+
var start = (page - 1) * POSTS_PER_PAGE;
81+
var end = start + POSTS_PER_PAGE;
82+
for (var i = 0; i < posts.length; i++) {
83+
posts[i].style.display = (i >= start && i < end) ? '' : 'none';
84+
}
85+
pageInfo.textContent = page + ' / ' + totalPages;
86+
87+
if (page > 1) {
88+
prevBtn.href = page === 2 ? basePath : basePath + '?page=' + (page - 1);
89+
prevBtn.classList.remove('disabled');
90+
} else {
91+
prevBtn.removeAttribute('href');
92+
prevBtn.classList.add('disabled');
93+
}
94+
95+
if (page < totalPages) {
96+
nextBtn.href = basePath + '?page=' + (page + 1);
97+
nextBtn.classList.remove('disabled');
98+
} else {
99+
nextBtn.removeAttribute('href');
100+
nextBtn.classList.add('disabled');
101+
}
102+
}
103+
104+
nav.style.display = '';
105+
showPage(currentPage);
106+
window.scrollTo(0, 0);
107+
})();
108+
</script>

‎ja/index.html‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ <h2>{{ lang_data.posts.recent }}</h2>
3131
<div class="posts-list">
3232
{% assign japanese_posts = site.posts | where: "lang", "ja" %}
3333
{% if japanese_posts.size > 0 %}
34-
{% for post in japanese_posts limit:20 %}
34+
{% for post in japanese_posts %}
3535
<article class="post-item">
3636
<h3 class="post-title">
3737
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
@@ -55,7 +55,61 @@ <h3 class="post-title">
5555
<p style="color: var(--text-secondary); padding: var(--spacing-xl) 0;">準備中！日本語の記事は近日公開予定です。</p>
5656
{% endif %}
5757
</div>
58+
59+
<nav class="pagination" id="pagination-nav" style="display:none">
60+
<a href="#" class="pagination-btn pagination-prev" id="prev-btn">← {{ lang_data.posts.prev_page }}</a>
61+
<span class="pagination-info" id="page-info"></span>
62+
<a href="#" class="pagination-btn pagination-next" id="next-btn">{{ lang_data.posts.next_page }} →</a>
63+
</nav>
5864
</section>
5965
</div>
6066
</div>
6167
</main>
68+
69+
<script>
70+
(function() {
71+
var POSTS_PER_PAGE = 10;
72+
var posts = document.querySelectorAll('.posts-list .post-item');
73+
if (posts.length <= POSTS_PER_PAGE) return;
74+
75+
var totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
76+
var params = new URLSearchParams(window.location.search);
77+
var currentPage = parseInt(params.get('page')) || 1;
78+
currentPage = Math.max(1, Math.min(currentPage, totalPages));
79+
80+
var nav = document.getElementById('pagination-nav');
81+
var prevBtn = document.getElementById('prev-btn');
82+
var nextBtn = document.getElementById('next-btn');
83+
var pageInfo = document.getElementById('page-info');
84+
var basePath = window.location.pathname;
85+
86+
function showPage(page) {
87+
var start = (page - 1) * POSTS_PER_PAGE;
88+
var end = start + POSTS_PER_PAGE;
89+
for (var i = 0; i < posts.length; i++) {
90+
posts[i].style.display = (i >= start && i < end) ? '' : 'none';
91+
}
92+
pageInfo.textContent = page + ' / ' + totalPages;
93+
94+
if (page > 1) {
95+
prevBtn.href = page === 2 ? basePath : basePath + '?page=' + (page - 1);
96+
prevBtn.classList.remove('disabled');
97+
} else {
98+
prevBtn.removeAttribute('href');
99+
prevBtn.classList.add('disabled');
100+
}
101+
102+
if (page < totalPages) {
103+
nextBtn.href = basePath + '?page=' + (page + 1);
104+
nextBtn.classList.remove('disabled');
105+
} else {
106+
nextBtn.removeAttribute('href');
107+
nextBtn.classList.add('disabled');
108+
}
109+
}
110+
111+
nav.style.display = '';
112+
showPage(currentPage);
113+
window.scrollTo(0, 0);
114+
})();
115+
</script>

0 commit comments

Comments
 (0)