Hugo 블로그 만들기 (3) - Taxonomies로 태그/카테고리 페이지 커스터마이징

<!-- layouts/_partials/docs/post-item.html -->

<article class="post-item">

  <div class="post-meta">
    <!-- 게시글 작성일 -->
    <time datetime="{{ .Date.Format "2006-01-02" }}">
      {{ .Date.Format "2006년 01월 02일" }}
    </time>
    <!-- 카테고리 목록이 추가될 위치 -->
  </div>

  <div class="post-content-area{{ if .Params.cover }} has-cover{{ end }}">
    <div class="post-text-area">
      <!-- 게시글 제목 -->
      <h2 class="post-title">
        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
      </h2>

      <!-- 게시글 요약 -->
      {{ $summary := cond .Description .Description (cond .Summary .Summary "") }}
      {{ if $summary }}
      <div class="post-summary">
        {{ $summary | plainify | truncate 148 }}
      </div>
      <div class="post-summary-mobile">
        {{ $summary | plainify | truncate 72 }}
      </div>
      {{ end }}

      <!-- 태그 목록이 추가될 위치 -->
    </div>

    <!-- 커버 이미지 -->
    {{ if .Params.cover }}
    <div class="post-cover">
      <img src="{{ .Params.cover | absURL }}" alt="Cover Image" class="post-cover-img">
    </div>
    {{ end }}
  </div>

</article>

// assets/_custom.scss

.post-item {
  // `post-item` 영역을 명확하게 구분하기 위해 테두리를 추가
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: $padding-24;
  background: var(--body-background);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;

  &:hover {
    // `post-item` 영역에 마우스를 올리면 테두리를 링크 색상(파란색)으로 변경
    box-shadow: 0 4px 12px var(--box-shadow);
    border-color: var(--color-link);
  }
}

.post-meta {
  // `post-meta` 영역 내 항목(작성일 및 카테고리)을 정렬하고 연한 글씨색 적용
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--gray-500);
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 0.9rem;

  time {
    font-weight: 500;
  }
}

.post-content-area {
  // `post-content-area` 영역 내 항목(제목, 요약 텍스트 및 커버 이미지)을 정렬
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;

  &.has-cover .post-text-area {
    // 게시글이 커버 이미지를 가질 경우 텍스트 영역의 세로 길이를 이미지 높이만큼 고정
    // (태그 목록을 영역 하단에 고정시키기 위한 목적)
    min-height: $preview-height; // 170px;
  }
}

.post-text-area {
  // 제목 텍스트, 요약 텍스트, 태그 목록 요소들을 정렬
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;

  h2.post-title {
    margin-top: 0;
    margin-bottom: $padding-8;
    line-height: 1.4;
  }
}

.post-title {
  // 제목 텍스트의 스타일을 적용
  font-size: $font-size-24;
  line-height: 1.3;

  a {
    color: var(--body-font-color);
    text-decoration: none;
    transition: color 0.3s ease;

    &:hover {
      color: var(--color-link);
    }
  }
}

.markdown .post-title {
  // 마크다운 H2 헤더에 기본으로 적용되는 마진을 무시 (여백 줄이기)
  margin-top: $padding-20;
}

.post-summary, .post-summary-mobile {
  // 요약 텍스트의 스타일을 적용
  color: var(--gray-800);
  line-height: 1.6;
  margin-bottom: 1rem;
  overflow: hidden;
  word-wrap: break-word;
  flex: 1;
}

.post-summary-mobile {
  // 기본적으로는 모바일 전용 요약 텍스트를 숨기기
  display: none;
}

