[blog] sidebar 만들기

오늘은 블로그에 다음과 같이 sidebar를 추가해보도록 하겠습니다.

❗ 해당글은 jekyll minimal-mistakes를 기준으로 작성됐습니다.

1. categories 등록

sidebar 클릭시 해당 메뉴 이름과 같은 catergory인 글 목록만 나타나는 기능을 구현 하려면 먼저 게시물의 categories 속성값을 넣어주셔야 합니다. 아래처럼 직접 게시글 파일의 front matter에 지정해주셔도 되고

아예 디렉토리에 카테고리 이름으로 폴더를 만들어 자동으로 카테고리로 만들 수도 있습니다.

이경우엔 카테고리 폴더에 posts 폴더를 또 만들고 그안에 게시글을 올리면 됩니다.

2. navigation.yml 수정

이제 sidebar를 만들 건데요. data 폴더의 navigation.yml 파일에 새로운 key 값을 추가하고 그 아래 title엔 메뉴명을 url엔 permalinnk값이 될 값을 넣어줍니다. 만약 메뉴안에 하위 메뉴를 넣고 싶다면 title: 메뉴명 아래 Childeren: 속성을 사용해주세요.

sidebar-list:
  - title: Programming
    children:
      - title: "Install"
        url: /install/
      - title: "Java"
        url: /java/
      - title: "JS"
        url: /js/
      - title: "DB"
        url: /db/
      - title: "React"
        url: /react/
      - title: "FrontEnd"
        url: /frontend/
      - title: "Error"
        url: /error/
      - title: "Git"
        url: /git/

  - title: "Blog"
    url: /blog/

  - title: "ETC"
    url: /etc/


  - title: Project
    children:
      - title: "shoppingMall"
        url: https://bellasimi.github.io/shoppingMall/

❗ 주의점

1. depth를 명확히 해주세요. key, title, url, childeren 속성을 전부 같은 깊이에 쓰면 인식 못해요.

2. title 값은 ““안에 써주시되 Children속성 위 title은 ““없이 써주세요.

3. url엔 “” 붙이지 않습니다. 사이트 연결시 사이트 주소를 url에 넣어주세요.

4. main key 데이터 아래에 작성해주세요. main key에 입력한 값은 우측상단 nav입니다. 삭제하거나 주석처리하시면 nav가 사라져요!

3. sidebar 등록

sidebar를 블로그에 항상 나오게 하려면 config.yml파일을 바꿔주시면 됩니다. defaults 키 값에 아래 값을 추가해주세요.

# Defaults
defaults:
  # main
  - scope:
      path: ""
    values:
      author_profile: true
      sidebar: 
        nav: "sidebar-list"

sidebar의 nav값엔 아까 navigation.yml에서 작성한 sidebar의 key값을 넣습니다.

❗ 주의점

author_prof1ile이 true여야 sidebar가 나옵니다! false면 sidebar 속성값이 있어도 안나오니 주의해주세요.

4. page 만들고 permalink 부여

pages 폴더에 가서 sidebar 메뉴 클릭시 나올 페이지를 만들어 줍니다. 전 /java/라는 url접속시 archive 레이아웃 html이 뜨고 해당 페이지에 title로 Java가 나오는 category-java.md를 만들었습니다.

assign posts = site.categories.java 카테고리가 java인 post들을 posts에 할당하고, 해당 카테고리의 post들을 entries_layout을 써서 리스트로 출력합니다.

끝

모든 파일을 push한 뒤 sidebar의 java메뉴를 클릭하면 java 카테고리만 모아둔 category-java페이지가 /java/ url로 잘뜨는 것을 볼 수 있습니다.

이런식으로 다른 sidebar의 페이지를 만들면 블로그 sidebar 기능 완성입니다.

참고

🖥 minimal-mistakes menual

🖥 jekyll 같은 카테고리만 모아두는 페이지 생성

🖥 gitpage 블로그 만들기