Hugo 블로그 만들기 (5) - 본문 레이아웃 개선 (헤더와 푸터 및 Disqus 댓글 기능 구현)

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

<!-- ExampleSite 기준, 섹션이 다르다면 변경해줘야 합니다. -->
{{ if eq .Section "post" }}
<header class="post-header">

  {{ if .Params.categories }}
  <div class="post-header-category">
    {{ $categories := partial "categories/value" .Params.categories }}
    <a href="{{ "/categories/" | relURL }}{{ $categories | urlize }}/" class="post-header-category-link">
      {{ $categories }}
    </a>
  </div>
  {{ end }}

  <h1 class="post-header-title">{{ .Title }}</h1>

  {{ with .Date }}
  <div class="post-header-date">
    <time datetime="{{ .Format "2006-01-02T15:04:05Z07:00" }}">
      {{ .Format "2006. 1. 2. 15:04" }}
    </time>
  </div>
  {{ end }}

</header>
{{ end }}
{{ end }}

// assets/_main.scss

.post-header {
  text-align: center;
  padding-bottom: $padding-24;
  border-bottom: 1px solid var(--gray-200);

  .post-header-category {
    margin-bottom: $padding-8;
    font-size: $font-size-16;
    font-weight: 400;
  }

  .markdown .post-header-category-link {
    &[href] {
      color: var(--body-font-color);
    }

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

    &[href]:hover {
      text-decoration: none;
    }
  }

  .post-header-title {
    font-size: $font-size-40;
    font-weight: 700;
    color: var(--body-font-color);

    @media (max-width: $body-max-width) {
      font-size: $font-size-32;
    }
  }

  .markdown .post-header-title {
    margin: 0;
  }

  .post-header-date {
    color: var(--gray-500);
    font-size: $font-size-14;
    font-weight: 400;
    margin-top: $padding-8;
  }
}

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

<header class="post-header">
  <!-- ... -->
</header>

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

.book-cover {
  margin-top: $padding-32;
  margin-bottom: $padding-48;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  .book-cover-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }
}

/* layouts/_partials/docs/post-prev-next.html */

{{ $currentCategories := partial "categories/value" .Params.categories }}
{{ $currentPage := . }}

{{/* 카테고리와 매칭되는 페이지를 분류하기 위한 빈 배열 선언 */}}
{{ $pages := slice }}

{{ range where .Site.RegularPages "Section" .Section }}
  {{ $pageCategories := partial "categories/value" .Params.categories }}

  {{/* 카테고리와 매칭되는 페이지를 `$pages` 배열에 추가 */}}
  {{ if eq $currentCategories $pageCategories }}
    {{ $pages = $pages | append . }}
  {{ end }}
{{ end }}

{{/* 이전, 다음 페이지 초기화 */}}
{{ $prev := "" }}
{{ $next := "" }}
{{ $matches := false }}

{{/* 인접 페이지를 구하기 위해 현재 페이지의 위치를 탐색 */}}
{{ range $index, $page := $pages }}
  {{ if eq $page.RelPermalink $currentPage.RelPermalink }}
    {{ $matches = true }}

    {{/* 현재 페이지가 배열의 시작이 아니라면 `$prev` 에 이전 페이지 객체를 할당 */}}
    {{ if lt $index (sub (len $pages) 1) }}
      {{ $prev = index $pages (add $index 1) }}
    {{ end }}

    {{/* 현재 페이지가 배열의 끝이 아니라면 `$next` 에 다음 페이지 객체를 할당 */}}
    {{ if gt $index 0 }}
      {{ $next = index $pages (sub $index 1) }}
    {{ end }}
  {{ end }}
{{ end }}
/* HTML2 */

<!-- layouts/_partials/docs/post-prev-next.html -->

<!-- HTML1 -->
<div class="post-navigation">
  {{ with $prev }}
  <a href="{{ .RelPermalink }}" class="post-nav-link post-nav-prev">
    <span class="post-nav-direction"><i class="fa-solid fa-backward"></i> PREV</span>
    <span class="post-nav-title">{{ partial "docs/title" . }}</span>
  </a>
  {{ else }}
  <a href="" class="post-nav-link post-nav-prev post-nav-disabled">
    <span class="post-nav-direction"><i class="fa-solid fa-backward"></i> PREV</span>
    <span class="post-nav-title">이전 게시글이 없습니다</span>
  </a>
  {{ end }}

  {{ with $next }}
  <a href="{{ .RelPermalink }}" class="post-nav-link post-nav-next">
    <span class="post-nav-direction">NEXT <i class="fa-solid fa-forward"></i></span>
    <span class="post-nav-title">{{ partial "docs/title" . }}</span>
  </a>
  {{ else }}
  <a href="" class="post-nav-link post-nav-next post-nav-disabled">
    <span class="post-nav-direction">NEXT <i class="fa-solid fa-forward"></i></span>
    <span class="post-nav-title">다음 게시글이 없습니다</span>
  </a>
  {{ end }}