.post-cover {
  // 커버 이미지의 가로, 세로 길이를 고정
  width: $preview-width; // 200px;
  height: $preview-height; // 170px;
  border-radius: 8px;
  overflow: hidden;

  .post-cover-img {
    // 커버 이미지가 고정된 길이를 넘으면 가운데만 잘라서 표시하기
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: $body-max-width) {
  .post-title {
    font-size: $font-size-20; // 모바일 사이즈에서 제목 텍스트 크기를 줄이기
  }

  .post-summary {
    display: none; // 모바일 사이즈에서 기본 요약 텍스트를 숨기기
  }

  .post-summary-mobile {
    display: block; // 모바일 사이즈에서 모바일 전용 요약 텍스트를 표시하기
  }

  .post-content-area.has-cover {
    // 모바일 사이즈에서 커버 이미지 크기를 줄이고 정사각형 비율로 변경
    .post-cover {
      width: $preview-mobile-width; // 160px;
      height: $preview-mobile-height; // 160px;
    }

    .post-text-area {
      min-height: $preview-mobile-height; // 160px;
    }
  }
}

<!-- layouts/_partials/docs/pagination.html -->

{{ $paginate := . }}
{{ if gt $paginate.TotalPages 1 }}
<div id="pagination-anchor"></div>
<nav class="pagination">
  {{ $currentPage := $paginate.PageNumber }}
  {{ $totalPages := $paginate.TotalPages }}

  <!-- 10개 게시글 단위로 페이지를 그룹화 -->
  {{ $groupNumber := div (sub $currentPage 1) 10 }}
  {{ $groupStart := add (mul $groupNumber 10) 1 }}
  {{ $groupEnd := add $groupStart 9 }}
  {{ if gt $groupEnd $totalPages }}
    {{ $groupEnd = $totalPages }}
  {{ end }}

  <!-- 이전 및 다음 페이지 그룹을 계산 -->
  {{ $prevGroupPage := sub $groupStart 10 }}
  {{ $nextGroupPage := add $groupEnd 1 }}

  <!-- 이전 페이지 그룹으로 이동하는 링크 -->
  {{ if gt $groupStart 1 }}
  <a href="{{ $paginate.First.URL }}{{ if gt $prevGroupPage 1 }}page/{{ $prevGroupPage }}/{{ end }}#pagination-anchor" class="pagination-nav pagination-link">
    <i class="fa-solid fa-backward"></i> 이전
  </a>
  {{ else }}
  <span class="pagination-nav disabled">
    <i class="fa-solid fa-backward"></i> 이전
  </span>
  {{ end }}

  <!-- 현재 페이지 그룹의 페이지로 이동하는 링크 -->
  <div class="pagination-pages">
    {{ range $i := seq $groupStart $groupEnd }}
      {{ if eq $i $currentPage }}
      <span class="pagination-page current" id="current-page">{{ $i }}</span>
      {{ else }}
      <a href="{{ $paginate.First.URL }}{{ if gt $i 1 }}page/{{ $i }}/{{ end }}#pagination-anchor" class="pagination-page pagination-link">
        {{ $i }}
      </a>
      {{ end }}
    {{ end }}
  </div>

  <!-- 다음 페이지 그룹으로 이동하는 링크 -->
  {{ if le $nextGroupPage $totalPages }}
  <a href="{{ $paginate.First.URL }}page/{{ $nextGroupPage }}/#pagination-anchor" class="pagination-nav pagination-link">
    다음 <i class="fa-solid fa-forward"></i>
  </a>
  {{ else }}
  <span class="pagination-nav disabled">
    다음 <i class="fa-solid fa-forward"></i>
  </span>
  {{ end }}

</nav>
{{ end }}

// assets/_custom.scss

.pagination {
  // 이전 버튼, 페이지 링크, 다음 버튼을 정렬
  display: flex;
  justify-content: center;
  align-items: center;
  gap: $padding-4;

  padding: 2rem 0;
  margin-top: 2rem;
  border-top: 1px solid var(--gray-200);
  max-width: 100%;

  .pagination-nav, .pagination-page {
    // 각각의 페이지 링크에 대한 스타일을 적용
    // (페이지 번호를 모서리가 둥근 사각형 테두리로 감싸기)
    padding: $padding-8;
    border: 1px solid var(--gray-200);
    border-radius: 4px;

    flex-grow: 0;
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;

    &:hover {
      background: var(--gray-200);
      border-color: var(--color-link);
    }
  }
}

.markdown {
  // 마크다운 a 태그에 기본으로 적용되는 색상을 무시
  a[href].pagination-link {
    color: var(--body-font-color);
    text-decoration: none;
  }

  a[href]:hover.pagination-link {
    color: var(--body-font-color);
    text-decoration: none;
  }

  a[href]:visited.pagination-link {
    color: var(--body-font-color);
    text-decoration: none;
  }
}

.pagination-nav {
  width: 4rem;

  &.disabled {
    // 이전, 다음 페이지 그룹이 없으면 버튼을 비활성화
    border: 1px solid var(--gray-200);
    color: var(--gray-500);
    cursor: not-allowed;
  }

  i {
    // 이전, 다음 버튼의 아이콘 크기 설정
    font-size: $font-size-12;
  }
}

.pagination-pages {
  // 페이지 링크들을 정렬
  display: flex;
  gap: $padding-4;

  .pagination-page {
    min-width: 2.5rem;

    &.current {
      // 현재 페이지에 대한 링크를 강조
      background: var(--color-page-link);
      border-color: var(--color-link);
      cursor: default;
    }
  }
}

#pagination-anchor {
  // 페이지 이동 후 스크롤을 유지하기 위한 앵커 요소 숨기기
  position: relative;
  top: -100px;
  visibility: hidden;
}

