[Chirpy] 같은 카테고리 내에서 이전 글, 다음 글 이동
Move Previous Text, Next Text Within the Same Category in Chirpy
카테고리가 늘어나며 생긴 불편함
포스트 아래쪽에는 OLDER 와 NEWER 라는 버튼을 통해 이전 글과 다음 글로 이동할 수 있다.
Chirpy 의 기본 세팅은 전체 글 기준에서의 이전 글과 다음 글이 링크 되어있다.
여러 주제의 글을 작성하다 보니, 같은 카테고리 내의 글이 링크가 되었으면 좋겠다는 생각이 들었다.
글의 주제가 따로 논다…
해결방법
이와 관련된 정보가 게시된 블로그 글들(클릭) 을 보았지만 다른 테마이거나 기존의 스타일에서
변형이 일어난 형태라서, 해당 게시글들을 참고하며 직접 수정을 진행하였다.
수정을 한 후의 모습과, 코드는 아래와 같다.
추가로, 타이틀 위의 OLDER 과 NEWER 표기 또한 PREV 와 NEXT 로 변경하였다.
같은 카테고리, PREV 및 NEXT 로 표기 수정
Code
_include/post-nav.html 경로로 들어간 뒤, 기존의 코드를 전부 지우고 아래의 코드를 붙여 넣어주면 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
{% assign cat = page.categories[1] %}
{% assign cat_list = site.categories[cat] %}
{% for post in cat_list %}
{% if post.url == page.url %}
{% assign prevIndex = forloop.index0 | minus: 1 %}
{% assign nextIndex = forloop.index0 | plus: 1 %}
{% if forloop.first == false %}
{% assign next_post = cat_list[prevIndex] %}
{% endif %}
{% if forloop.last == false %}
{% assign prev_post = cat_list[nextIndex] %}
{% endif %}
{% break %}
{% endif %}
{% endfor %}
<div class="post-navigation d-flex justify-content-between">
{% if prev_post %}
<a
href="{{ site.baseurl }}{{ prev_post.url }}"
class="btn btn-outline-primary"
aria-label="{{ site.data.locales[include.lang].post.button.previous }}"
>
<p>{{ prev_post.title }}</p>
</a>
{% else %}
<div
class="btn btn-outline-primary disabled"
aria-label="{{ site.data.locales[include.lang].post.button.previous }}"
>
<p>-</p>
</div>
{% endif %}
{% if next_post %}
<a
href="{{ site.baseurl }}{{ next_post.url }}"
class="btn btn-outline-primary"
aria-label="{{ site.data.locales[include.lang].post.button.next }}"
>
<p>{{ next_post.title }}</p>
</a>
{% else %}
<div
class="btn btn-outline-primary disabled"
aria-label="{{ site.data.locales[include.lang].post.button.next }}"
>
<p>-</p>
</div>
{% endif %}
</div>
원본코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- Navigation buttons at the bottom of the post. -->
<nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation">
{% assign previous = site.data.locales[include.lang].post.button.previous %}
{% assign next = site.data.locales[include.lang].post.button.next %}
{% if page.previous.url %}
<a
href="{{ site.baseurl }}{{ page.previous.url }}"
class="btn btn-outline-primary"
aria-label="{{ previous }}"
>
<p>{{ page.previous.title }}</p>
</a>
{% else %}
<div class="btn btn-outline-primary disabled" aria-label="{{ previous }}">
<p>-</p>
</div>
{% endif %}
{% if page.next.url %}
<a
href="{{ site.baseurl }}{{page.next.url}}"
class="btn btn-outline-primary"
aria-label="{{ next }}"
>
<p>{{ page.next.title }}</p>
</a>
{% else %}
<div class="btn btn-outline-primary disabled" aria-label="{{ next }}">
<p>-</p>
</div>
{% endif %}
</nav>
다음은 OLDER 과 NEWER 를 수정하기 위해서, 현재 본인이 사용하고 있는 언어의 파일을 수정해야한다.
본인 블로그의 기본언어는 루트폴더의 ./_config.yml 를 통해 확인할 수 있다.
1
2
3
4
5
6
7
8
9
10
plugins:
- jekyll-target-blank
theme: jekyll-theme-chirpy
lang: ko-KR # 블로그 기본언어
timezone: Asia/Seoul
title: Minssuy99
기본 언어를 찾았다면, _data/locales/설정언어.yml 으로 들어간다.
필자 같은 경우는 ko-KR 이 기본언어 이기 때문에, _data/locales/ko-KR.yml 을 수정한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# ----- Posts related labels -----
post:
written_by: By
posted: Posted
updated: Updated
words: words
pageview_measure: views
read_time:
unit: min
prompt: read
relate_posts: Further Reading
share: Share
button:
next: Next # Newer → Next 로 수정
previous: Prev # Older → Prev 로 수정
copy_code:
succeed: Copied!
share_link:
title: Copy link
succeed: Link copied successfully!
여기까지 수정하였다면, 기존의 스타일은 유지된 채로 같은 카테고리 간의 링크가 연결된 모습을 확인할 수 있다.