Hugo 정적웹사이트 생성기에 탐색경로 기능 추가

1. 기본 환경

  1. hugo extended
  2. simple-frame theme

2. 단계별 설치 및 설정

2.1. 탐색경로 부분 템플릿 생성

####### layouts/partials/breadcrumbs.html

{{ if not .IsHome }}
<nav class="breadcrumbs" aria-label="breadcrumb" style="font-size: 0.9rem; margin-bottom: 1rem; color: #666;">
  <a href="/">Home</a>
  
  {{ $url := "" }}
  {{ range (split .RelPermalink "/") }}
    {{ if ne . "" }}
      {{ $.Scratch.Add "path" (printf "/%s" .) }}
      {{ $url = $.Scratch.Get "path" }}
      
      {{ if ne . "posts" }} <span style="margin: 0 5px;">&gt;</span>
        <a href="{{ $url | relURL }}">{{ . | humanize }}</a>
      {{ end }}
    {{ end }}
  {{ end }}
</nav>
{{ end }}

2.2. 테마 레이아웃에 코드 삽입

####### themes/simple-frame/layouts/_default/single.html 의 헤더와 h1 사이에 삽입

{{ partial "breadcrumbs.html" . }}

2.3. CSS 생성

####### assets/css/custom.css

/* 탐색경로 표시 */
nav.breadcrumbs {
  margin-bottom: 0.5rem !important;
}

.breadcrumbs {
    display: flex;
    list-style: none;
    padding: 0;
    font-family: inherit; /* 테마 폰트 유지 */
}

.breadcrumbs a {
    text-decoration: none;
    color: var(--primary-color, #007bff); /* 테마의 기본 강조색 활용 */
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

【참고자료】