@media (max-width: $body-max-width) {
  // 모바일 사이즈에서는 이전, 다음 버튼을 페이지 링크 아래로 배치
  .pagination {
    flex-wrap: wrap;
    gap: $padding-8;
  }

  .pagination-pages {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .pagination-nav {
    order: 2;
  }
}

<!-- layouts/tags/list.html -->

{{ define "main" }}
<article class="markdown book-article">
  <div class="list-header">
    <h1><i class="fa-solid fa-tag"></i> {{ .Title }}</h1>
    <p>전체 글 <em class="list-count">{{ len .Pages }}</em></p>
  </div>

  {{ $paginator := .Paginate .Pages 10 }}

  <div class="post-list">
    {{ range $paginator.Pages }}
      {{ partial "docs/post-item.html" . }}
    {{ end }}
  </div>

  {{ partial "docs/pagination.html" $paginator }}
</article>
{{ end }}

// assets/_custom.scss

.list-header {
  // 헤더 영역의 요소들을 가운데 정렬
  text-align: center;
  padding-bottom: $padding-16;
  margin-bottom: $padding-48;
  border-bottom: 1px solid var(--body-font-color);

  h1 {
    font-size: $font-size-40;
    margin-bottom: $padding-8;

    i {
      font-size: $font-size-40;
    }
  }

  p {
    font-size: $font-size-20;
  }
}

.list-count {
  // 관련 게시글 수를 파란색으로 강조 표현
  font-style: normal;
  font-weight: bold;
  color: var(--color-link);
}

.post-list {
  // 게시글 목록 간의 간격을 조절하고 footer와의 여백도 추가
  display: flex;
  flex-direction: column;
  gap: $padding-24;
  margin-bottom: $padding-48;
}

<!-- layouts/tags/terms.html -->

{{ define "main" }}
<article class="markdown book-article">
  <div class="list-header">
    <h1><i class="fa-solid fa-tags"></i> Tags</h1>
    <p>전체 태그 <em class="list-count">{{ len .Data.Terms }}</em></p>
  </div>

  <div class="tag-chips">
    {{ range .Data.Terms.ByCount }}
    <div class="tag-item">
      <a href="{{ .Page.RelPermalink }}" class="tag-link">
        <span class="tag-name">{{ .Page.Title }}</span>
        <span class="tag-count">({{ .Count }})</span>
      </a>
    </div>
    {{ end }}
  </div>
</article>
{{ end }}

// assets/_custom.scss

.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: $padding-8;

  .tag-link {
    display: flex;
    align-items: center;
    gap: $padding-4;
    padding: $padding-8 $padding-12;

    .tag-name {
      font-weight: 500;
    }

    .tag-count {
      font-size: $font-size-12;
      opacity: 0.7;
    }
  }
}

