Blowfish 테마: 메뉴 설정 가이드 (Main, Footer, Dropdown)

방문자가 내 블로그의 콘텐츠를 쉽게 탐색하도록 돕는 가장 중요한 요소는 바로 ‘메뉴’입니다. Blowfish 테마는 사이트 상단의 메인 메뉴(main)와 하단의 푸터 메뉴(footer), 그리고 드롭다운 형태의 서브메뉴까지 유연하게 지원합니다.

오늘은 이 모든 종류의 메뉴를 설정하는 방법을 알아 보겠습니다.

메뉴 설정의 핵심 파일: menus.xx.toml

#

Blowfish의 모든 메뉴는 config/_default/ 폴더 안에 있는 menus.xx.toml 파일 하나로 관리됩니다.

• 파일 위치: config/_default/menus.en.toml (기본 설치 시)
• 한국어 설정: 만약 블로그의 주 언어가 한국어이고 다중어 설정이 필요하다면, 이 파일의 이름을 menus.ko.toml로 변경하여 사용하는 것이 좋습니다. 이렇게 하면 다국어 설정 시 언어별로 다른 메뉴를 구성할 수 있습니다.

이 파일 안에는 크게 [[main]] (메인 메뉴)과 [[footer]] (푸터 메뉴) 두 종류의 메뉴 아이템을 정의할 수 있습니다.

기본 메뉴 아이템 추가하기 (내부 페이지 링크)

#

가장 기본적인 메뉴 설정은 블로그의 특정 섹션(예: 글 목록)으로 연결하는 것입니다.

menus.en.toml 파일을 열고 아래와 같이 작성합니다.

# config/_default/menus.en.toml

# -- Main Menu --
# 사이트 헤더 상단에 표시되는 메인 메뉴

[[main]]
  # 메뉴에 표시될 이름
  name = "Blog"

  # Hugo 콘텐츠 섹션과 연결합니다.
  # 'content/posts' 폴더를 가리키며, URL이 변경되어도 깨지지 않는 가장 안정적인 방식입니다.
  pageRef = "posts"
  
  # 메뉴의 순서를 결정합니다. 숫자가 낮을수록 왼쪽에 표시됩니다.
  weight = 10

[[main]]
  name = "Categories"
  pageRef = "categories"
  weight = 20

• name: 방문자에게 보여질 메뉴의 이름입니다.
• pageRef: content/ 폴더 안의 특정 폴더(섹션)나 파일을 가리킵니다. 예를 들어 posts는 /posts/ 페이지로 연결됩니다.
• weight: 메뉴의 순서를 정합니다. 숫자가 낮을수록 우선순위가 높습니다.

외부 링크와 아이콘 추가하기

#

내 GitHub나 다른 웹사이트로 연결되는 메뉴도 쉽게 추가할 수 있습니다.

[[main]]
  name = "GitHub"

  # 외부 URL을 직접 지정합니다. pageRef와 함께 사용할 수 없습니다.
  url = "https://github.com/your-id"

  weight = 30

  # 이름 앞에 아이콘을 추가합니다.
  # Blowfish는 'github', 'twitter' 등 몇 가지 아이콘을 내장하고 있습니다.
  pre = "github"

• url: 외부 링크를 걸 때 사용합니다.
• pre: 메뉴 이름 앞에 표시될 내용을 지정합니다. Blowfish는 몇 가지 소셜 아이콘 키워드를 지원하여, 위와 같이 설정하면 이름 앞에 GitHub 아이콘이 자동으로 나타납니다.

드롭다운 서브메뉴 만들기

#

관련 페이지들을 묶어 드롭다운 메뉴로 만들 수 있습니다. 이를 위해서는 identifier와 parent라는 두 가지 파라미터가 필요합니다.

# 1. 부모 메뉴 아이템을 먼저 정의합니다.
# 이 아이템은 드롭다운의 제목 역할을 하며, 보통 링크는 없습니다.
[[main]]
  name = "더 보기"
  # 이 메뉴의 고유 ID를 지정합니다. 자식 메뉴들이 이 ID를 참조합니다.
  identifier = "more"
  weight = 40

# 2. 첫 번째 자식 메뉴를 정의합니다.
[[main]]
  name = "About"
  pageRef = "about"   # content/about.md 페이지로 연결
  # 부모 메뉴의 identifier를 'parent'로 지정합니다.
  parent = "more"
  weight = 10         # 서브메뉴 안에서의 순서

# 3. 두 번째 자식 메뉴를 정의합니다.
[[main]]
  name = "저자 소개"
  pageRef = "authors" # content/authors/ 섹션으로 연결
  parent = "more"
  weight = 20

• identifier: 부모가 될 메뉴 아이템에 부여하는 고유한 이름표입니다.
• parent: 자식 메뉴가 어떤 부모 메뉴 아래에 속할지를 identifier 값으로 지정합니다.

푸터(Footer) 메뉴 설정하기

#

사이트 하단에 표시되는 푸터 메뉴는 메인 메뉴와 설정 방식이 완전히 동일합니다. [[main]] 대신 [[footer]] 블록을 사용하기만 하면 됩니다.

# -- Footer Menu --
# 사이트 하단에 표시되는 메뉴

[[footer]]
  name = "개인정보처리방침"
  pageRef = "privacy"
  weight = 10

마무리하며

#

지금까지 Hugo Blowfish 테마에서 메뉴를 설정하는 모든 방법을 알아보았습니다. menus.en.toml 파일 하나만 잘 이해하면, 블로그의 내비게이션을 원하는 대로 자유롭게 구성할 수 있습니다.

• 내부 링크는 pageRef
• 외부 링크는 url
• 순서는 weight
• 드롭다운은 identifier와 parent

이 네 가지 핵심 규칙만 기억하시면 됩니다. 이제 여러분의 블로그에 방문자들이 길을 잃지 않도록 튼튼한 이정표를 세워보세요.