GitHub 블로그 메뉴 구성하기

Updated: April 19, 2019

이 글은 GitHub Pages 블로그 따라하기 시리즈의 여덟번째 글로 지킬 블로그의 메뉴 구성을 해볼 것이다. 이전 글에서 “About” 페이지를 생성하였다. 하지만 이 주소를 직접 치고 들어가는 방법 외에 현재 블로그 내의 링크가 없는 상황이다.

이런 경우를 위해 보통 블로그에서는 상단 메뉴바(혹은 메인 메뉴라 부르는)가 존재한다. 메뉴바는 방문자들로 하여금 블로그를 쉽게 들러볼 수 있게 메뉴 하이퍼링크의 집합이다.

이번 글에서는 블로그의 메뉴바를 구성하는 방법을 알아보자.

1. 메뉴 등록 하기

commit e0fd279에 기존에 있던 메뉴 구성을 삭제하고 새로 “블로그 방문하기”와 “About” 메뉴를 구성하였다

_data/navigation.yml 파일에 아래와같은 내용으로 등록하였다.

# main links
main:
  - title: "블로그 방문하기"
    url: https://devinlife.com/
  - title: "About"
    url: /about/

파일 내용을 보면 대략 감이 올 것이다. navigation.yml 파일에는 상단 메뉴바를 구성하는 설정이 들어있다. 메뉴 하이퍼링크 모음으로 title은 메뉴에 표시될 텍스트이고, url 항목은 메뉴가 연결될 링크 주소이다.

링크 주소는 http와 같이 외부 주소도 가능하며, /about/과 같이 블로그 내의 permlink도 가능하다. 이전 글에서 “About” 페이지에 대한 permalink를 생성해두었기 때문에 이제 상단 메뉴의 “About”을 클릭하면 해당 글로 이동할 것이다.