Abstract
블로그 열람의 편의성을 위해 jekyll-archives 플러그인을 설치해 카테고리와 태그 조회 페이지를 만들었다.
사용하는 Theme에 구현되어있는 플러그인에 따라 다르지만, Post의
FrontMatter에 입력한 카테고리나 태그들을 관리하고자 할 땐jekyll-archives1 플러그인을 활용할 수 있다.
아카이브 페이지의 자동생성은 Jekyll 블로그에서 가능하지만, GitHub Pages에선 지원되지 않아 매뉴얼로 각 페이지의 md파일을 생성해줘야 한다.
플러그인 없이 카테고리&태그 관리 페이지를 생성 할 수 있는 방법도 있지만 2 구조적인 부분에 우선 익숙해지고자 플러그인을 활용했다.
Setting
상세한 기능과 설명은 jekyll-archives의 GitHub 3 를 참고했고,
Jekyll테마 Minimal Mistake의 GitHub 4 를 참고해 아래 내용을 입력했다.
Gemfile
깃블로그 디렉토리 내부에 있는 Gemfile의 plugin 항목에 jekyll-archives 추가
# If you have any plugins, put them here!
group :jekyll_plugins do
gem "jekyll-feed", "~> 0.12"
gem "jekyll-paginate", "~> 1.1"
gem "jekyll-archives" # 추가 입력!
end
cmd의 디렉토리를 깃블로그 위치로 cd 한 뒤 bundle install
결과
Fetching gem metadata from https://rubygems.org/........... Resolving dependencies... Fetching jekyll-archives 2.2.1 Installing jekyll-archives 2.2.1 Bundle complete! 9 Gemfile dependencies, 38 gems now installed. Use `bundle info [gemname]` to see where a bundled gem is installed.
성공적으로 설치가 되면 Gemfile.lock파일에 jekyll-archives가 추가되어있는 것을 확인할 수 있다.
config.yml
config.yml파일에 jekyll-archives 플러그인을 활성화 시키기
plugins:
- jekyll-paginate
- jekyll-archives # 추가
jekyll-archives:
enabled: # 구성할 아카이브 항목 - 연도, 월, 일자로도 구분할 수 있음
- categories
- tags
layout: archive # 카테고리&태그 페이지 레이아웃
permalinks: # 링크 구성 - 입력한 카테고리 또는 태그명으로 링크구조가 자동 생성된다
category: /category/:name/
tag: /tag/:name/
여기까지 진행 후 cmd창에 bundle exec jekyll serve 입력하면
이전 post들에 프론트매터로 입력한 category와 tag들이 _site에 폴더로 자동 생성되고 liquid를 통해 site.categories 또는 site.tags 조회가 가능해진다
layouts
이해한 내용을 정리하면 이렇다
정의한 명칭들 categories tags archive category tag 에 주의하며 Config와 통일된 이름으로 파일구조를 만들어야 제대로 작동한다
archive.html
하나의 카테고리 또는 태그와 연관된 post들을 모아놓은 조회 페이지 양식을 archive.html에 정의해준다
---
layout: default
---
<div class="main-content archive-page clearfix">
<div class="category-item">
<div class="post-lists">
<div class="post-lists-body">
<div class="category-title">{{ page.title }}</div>
{% for post in site.posts %}
{% capture this_category %}{{ post.category }}{% endcapture %}
{% if this_category == page.title %}
<div class="post-list-item">
<div class="post-list-item-container">
<div class="item-label_noThumb">
<div class="item-title"><a href="{{ post.url }}">{{ post.title }}</a></div>
<div class="item-meta clearfix">
<div class="item-meta-date"> {{ post.date | date: "%b %d, %Y" }} </div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
category1.md
Jekyll블로그에선 마크다운 파일 없이도 자동으로 생성된 index.html에 archive레이아웃이 적용되어 생성된다.
- localhost로 페이지를 랜더링 하면 추가작업 없이 페이지가 생성되는 모습을 볼 수 있다
하지만 GitHub Pages에선 이런 기능이 지원되지 않기 때문에 localhost가 아닌 라이브에선 404 Page가 뜬다.
이를 방지하기 위해 각 카테고리와 태그들의 마크다운 파일을 매뉴얼로 만들어줘야 한다.
앞으로의 포스트에 입력할 카테고리와 태그들이 커밋과 동시에 자동으로 마크다운 파일을 생성해주는 Action 기능이 있는 것 같지만 우선 Archive구조에 집중해보기로 했다
마크다운 파일명은 _site에 자동생성된 각 카테고리, 태그들의 이름과 일치해야 하고
내용은 아래와 같이 입력 후 별도 적용해 줄 내용이 없는 이상 비워주면 된다
---
layout: archive
title: gitblog
---
Collections
모든 카테고리들을 모아놓은 페이지를 categories.html에, 태그는 tags.html에 정의한 포멧으로 만든다.
Minimal-mistake에 적용된 양식을 참고했다 5
---
layout: default
---
{% assign categories_max = 0 %}
{% for category in site.categories %}
{% if category[1].size > categories_max %}
{% assign categories_max = category[1].size %}
{% endif %}
{% endfor %}
<div class="main-content archive-page clearfix">
<div class="category-item">
<div class="post-lists">
{% for i in (1..categories_max) %}
{% for category in site.categories %}
{% if category[1].size == i %}
<div class="category-title">
<a href="https://ssonsonya.github.io/category/{{ category[0] }}">
{{ category[0] }} _<span class="taxonomy_count">{{ i }}</span>
</a>
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
</div>
sidebar에 활용
<h3 class="meta-sublist">Levelling Up</h3>
<div class="meta-item">
<div class="taxonomy__index">
{% for category in site.categories %}
<li>
<a href="https://ssonsonya.github.io/category/{{ category[0] }}">
<strong>{{ category[0] }}</strong></a>
</li>
{% endfor %}
</div>
</div>