📘 [GithubPages] Jekyll hydejack 태그 기능 추가 - 8

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

[GithubPages] Jekyll hydejack 태그 기능 추가

---

• 📝 태그(Tag)의 목적과 기능 구현 방법
• ✅ 왜 태그가 필요한가?
• ✍ 태그 기능 구현 방법
• ✅ 포스트에 태그 추가하기
• ✅ 각 태그에 대해 개별 페이지 생성
• ✅ 태그 목록에서 해당 페이지로 연결
• ✍ 태그 목록 리스트 만들기
• ✅ 1단계: 사이드바 메뉴 수정
• ✅ 2단계: /tags/ 페이지 만들기
• ✅ 3단계 (선택): tag_titles.yml 데이터 구성
• 💡 태그 정리 팁
• ✅ 4단계: 스타일 추가 (my-style.scss)
• 📘 마무리

---

📝 태그(Tag)의 목적과 기능 구현 방법

---

개발 블로그를 운영하면서 글이 늘어날수록, 글들을 어떻게 분류하고 찾아보기 쉽게 만들 수 있을지 고민하게 된다.
이때 유용하게 쓰이는 기능이 바로 카테고리(Category) 와 태그(Tag) 이다.

---

✅ 왜 태그가 필요한가?

---

카테고리는 비교적 큰 범주로 글을 나누는 데 사용된다.
예를 들어 Dev, Study 같은 큰 주제를 카테고리로 나눈다.

그에 반해, 태그는 더 유연하고 세부적인 분류를 가능하게 한다.

예시:

• React는 Dev 카테고리에 포함되지만, 동시에 Frontend, JSX, SPA 등 다양한 관점으로 태깅될 수 있다.
• 하나의 글에 여러 태그를 붙여 다양한 키워드로 연결시킬 수 있다.

즉, 태그는 글 간의 연관성을 가볍고 직관적으로 연결해주는 링크 역할을 한다.

---

✍ 태그 기능 구현 방법

✅ 포스트에 태그 추가하기

---

글의 상단 Front Matter에 tags 필드를 추가한다.

---
layout: post
title: react
image: 
  path: /assets/img/blog/blog-basic.jpg
categories: [dev, react]
tags: [react, web]
description: >
  A page showing Hydejack-specific markdown content.  
---

---

✅ 각 태그에 대해 개별 페이지 생성

---

_featured_tags 폴더 안에 각 태그에 대해 개별 페이지 생성한다. 예를 들어 react, web 태그를 생성하고 싶다면 react.md, web.md 처럼 태그마다 하나씩 생성한다.

---
layout: tag-list
type: tag
title: React
slug: react
sidebar: true
description: >
  about React
---

---

✅ 태그 목록에서 해당 페이지로 연결

---

태그 링크를 선택했을떄 태그와 관련된 게시글 목록을 보여줄수 있는 _layout/tag-list.html 페이지를 만든다. list.html 페이지를 참고해서 만들면된다.

---
layout: page
---

{%include components/pagination.html %}
{{ content }}

{% assign posts = site.tags[page.slug] %}