<!-- layouts/categories/parent.html -->

{{ define "main" }}
<article class="markdown book-article">

  <!-- 제목을 부모 카테고리 명칭으로 인식 -->
  {{ $currentCategory := partial "categories/value-first" (slice .Title) }}
  {{ $pages := slice }}
  {{ $subCategories := slice }}

  <!-- 모든 "posts" 경로의 게시글들을 순회하면서 -->
  {{ range where .Site.RegularPages "Section" "posts" }}
    {{ $pageCategory := partial "categories/value-first" .Params.categories }}

    <!-- 게시글의 첫 번째 카테고리가 현재 부모 카테고리와 같으면 `$pages` 배열에 추가 -->
    {{ if eq $currentCategory $pageCategory }}
      {{ $pages = $pages | append . }}
      {{ $subCategory := partial "categories/value-second" .Params.categories }}
      <!-- 게시글의 두 번째 카테고리가 하위 카테고리 목록에 없으면 `$subCategories` 배열에 추가 -->
      {{ if not (in $subCategories $subCategory) }}
        {{ $subCategories = $subCategories | append $subCategory }}
      {{ end }}
    {{ end }}
  {{ end }}

  <div class="list-header">
    <h1><i class="fa-solid fa-folder"></i> {{ .Title }}</h1>
    <p>전체 글 <em class="list-count">{{ len $pages }}</em></p>
  </div>

  <!-- 모든 하위 카테고리들에 대한 바로가기 링크를 나열 -->
  {{ if $subCategories }}
  <div class="categories-section">
    <h2>하위 카테고리</h2>
    <div class="category-chips">
      {{ range $subCategory := $subCategories }}
      <div class="category-item">
        <a href="{{ "/categories/" | relURL }}{{ $currentCategory | urlize }}/{{ $subCategory | urlize }}" class="category-link">
          <span class="category-name"><i class="fa-solid fa-file"></i> {{ $subCategory }}</span>
        </a>
      </div>
      {{ end }}
    </div>
  </div>
  {{ end }}

  {{ if $pages }}
  <div class="post-list">
    {{ $paginate := .Paginate $pages 10 }}
    <div class="post-list">
      {{ range $paginate.Pages }}
        {{ partial "docs/post-item.html" . }}
      {{ end }}
    </div>

    {{ partial "docs/pagination.html" $paginate }}
  </div>
  {{ else }}
  <div class="post-list empty-list">
    <p>이 카테고리에 게시글이 없습니다.</p>
  </div>
  {{ end }}

</article>
{{ end }}

// assets/_custom.scss

.categories-section {
  margin-bottom: $padding-40;
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: $padding-8;

  .category-link {
    display: flex;
    align-items: center;
    gap: $padding-4;
    padding: $padding-8 $padding-12;

    .category-name {
      font-weight: 500;

      .fa-file, .fa-folder, .fa-folder-open {
        font-size: $font-size-base;
      }
    }
  }
}

.empty-list p {
  text-align: center;
}

<!-- layouts/_partials/categories/menu.html -->

