DocFlow
StaticSite
Reference
Hugo
사이드바 추가

사이드바 추가

Hugo 자체적으로는 사이드바나 내비게이션을 기본적으로 제공하지 않습니다. 대신, 매우 유연한 템플릿 시스템을 제공하여 사용자나 테마 개발자가 사이드바나 내비게이션을 원하는 대로 구현할 수 있습니다.

사이드바가 지원되는 테마 사용

  • 주로 기술 문서나 학습자료 등의 문서 사이트를 위한 테마입니다.
  • 확장 가능한 트리형 사이드바를 옵션으로 제공합니다.

Doks

설치 

git init
git submodule add https://github.com/h-enk/doks.git themes/doks

설정 

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Wiki Site'
theme = 'doks'
[params]
  # Doks-specific settings
  disable_search = false
  disable_language_dropdown = false
  disable_version_dropdown = false
[menu]
  [[menu.main]]
    identifier = "home"
    name = "Home"
    url = "/"
    weight = 1
  [[menu.main]]
    identifier = "blog"
    name = "Blog"
    url = "/blog/"
    weight = 2

테마 구성 파일 복사

  • Doks 테마의 기본 구성 파일을 복사합니다
copy themes\doks\config\_default\config.toml config.toml

Docsy

Book

폴더 구조를 기반으로 한 사이드바 구현

사용자 정의 템플릿 만들기

  • 사이드바는 왼쪽에 생성
  • 확장 가능한 트리형 네비게이션
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'Aprofl'
theme = 'PaperMod'
contentDir = "content/Blog"
[params]
  author = "Aprofl"
  description = "For productivity."
  ShowReadingTime = true
  ShowShareButtons = true
  ShowPostNavLinks = true

layouts/partials/sidebar.html 파일 생성 

<aside>
  <ul class="tree">
    {{ range .Site.Menus.main }}
      <li>
        <span class="caret">{{ .Name }}</span>
        {{ if .Children }}
          <ul class="nested">
            {{ range .Children }}
              <li>
                <a href="{{ .URL }}">{{ .Name }}</a>
              </li>
            {{ end }}
          </ul>
        {{ end }}
      </li>
    {{ end }}
  </ul>
</aside>

layouts/_default/baseof.html 파일 수정 

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
  {{ partial "head.html" . }}
  <link rel="stylesheet" href="{{ "css/custom.css" | relURL }}">
</head>
<body>
  {{ partial "header.html" . }}
  <div class="container">
    <div class="sidebar">
      {{ partial "sidebar.html" . }}
    </div>
    <main class="content">
      {{ block "main" . }}{{ end }}
    </main>
  </div>
  {{ partial "footer.html" . }}
  <script src="{{ "js/custom.js" | relURL }}"></script>
</body>
</html>

사용자 정의 CSS 추가

  • static/css/custom.css 파일을 생성하고 다음 CSS 스타일을 추가합니다:
/* 레이아웃 설정 */
.container {
  display: flex;
}
.sidebar {
  width: 250px;
  margin-right: 20px;
}
.content {
  flex: 1;
}
/* 트리 메뉴 스타일링 */
ul.tree, ul.tree ul {
  list-style-type: none;
  padding-left: 20px;
}
ul.tree ul {
  display: none;
}
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}
.caret::before {
  content: "\25B6"; /* Right-pointing arrow */
  color: black;
  display: inline-block;
  margin-right: 6px;
}
.caret-down::before {
  transform: rotate(90deg); /* Down-pointing arrow */
}
.nested {
  display: none;
}
.active {
  display: block;
}

사용자 정의 JavaScript 추가

  • static/js/custom.js 파일을 생성하고, 다음 JavaScript 코드를 추가합니다:
document.addEventListener("DOMContentLoaded", function() {
  var toggler = document.getElementsByClassName("caret");
  for (var i = 0; i < toggler.length; i++) {
    toggler[i].addEventListener("click", function() {
      this.parentElement.querySelector(".nested").classList.toggle("active");
      this.classList.toggle("caret-down");
    });
  }
});

폴더 구조 

myblog/
├── archetypes/
├── content/
│   ├── blog/
├── layouts/
│   ├── partials/
│   │   └── sidebar.html
│   ├── _default/
│   │   └── baseof.html
├── static/
│   ├── css/
│   │   └── custom.css
│   ├── js/
│   │   └── custom.js
├── themes/
│   └── PaperMod/
└── config.toml
Buy me a coffee Buy me a coffee
다국어 지원추천테마