{% 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" %}

{% for post in posts %}
  {% assign currentdate = post.date | date:list_group_by %}
  {% if currentdate != date %}
    {% unless forloop.first %}</ul>{% endunless %}
    <h2 id="{{ list_group_by | slugify }}-{{ currentdate | slugify }}" class="hr">{{ currentdate }}</h2>
    <ul class="related-posts">
    {% assign date = currentdate %}
  {% endif %}
  {% include components/post-list-item.html post=post format=list_entry %}
  {% if forloop.last %}</ul>{% endif %}
{% endfor %}

Hydejack 테마는 기본적으로 태그 기능을 제공한다. 이제 기본적인 태그 셋팅은 끝났다. 아까 처음에 말한 글의 상단 Front Matter 태그 필드를 추가한 게시물에 들어가보면 상단에 태그 목록(#React, #Web)이 보일 것이다.

---

✍ 태그 목록 리스트 만들기

이 태그 페이지는 다음과 같은 목적을 달성하기 위해 구현되었다:

• 글 수가 많아졌을 때, 주제별로 분류하고 연결하는 기능
• 블로그 탐색을 더 쉽게 만들기 위한 UI 개선
• 사이드바 메뉴에 Tags를 추가하고 /tags/ 페이지에서 전체 태그 목록을 깔끔하고 그리드 형태로 보여주는 것이다.

✅ 1단계: 사이드바 메뉴 수정

---

_config.yml의 menu: 항목을 다음과 같이 수정한다.

menu:
  - title: Dev
    url: /dev/
    submenu:
      - title: Spring
        url: /spring/
      - title: React
        url: /react/
  - title: Study
    url: /study/
    submenu:
      - title: Algorithm
        url: /algorithm/
      - title: Data Structure
        url: /ds/
      - title: ETC
        url: /etc/
  - title: Tags    # ← 여기를 추가
    url: /tags/
  - title: About
    url: /about/

---

✅ 2단계: /tags/ 페이지 만들기

---

• tags.md _pages 폴더 안에 생성
• 루트 디렉터리에 생성하면 자동인식 되지만 _pages 폴더 안에 넣어서 관리하고 싶으면
• _config.yml 에서 collections에 pages 추가

# file: '_config.yml'
collections:
  pages:
    output: true
    permalink: /:name/

• 제목은 “Tags”
• 주소는 https://내블로그주소/tags/ 접속 가능하게 설정

---
layout: sidebar-tags
title: "Tags"
permalink: /tags/
---

sidebar-tags.html 파일을 _layout 폴더에 생성

---
layout: default
---

{% assign tag_titles = site.data.tag_titles %}
{% assign tag_slugs = site.data.tag_slugs %}
{% assign sorted_tags = site.tags | sort %}

<h1 class="page-title">Tags</h1>
<div class="tag-grid">
    {% for tag in sorted_tags %}
    {% assign tag_name = tag[0] %}
    {% assign title = tag_titles[tag_name] | default: tag_name %}
    {% assign slug = tag_slugs[tag_name] | default: tag_name | slugify %}

    <a href="/tag-{{ slug }}/" class="tag-box">
        <span class="tag-name">#{{ title }}</span>
        <span class="tag-count">{{ tag[1].size }}</span>
    </a>
    {% endfor %}
</div>
<p class="faded fine" style="margin-top: 2rem;">
	원하는 주제의 태그를 클릭하면 해당 글 목록으로 이동합니다.
</p>

• _data/tag_titles.yml: 태그의 표시 이름(title) 매핑
• {% assign sorted_tags = site.tags | sort %}
• Jekyll의 site.tags는 모든 태그와 해당 글 목록을 담고 있음
• 알파벳순으로 정렬해서 보여주기 위함

---

✅ 3단계 (선택): tag_titles.yml 데이터 구성

---

현재 설정된 태그들은 영소문자로 출력을 원하면 3단계는 건너띄어도 된다.. 나는 화면에 보여줄땐 대문자가 들어가길 원한다. 예를들어 algorithm을 Algorithm으로 표현하려고 한다. 그렇기에 태그 title 매핑을 하기위해 _data/tag_titles.yml 생성한다.

# file: _data/tag_titles.yml
algorithm: Algorithm
git: Git
data-structure: Data Structure
react: React
spring: Spring
web: Web
codingtest: CodingTest
jekyll: Jekyll
markdown: Markdown

💡 태그 정리 팁

• 가능한 한 짧고 명확한 단어로 태그를 만든다.
  • 예: data-structure보다는 ds, algorithm을 태그로
• 중복/유사 태그 방지 (예: React, react, ReactJS를 하나로 통일)
• 태그는 검색 키워드이자 연결 고리이기 때문에 전략적으로 관리할수록 블로그 탐색이 쉬워진다.

---

✅ 4단계: 스타일 추가 (my-style.scss)

---

css 스타일적인 부분은 대부분 챗gpt에 요청을 했다..🤣

.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.tag-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: 0.2s ease-in-out;
}

.tag-box:hover {
  background-color: var(--highlight);
  color: var(--accent);
  transform: scale(1.02);
}

.tag-name {
  font-weight: bold;
}

.tag-count {
  font-size: 0.9rem;
  color: var(--text-light);
}

완성된 화면입니다. 태그가 많지 않아서 아랫쪽 빈 공간이 많이 남는다. 남는 부분은 자유롭게 원하는 요소를 추가해주면 된다. 최근 게시물 추가, 태그 설명 안내문구?, 인기 태그(GA(Google Analytics)와 연동해서 자동화 가능), 랜덤 글 보기, 댓글창 등등 넣으면 된다.

Search 페이지에도 빈공간이 남아서 태그 목록을 넣어줬다. Pages 부분을 걷어내고 코드를 넣어주면 된다.

# file: 'default.html'

{% assign tag_titles = site.data.tag_titles %}
  {% assign sorted_tags = site.tags | sort %}
  
  <h2 class="hr-bottom">{{ strings.tags | default: "Tags" }}</h2>
  <div class="tag-grid">
    {% for tag in sorted_tags %}
    {% assign tag_name = tag[0] %}
    {% assign title = tag_titles[tag_name] | default: tag_name %}
    {% assign slug = tag_name %}
  
    <a href="/tag-{{ slug }}/" class="tag-box">
      <span class="tag-name">{{ title }}</span>
      <span class="tag-count">({{ tag[1].size }})</span>
    </a>
    {% endfor %}
  </div>
  <p class="faded fine" style="margin-top: 2rem;">
    원하는 주제의 태그를 클릭하면 해당 글 목록으로 이동합니다.
  </p>

짜잔 완성 ☺️

---

📘 마무리

내가 블로그에 태그 기능을 구현한 가장 큰 이유는 다음과 같다:

• 글이 많아질수록 정리와 검색이 어려워지는 문제를 해결하고 싶었다.
• 독자에게도, 나에게도 빠르게 관련 글을 찾을 수 있는 연결 통로가 되기 때문이다.
• 앞으로 글이 더 많아질수록, 태그는 블로그의 중요한 정보 구조 중 하나가 될 것이다.

---