Hugo에 Main menu 추가하기

Hugo로 옮긴 후 아직 찾지 못한 기능 중 하나가 글 들을 종류 별로 구분해서 보는 것이었다. 각 글마다 지정한 category나 tag별로 볼 수 있는 것은 지금 사용하는 mainroad theme에서도 지원하는데 예전에 wordpress에서 많이 사용하던, post, page 등 성격 별로 다른 글들을 볼 수 있는 방법이 아쉬웠다.

하지만 hugo의 다른 theme 을 사용하는 다른 사이트에서도 유사한 기능을 사용하는 것이 보였고, 심지어 mainroad theme을 사용하는 다른 사이트에서도 같은 기능을 사용한는 것이 보였다.

다만 이걸 어떻게 불러야 하는 지를 몰라 관련 정보를 찾는 것이 쉽지 않았는데 처음 hugo를 설치하려고 여기저기 정보를 찾던 때 봤던 내용이 우연히 기억이 나서 그걸 적용해 보니 짜잔 하고 이렇게 내가 원하던 기능을 사용할 수 있게 되었다.

우선 이건 설정을 하기 전에 blog 화면. 블로그 제목 아래 바로 글들이 표시된다.

이제 설정을 변경한 후. 블로그 제목 아래 POST와 PAGE라는 메뉴가 보인다.

이제 PAGE 메뉴를 누르면 아래와 같이 몇 개 글만 나온다.

이 글들은 content 디렉토리 아래 page 디렉토리에 있는 글들이다. 예전에 wordpress에서 사용하던 패턴(?)인데 post는 특정 날에 있었던 어떤 일을 기록하는 데 사용하고, page는 날짜 보다는 특정 주제에 대해 적는 용도로 사용했다. 내 경우 주로 읽은 책 목록을 기록하거나, 다른 page 글과 같이 주로 오랜 시간을 두고 있었던 내용을 적는 용도로 사용했다.

이렇게 메뉴를 구분하기 위해 config.toml 파일에 추가한 내용은 다음과 같다.

[[menu.main]]
  name = "Post"
  url = "/post"
  weigth = 1

[[menu.main]]
  name = "Page"
  url = "/page"
  weigth = 2

위 내용만 있어도 기본적으로 화면에 메뉴는 표시가 되는데, 이미 기존 post 아래 글을 모아둔 것이 있으니 Post 메뉴는 제대로 동작하겠지만, page 디렉토리 아래에는 글이 없어 아무것도 표시가 되지 않았다. 그래서 우선 content/page 디렉토리를 만들고, 예전 wordpress에서 page에 해당하는 글들을 이 위치에 복사했다.

cychong15:sosa0sa cychong$ tree -d -L 1 content/
content/
├── page
└── post

2 directories
cychong15:sosa0sa cychong$ tree -f -L 2 content/
content
├── content/_index.md
├── content/archives.md
├── content/page
│   ├── content/page/_index.md
│   ├── content/page/apple.md
│   ├── content/page/books.md
│   └── content/page/designholic.md
└── content/post
    ├── content/post/2003
    ├── content/post/2004
    ├── content/post/2005
    ├── content/post/2006
    ├── content/post/2007
    ├── content/post/2008
    ├── content/post/2009
    ├── content/post/2010
    ├── content/post/2011
    ├── content/post/2012
    ├── content/post/2013
    ├── content/post/2014
    ├── content/post/2015
    ├── content/post/2016
    ├── content/post/2017
    ├── content/post/2018
    ├── content/post/2019
    └── content/post/2020

20 directories, 6 files