{{ if .Site.Taxonomies.categories }}
<div class="book-categories">
  <input type="checkbox" class="hidden toggle" id="categories-control" checked />
  <label for="categories-control" class="categories-toggle categories-link">
    <!-- `전체` 카테고리 링크 -> 카테고리 terms 페이지로 연결 -->
    <a href="/categories/">
      <i class="fa-solid fa-folder"></i>
      <span>{{ default "Categories" .Site.Params.BookMenu.categoriesLabel }}</span>
      <span class="category-count">({{ len (where .Site.RegularPages "Section" "posts") }})</span>
    </a>
    <i class="fa-solid fa-chevron-down categories-arrow"></i>
  </label>

  <ul class="categories-menu" id="categories-menu">
    <!-- 부모-자식 카테고리 트리 구성 -->
    {{ $categoryTree := dict }}
    {{ range (where .Site.RegularPages "Section" "posts") }}
      {{ if .Params.categories }}
        {{ $parent := partial "categories/value-first" .Params.categories | string }}
        {{ if $parent }}
          <!-- 부모 카테고리 목록 구성 -->
          {{ if not (index $categoryTree $parent) }}
            {{ $categoryTree = $categoryTree | merge (dict $parent dict) }}
          {{ end }}

          {{ $child := partial "categories/value-second" .Params.categories | string }}
          {{ if $child }}
            <!-- 부모 카테고리에 대한 자식 카테고리 목록 구성 -->
            {{ $children := index $categoryTree $parent }}
            {{ if not (index $children $child) }}
              {{ $children = $children | merge (dict $child dict) }}
              {{ $categoryTree = $categoryTree | merge (dict $parent $children) }}
            {{ end }}
          {{ end }}
        {{ end }}
      {{ end }}
    {{ end }}

    {{ range $parent, $children := $categoryTree }}

    <!-- 부모 카테고리와 연관된 게시글 수를 카운팅 -->
    {{ $parentCount := 0 }}
    {{ range (where $.Site.RegularPages "Section" "posts") }}
      {{ if .Params.categories }}
        {{ if eq $parent (partial "categories/value-first" .Params.categories | string) }}
          {{ $parentCount = add $parentCount 1 }}
        {{ end }}
      {{ end }}
    {{ end }}

    <li>
      {{ if $children }}
      <input type="checkbox" class="hidden toggle" id="cat-{{ $parent | urlize }}" />
      <label for="cat-{{ $parent | urlize }}" class="categories-toggle categories-link">
        <a href="/categories/{{ $parent | urlize }}/">
          <i class="fa-solid fa-folder"></i>
          {{ $parent }}
          <span class="category-count">({{ $parentCount }})</span>
        </a>
        <i class="fa-solid fa-chevron-down categories-arrow"></i>
      </label>
      <ul>
        {{ range $child, $_ := $children }}

        <!-- 자식 카테고리와 연관된 게시글 수를 카운팅 -->
        {{ $childCount := 0 }}
        {{ range (where $.Site.RegularPages "Section" "posts") }}
          {{ if .Params.categories }}
            {{ if eq (printf "%s/%s" $parent $child) (partial "categories/value" .Params.categories | string) }}
              {{ $childCount = add $childCount 1 }}
            {{ end }}
          {{ end }}
        {{ end }}

        <li class="categories-link">
          <a href="/categories/{{ $parent | urlize }}/{{ $child | urlize }}/">
            <i class="fa-solid fa-file"></i>
            {{ $child }}
            <span class="category-count">({{ $childCount }})</span>
          </a>
        </li>
        {{ end }}
      </ul>
      {{ else }}
      <a href="/categories/{{ $parent | urlize }}/">
        <i class="fa-solid fa-file"></i>
        {{ $parent }}
        <span class="category-count">({{ $parentCount }})</span>
      </a>
      {{ end }}
    </li>
    {{ end }}
  </ul>
</div>
{{ end }}

