[Minimal mistakes, Github 블로그] breadcrumbs 설정

 

오늘은 블로그에 breadcrumbs를 적용하는 법과 글씨 크기를 변경하는 법을 포스팅 하려고 합니다! breadcrumbs는 아래와 같이 포스팅의 맨 위에 경로를 알려주는 효과에요.

제가 적용해보려고 찾아봤는데 내용이 별로 없더라구요 ㅜㅜ 그래서 혹여 저처럼 어려움을 겪는 사람이 있을 까 포스팅 해봅시당.

 

🧮 breadcrumbs 적용법

---

우선 📑_config.yml에 들어가줍니다. 거의 상단에 아래 코드와 같이 # Site Settings란이 있을 거에요.

# Site Settings
locale                   : "ko-KR"
title                    : "데이터를 파고파는 사람 ⛏️"
title_separator          : "-"
subtitle                 : # site tagline that appears below site title in masthead
name                     : "Data Ripper 👻"
description              : "통계를 파보자"
url                      : "https://novicedata.github.io"
baseurl                  : # the subpath of your site, e.g. "/blog"
repository               : "scrap-comment"
teaser                   : # path of fallback teaser image, e.g. "/assets/images/500x300.png"
logo                     : # path of logo image to display in the masthead, e.g. "/assets/images/88x88.png"
masthead_title           : # overrides the website title displayed in the masthead, use " " for no title
# breadcrumbs            : false # true, false (default)
words_per_minute         : 200

중간에 보시면 # breadcrumbs가 있습니다! 이걸 아래 코드와 같이 true로 바꿔주면 끝! 간단하죠?

breadcrumbs              : true # true, false (default)

 

🔄 폰트 크기 변경법

---

저 같은 경우 다른 글씨에 비해 breadcrumbs의 글씨 크기만 작아서 좀 이상하더라구요. 그래서 변경하려고 합니다.

📑_sass/minimal-mistakes/_navigation.scss로 가줍니다! 그럼 제 파일 기준으로 25번째 줄 근처에 아래와 같은 코드가 있습니다.

  ol {
    padding: 0;
    list-style: none;
    font-size: $type-size-6;

여기서 font-size를 건들여주면 됩니다. 저는 좀더 크게 하고싶어서 크기를 키우는데 기본 설정으로 type-size-6은 0.75em 입니다. 그래서 1em인 type-size-5로 변경합니다.

  ol {
    padding: 0;
    list-style: none;
    font-size: $type-size-5;

간단하죠??

이상 breadcrumbs 적용법이었습니다! ☠️