</div>

// assets/_custom.scss

$narrow-breakpoint: ($body-min-width + $body-max-width) / 2;

.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: 0;
  margin-top: $padding-24;
  padding-top: $padding-24;
  border-top: 1px solid var(--gray-200);
  overflow: hidden;

  @media screen and (max-width: $narrow-breakpoint) {
    flex-direction: column;
  }

  .post-nav-link {
    display: block;
    background: var(--gray-100);
    padding: $padding-12;
    text-decoration: none;
    transition: background-color 0.2s ease;
    flex: 1;
    max-width: 50%;

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

    @media screen and (max-width: $narrow-breakpoint) {
      max-width: 100%;
    }
  }

  .post-nav-prev {
    text-align: left;
    border-radius: 8px 0 0 8px;

    @media screen and (max-width: $narrow-breakpoint) {
      border-radius: 8px;
    }
  }

  .post-nav-next {
    text-align: right;
    border-radius: 0 8px 8px 0;

    @media screen and (max-width: $narrow-breakpoint) {
      border-radius: 8px;
    }
  }

  .post-nav-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .post-nav-direction {
    display: block;
    color: var(--gray-500);
    font-size: $font-size-14;
    font-weight: 600;
    margin-bottom: $padding-8;

    .fa-backward, .fa-forward {
      font-size: $font-size-14;
    }
  }

  .post-nav-title {
    display: block;
    color: var(--body-font-color);
    font-size: $font-size-16;
    font-weight: 400;
    line-height: 1.5;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

// assets/scroll-progress.js

document.addEventListener('DOMContentLoaded', function() {
  const progressBar = document.querySelector('.scroll-progress-bar');
  
  if (!progressBar) return;
  
  function updateScrollProgress() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollProgress = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
    progressBar.style.width = scrollProgress + '%';
  }

  window.addEventListener('scroll', updateScrollProgress, { passive: true });
  updateScrollProgress();
});

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
}

.scroll-progress-bar {
  height: 100%;
  background: #1e6ef4;
}

<!-- layouts/_partials/docs/recent-posts.html -->

<!-- ExampleSite 기준, 섹션이 다르다면 변경해줘야 합니다. -->
{{ $recentPosts := where .Site.RegularPages "Section" "post" | first 5 }}
{{ if $recentPosts }}
<div class="recent-posts">
  <div class="recent-posts-header">
    <i class="fa-solid fa-clock"></i>
    <span>최신글</span>
  </div>

  <ul class="recent-posts-list">
    {{ range $recentPosts }}
    <li class="recent-post-item">
      <a href="{{ .RelPermalink }}" title="{{ .Title }}">
        <div class="recent-post-title">{{ .Title }}</div>
        <div class="recent-post-date">
          <time datetime="{{ .Date.Format "2006-01-02" }}">
            {{ .Date.Format "2006.01.02" }}
          </time>
        </div>
      </a>
    </li>
    {{ end }}
  </ul>
</div>
{{ end }}

// assets/custom.scss

.recent-posts {
  margin: $padding-16 0;
  padding-bottom: $padding-16;
  border-bottom: 1px solid var(--gray-500);

  .recent-posts-header {
    margin-bottom: $padding-8;
    padding: $padding-4 $padding-8;
    font-weight: 500;
    color: var(--body-font-color);

    .fa-clock {
      font-size: $font-size-14;
      color: var(--color-link);
    }
  }

  .recent-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;

    .recent-post-item {
      a {
        display: block;
        padding: $padding-8;
        color: var(--body-font-color);
        border-radius: $border-radius;
        text-decoration: none;

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

      .recent-post-title {
        font-size: $font-size-14;
        font-weight: 400;
        margin-bottom: $padding-4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .recent-post-date {
        font-size: $font-size-12;
        color: var(--gray-500);

        time {
          font-family: monospace;
        }
      }
    }
  }
}