.book-categories {
  margin: $padding-16 0;
  padding-bottom: $padding-16;
  border-bottom: 1px solid var(--gray-500);
  position: relative;
  z-index: 1;

  i.fa-file, i.fa-folder, i.fa-chevron-down, i.fa-chevron-up {
    font-size: $font-size-14;
    transition: transform 0.2s ease;
    max-width: $font-size-18;
  }

  .category-count {
    font-size: $font-size-12;
    color: var(--gray-500);
    white-space: nowrap;
    text-align: left;
    margin: 0;
  }

  .categories-toggle {
    display: flex;
    align-items: center;
    padding: $padding-4 $padding-8;
    min-height: 2.381rem;
    font-weight: 500;
    cursor: pointer;
  }

  .categories-link:hover {
    color: var(--color-link);
    background-color: var(--link-background);
  }

  // `전체` 카테고리 펼치기/접기
  #categories-control:checked + .categories-toggle .categories-arrow {
    transform: rotate(180deg);
  }

  #categories-control:checked ~ .categories-menu {
    max-height: 1000px;
  }

  // 부모-자식 카테고리 펼치기/접기
  input[id^="cat-"]:checked + .categories-toggle .categories-arrow {
    transform: rotate(180deg);
  }
}

<!-- layouts/_partials/docs/post-item.html -->

<article class="post-item">

  <div class="post-meta">
    <time datetime="{{ .Date.Format "2006-01-02" }}">
      {{ .Date.Format "2006년 01월 02일" }}
    </time>
    <!-- 게시글이 가진 부모-자식 카테고리 속성을 표시 -->
    {{ if .Params.categories }}
    <div class="post-categories">
      {{ $parentCategory := partial "categories/value-first" .Params.categories }}
      {{- if $parentCategory -}}
        <a href="{{ "/categories/" | relURL }}{{ $parentCategory | urlize }}/" class="category">
          <i class="fa-solid fa-folder"></i> {{ $parentCategory }}
        </a>

        {{ $childCategory := partial "categories/value-second" .Params.categories }}
        {{- if $childCategory -}}
        <a href="{{ "/categories/" | relURL }}{{ $parentCategory | urlize }}/{{ $childCategory | urlize }}/" class="category">
        <i class="fa-solid fa-file"></i> {{ $childCategory }}
        </a>
        {{- end -}}
      {{- end -}}
    </div>
    {{ end }}
  </div>

  <div class="post-content-area{{ if .Params.cover }} has-cover{{ end }}">
    <div class="post-text-area">
      <h2 class="post-title">
        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
      </h2>

      {{- $summary := cond .Description .Description (cond .Summary .Summary "") -}}
      {{ if $summary }}
      <div class="post-summary">
        {{ $summary | plainify | truncate 148 }}
      </div>
      <div class="post-summary-mobile">
        {{ $summary | plainify | truncate 72 }}
      </div>
      {{ end }}

      <!-- 게시글이 가진 태그 속성을 표시 -->
      {{ if .Params.tags }}
      <div class="post-tags">
        {{ range first 5 .Params.tags }}
        <a href="{{ "/tags/" | relURL }}{{ . | urlize }}/" class="tag">#{{ . }}</a>
        {{ end }}
      </div>
      {{ end }}
    </div>

    {{ if .Params.cover }}
    <div class="post-cover">
      <img src="{{ .Params.cover | absURL }}" alt="Cover Image" class="post-cover-img">
    </div>
    {{ end }}
  </div>

</article>

.post-categories {
  display: flex;
  gap: 0.5rem;

  .category {
    background: var(--gray-200);
    color: var(--body-font-color);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;

    .fa-file, .fa-folder {
      font-size: 0.8rem;
    }
  }
}

.post-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: $padding-8;
  overflow: hidden;
  white-space: nowrap;

  .tag {
    display: inline-block;
    flex: none;
    background: var(--gray-100);
    color: var(--body-font-color);
    padding: $padding-4 $padding-8;
    font-size: $font-size-14;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
  }
}

.book-footer .post-tags {
  line-height: 1.6;
}

.markdown .category,
.markdown .category-link,
.markdown .tag,
.markdown .tag-link,
.book-footer .tag {

  &[href] {
    color: var(--body-font-color);
    background: var(--gray-200);
    border-radius: $border-radius;
  }

  &[href]:visited {
    color: var(--body-font-color);
  }

  &[href]:hover {
    background: var(--color-page-link);
    color: var(--body-font-color);
    text-decoration: none;
  }
}