📘 [GithubPages] Jekyll hydejack 게시물 prev, next 버튼 추가 - 5

2025년 03월 07일 in Study / ETC on #Jekyll #GithubPages

[GithubPages] Jekyll hydejack 포스팅 prev, next 버튼 추가

---

• ✅ _includes/components/pagination.html
• ✅ _includes/components/link.html

게시물에 prev, next 버튼을 추가함으로써 글을 읽은 후 다시 메뉴로 가지 않고 자연스럽게 다음 이어진 글로 이어질 수 있고 특히 모바일 환경에서 페이지 탐색 버튼의 존재 유무가 큰 차이를 만든다. 즉 유저의 편의성을 향상시키기 위해 버튼을 추가하기로 결정했다.

Jekyll hydejack 테마는 기본적으로 prev, next 버튼 기능이 제공된다. 원하는 페이지에 include만 해주면 편리하게 사용할 수 있다.

✅ _includes/components/pagination.html

---

# file: `_includes/components/pagination.html`

<h2 class="sr-only">{{ site.data.strings.pagination | default:"Pagination" }}</h2>
<nav class="pagination heading clearfix" role="navigation">
  <ul>
    <li class="pagination-item older" >
      {% assign next_title = site.data.strings.older | default:"Prev" %}
      {% assign next_href = page.next.url %}
      {% include components/link.html rel="next" title=next_title href=next_href %}
    </li>
    <li class="pagination-item newer" >
      {% assign prev_title = site.data.strings.newer | default:"Next" %}
      {% assign prev_href = page.previous.url %}
      {% include components/link.html rel="prev" title=prev_title href=prev_href %}
    </li>
  </ul>
</nav>

---

✅ _includes/components/link.html

---

# file: `_includes/components/link.html`

{% if include.href.size > 0 %}
  <a
    class="{{ include.class }} {{ include.a_class }}"
    href="{{ include.href }}"
    {% if include.rel %}rel="{{ include.rel }}"{% endif %}
    {% if include.property %}property="{{ include.property }}"{% endif %}
  >
    {{- include.title -}}
  </a>
{% else %}
  <span class="{{ include.class }} {{ include.span_class }}">{{ include.title }}</span>
{% endif %}

기본적으로 제공되는 기능이다. 페이지 정보를 불러와 next.url, prev.url 정보를 가지고 각 버튼에 링크를 걸어주는 방식이다.

[!note] 이제 원하는 페이지에 include만 해주면 된다. 나는 list.html, post.html에 include를 해주었다. {%include components/pagination.html %}

---

# file: list.html

{{ content }}

{% assign posts = site.categories[page.slug] | default:site.tags[page.slug] | default:site.posts %}

{% assign date_formats  = site.data.strings.date_formats               %}
{% assign list_group_by = date_formats.list_group_by | default:"%Y"    %}
{% assign list_entry    = date_formats.list_entry    | default:"%d %b" %}
{%include components/pagination.html %}
{% assign prev_date = 0 %}
{% if page.no_groups %}<ul class="related-posts">{% endif %}
{% for post in posts %}
  {% assign current_date = post.date | date:list_group_by %}
  {% unless page.no_groups %}{% if current_date != prev_date %}
    {% unless forloop.first %}</ul>{% endunless %}
    <h2 id="{{ list_group_by | slugify }}-{{ current_date | slugify }}" class="hr-bottom">{{ current_date }}</h2>
    <ul class="related-posts">
    {% assign prev_date = current_date %}
  {% endif %}{% endunless %}
  {% include_cached components/post-list-item.html post=post format=list_entry %}
  {% if forloop.last %}</ul>{% endif %}
{% endfor %}

#file: post.html

{% assign version = jekyll.version | split:'.' %}
{% assign major = version[0] | plus:0 %}
{% assign minor = version[1] | plus:0 %}
{% assign patch = version[2] | plus:0 %}

{% include_cached components/post.html post=page no_link_title=true no_excerpt=true hide_image=page.hide_image hide_description=page.hide_description %}
{%include components/pagination.html %}
<!-- {% include components/dingbat.html %} -->

{% assign addons = page.addons | default:site.hydejack.post_addons %}
{% unless addons %}{% assign addons = "about,newsletter,related,random" | split:"," %}{% endunless %}
{% for addon in addons %}
  {% case addon %}
  {% when 'about' %}
     {% include_cached components/about.html author=page.author %}
  {% when 'related' %}
    {% include if-non-null try="components/related-posts.html" %}
  {% when 'comments' %}
    {% include body/comments.html %}
  {% else %}
  {% endcase %}
{% endfor %}

카테고리 정렬 기준은 알파벳순 게시물 정렬 기준은 날짜순으로 이전글, 다음글 페이지가 이동된다. order에 순번을 정해서 정렬을 하는 방법도 있지만 기회가 되면 나중에 필요하면 구현 해볼 예정이다.

---