[블로그 설정] Jekyll Minimal-mistakes 테마로 블로그를 생성해보자!-(3)

2 분 소요

지난번 포스트Jekyll Minimal-mistakes 테마로 블로그를 생성해보자!-(2)에서는 _config.yml파일을 수정하고 간략히 Test Posting하는 방법을 설명했습니다.
이번 포스트에서는 여러가지 카테고리들을 생성하고 이에 대응하는 sidebar를 생성하는 방법에 대해 알아보도록 하겠습니다.

| navigation.yml 파일 수정하기

Minimal-mistakes Github 사이트에서 기본적으로 제공을 해주는 navigation.yml 파일을 열어 수정해보겠습니다. navigation.yml 파일은 _data/ 경로에 위치해있습니다. 먼저 기존에 제공된 navigation.yml 파일을 열어보면 다음과 같이 구성되어 있습니다.

# main links
main:
  - title: "Quick-Start Guide"
    url: https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/
  # - title: "About"
  #   url: https://mmistakes.github.io/minimal-mistakes/about/
  # - title: "Sample Posts"
  #   url: /year-archive/
  # - title: "Sample Collections"
  #   url: /collection-archive/
  # - title: "Sitemap"
  #   url: /sitemap/

여기서 main 하단에 sidebar-blog라는 항목을 추가하고 카테고리들을 생성해보겠습니다. 예를들어 Python이라는 카테고리를 생성한다면

sidebar-blog:
  - title: "Python"
    url: "/categories/python"

다음과 같이 title과 url을 적어주면 됩니다.

  • title 은 원하는 카테고리명을 적습니다.
  • url 은 밑에서 다룰 _pages/categories 파일 내의 permalink와 동일하게 적습니다.

| _pages 폴더 구성하기

위에서 설명한 navigation.yml 파일을 수정하여 블로그의 사이드바에 카테고리를 추가하였습니다. 이제 원하는 카테고리를 눌렀을 때 관련된 포스트들을 보여주도록 _pages 폴더를 구성해야 합니다.

우선 최상위 경로에 _pages 폴더를 만들어 줍니다. 그리고 입맛에 맞게 폴더를 구성하면 됩니다.

저는 다음과 같은 구조로 _pages를 만들었습니다.

/_pages
 ㄴ 404.md
 ㄴ about.md
 ㄴ category-archive.md
 ㄴ tag-archive.md
 ㄴ /categories
    ㄴ category-{}.md
    ㄴ category-{}.md
    :
    :

다음의 파일들은 Minimal-mistakes Github의 minimal-mistakes/docs/_pages에서 샘플로 제공하는 파일을 가져왔습니다.

  • 404.md 404 에러 페이지
  • about.md about 페이지
  • category-archive.md 카테고리 페이지
  • tag-archive.md 태그 페이지

원하시는 다른 페이지를 가져와서 사용하시면 됩니다!

이제 _pages 폴더 내에 /categories 라는 폴더를 만들고 navigation.yml 를 수정하며 언급했던 permalink에 대한 내용을 _pages/categories/category-{}.md 파일에 대한 설명으로 이어가도록 하겠습니다.

category-{}.md 파일은 navigation.yml 에서 추가한 sidebar-blog의 title 갯수만큼 만들어주면 됩니다.

예를들어 위에서 수정한 navigation.yml 의 sidebar-blog 부분을 다시 보면 하나의 title 인 Python 카테고리가 있습니다.

sidebar-blog:
  - title: "Python"
    url: "/categories/python"

만약 두 개의 카테고리를 만들고 싶다면 밑의 코드처럼 수정하시면 됩니다.

sidebar-blog:
  - title: "Python"
    url: "/categories/python"
  - title: "Category2"
    url: "/categories/category2"

여기서 중요한 부분은 title 과 url 부분입니다.

title 은 category-{}.md 내의 카테고리의 이름이 일치하는지 보는 조건문의 조건으로 사용되며, url 은 header 부분의 permalink 와 일치시켜줘야 합니다.

밑에 category-{}.md 에 대한 코드 예시를 보겠습니다.

이 코드는 Python 카테고리에 대한 내용으로 참고용으로 수정하실 부분은 수정하셔서 사용하셔도 되며 그대로 사용하셔도 됩니다!

---
layout: archive
title: "Posts by Python"
permalink: /categories/python
author_profile: true
toc: true
---
{% for category in site.categories %}
  {% if category[0] == "Python" %}
    {% for post in category[1] %}
      {% include archive-single.html type=list %}
    {% endfor %}
  {% endif %}  
{% endfor %}
  • layout 은 archive
  • title 은 원하시는 페이지의 제목을 적고
  • permalink 는 카테고리에 맞는 url 을 넣어주시면 됩니다.
  • author_profile, toc 은 사용한다면 true를 넣어주시면 됩니다.
  • {% if category[0] == {Title} %}의 {Title} 부분에 알맞는 navigation.yml 의 title 값을 넣어주시면 됩니다.

여기까지 따라오셨다면 기본적인 Posting을 위한 준비가 다 되었습니다. 이제 _posts 폴더에 카테고리명에 맞춰 폴더를 생성하고 .md 형식의 포스트들을 작성하시면 됩니다!

설명이 명료하지 않아 이해하기 어려울 수 있지만 읽어주셔서 감사합니다!
이해가 어려우시다면 제 Github에서 이 레파지토리를 포크하셔서 사용하셔도 괜찮습니다!

카테고리:

업데이트:

댓글남기기

참고