[Blog] 카테고리와 목차 추가하기(상단 바, 사이드 바)

웹 상단의 네비게이션 바, 왼쪽 사이드 바, 해당 카테고리를 들어가면 나와야 하는 대표 페이지, 목차TOC 를 추가하는 법을 알아보자.

미리보기

웹 상단에 존재하는 네비게이션 바의 Category

카테고리별 존재하는 대표 페이지

왼쪽 사이드 바의 카테고리

본문 내에 존재하는 목차(TOC)

카테고리와 목차

위에서 본 사진들은 최근 사진이므로 스타일링이 전부 적용된 상태입니다!

자꾸 ruby 문법이 자동 실행이 돼버려서 “ruby 코드는 사진으로 대체”

찐 참고문헌 이 분이 정말 잘 정리하셨다! 참고하자~~

웹 상단 “Category” 추가와 태그

먼저, _config.yml 에서 아래 코드처럼 주석 해제를 해주며 잘 있는지 확인하자

category_archive:
  type: liquid
  path: /categories/
tag_archive:
  type: liquid
  path: /tags/
# https://github.com/jekyll/jekyll-archives
jekyll-archives:
  enabled:
    - categories
    - tags
  layouts:
    category: archive-taxonomy
    tag: archive-taxonomy
  permalinks:
    category: /categories/:name/
    tag: /tags/:name/

_pages 폴더에 category-archive.md 와 tag-archive.md 파일을 만들자

---
title : "Category"
layout : categories
permalink : /categories/
author_profile : true
sidebar_main : true
---

---
title : "Tag"
layout : tags
permalink : /tags/
author_profile : true
sidebar_main : true
---

_data 폴더에 navigation.yml 파일을 아래 코드처럼 작성하면 “웹 상단 네비게이션 바”에 Category 생성

# main links
main:
  - title: "Home"
    url: /
  - title: "Category" # Tag도 추가해도 됨
    url: /categories/
  - title: "Search"
    url: /search/

여기 까지 성공하면 앞에서 보여준 이 부분이 끝난 것이다.

웹 상단에 존재하는 네비게이션 바의 Category

카테고리별 대표 페이지 추가

먼저 아래와 같이 카테고리를 등록해줍니다! -> 예시로 _pages/categories/category-algo.md

코드 내용은 아래와 같습니다

• archive 를 레이아웃으로 가지며 include를 보면 archive-single2.html 이 존재하는데, 이것은 직접 추가한 파일입니다.
• 이곳의 title 은 실제 대표 페이지의 제목이 됩니다.
  • 앞에서 본 “지식/정보” 제목 부분입니다.

_includes/archive-single2.html 의 코드는 아래와 같으며 없으면 만듭니다.

• “[체크리스트] Sprin…“ 부분인 대표 페이지 본문에 게시글 리스트의 각 제목 부분 역할을 합니다.
• 코드에 보면 post__taxonomy.html 부분이 있는데 이것도 추가한 파일입니다.
  • “[체크리스트] Spr…” 오른쪽에 있는 카테고리, 태그 부분입니다.

방금 언급한 _includes/post__taxonomy.html 의 코드입니다. 자유롭게 커스텀하면 됩니다.

여기까지가 아래 사진 부분이다.

카테고리별 존재하는 대표 페이지와 본문에 존재하는 각 게시물 제목, 날짜, 태그정보

왼쪽 사이드 바에 카테고리 추가

_includes/nav_list_main 파일을 만들어서 왼쪽 사이드바의 모습을 구성합니다.

• 확장자명 없습니다!
• 이를 sidebar.html 에 포함시키면 됩니다!

_includes/nav_list_main 의 코드를 참고하여 커스텀! 코드는 쉬워서 해석하기 간단할 거다!

sidebar.html 의 코드 - 핵심은 nav_list_main 를 include 하는 코드!

마지막으로 _config.yml 과 index.html 에 sidebar_main: true 로 설정되어있나 확인 필수!

이번 커스텀은 아래 사진처럼 왼쪽 사이드바를 의미!

왼쪽 사이드바의 카테고리

목차(TOC) 설정

정말 정말 간단하다!! 포스팅하는 md파일속에 toc: true 를 사용하면 끝이다.

아래에 설명할 “TIP) md파일 포스팅할 때(YFM 설정) + 카테고리 추가하는 흐름” 부분을 참고하자!

본문 내에 존재하는 목차(TOC)

추가로 TOC 이름 설정하는 방법은 _data/ui-text.yml 를 수정한다.

• toc_label : "목차"
• recent_posts : "Recent Posts"

• 참고로 Korean 언어 부분에서 수정해줘야 한다.

• 각국 언어별로 어떤 텍스트로 표시되는지를 나열한 문서이다. Minimal Mistakes의 TOC 라벨은 기본적으로 “On this page”로 나타나는데 “목차”로 수정해보았다.

TIP) md파일 포스팅할 때(YFM 설정) + 카테고리 추가하는 흐름

본인이 --- ... --- 에 설정하는 코드는?? 아래 참고 -> 게시물 설정 YFM(YAML Front Matter) 를 의미

• title 을 통해 제목!
• categories 를 통해 카테고리별 대표 페이지 만들었던 md 파일에서의 site.categories.Blog 의 Blog 작성
• tag 를 여러 가지 작성하여 “search” 가 잘 되게끔
• toc 를 true로 하여 “목차”를 사용
• toc_stiky 를 true로 하여 “목차고정”을 사용 -> 마우스 휠 위아래 움직여도 목차 위치 고정
• author_profile 을 false로 하여 기존 프로필을 가리고, sidebar-nav-“docs” 를 활성화하여 나타냅니다.
  • _data/navigation.yml 에 따로 등록해놨으며 이 내용은 다음 포스팅에서 추가 설명합니다.
• typora-root-url 로 root 경로를 설정하여 이미지 경로를 상대경로로 잘 맞춰 둡니다.

---
title:  "[Blog] 페이지 화면 커스텀(크기, 너비, 밑줄 등)"
categories : Blog
tag : [블로그, Git, git blog, 깃허브 블로그, Minimal-mistakes, 지킬, jekyll]
toc: true
toc_sticky: true
author_profile: false
sidebar:
  nav: "docs"
typora-root-url: ../../..
---

카테고리를 추가할 때 흐름은 카테고리별 대표 페이지 생성(md파일) -> nav_list_main 에 추가 -> 실제 포스팅할 때 categories:카테고리명 입력

Blog라는 카테고리를 예로 들면??

1. 먼저, _pages/categories/category-blog.md 파일을 만들고 카테고리 명을 Blog로 설정합니다.

1. 그리고 _includes/nav_list_main 에서 해당 카테고리를 적절히 추가합니다.

1. 마지막으로 포스팅할 때 이 카테고리를 사용합니다.

---
...
categories : Blog
...
---