📘 [GithubPages] Jekyll hydejack submenu설정 & 포스팅 방법 - 3

2025년 03월 03일 in Study / ETC on #Jekyll #GithubPages

[GithubPages] Jekyll hydejack submenu설정 & 포스팅 방법

---

• ✅ _config.yml 메뉴 설정
• ✅ assets/js/sidebar-folder.js 생성
• ✅ _includes/body/nav.html
• ✅ _includes/my-head.html
• ✅ _sass/my-style.css
• ✅ _featured_categories 폴더 안에 .md파일 생성
• 📝 포스팅 작성예시
• 📑 Reference

✅ _config.yml 메뉴 설정

현재는 단일 카테고리만 생성되어 있는데 주 카테고리 아래에 서브 카테고리를 보여주도록 만들어 보려고 합니다.

# file: `_config.yml`
# Add links to the sidebar.
menu:
  - title:             Dev
    url:               /dev/
    submenu:
    - title:            Spring
      url:              /spring/
    - title:            React
      url:              /react/
  - title:             Study
    url:               /study/
    submenu:
      - title:            Algorithm
        url:              /algorithm/
      - title:            DataStructure
        url:              /ds/
      - title:            ETC
        url:              /etc/  
  - title:             Documentation
    url:               /docs/
  - title:             About
    url:               /about/

==config.yml 카테고리 메뉴를 설정해주자.== ==나는 주 카테고리에==

• ==Dev -> 서브 카테고리에 Spring, React==
• ==Study -> 서브 카테고리에 Algorithm, DataStructure, ETC== ==메뉴를 설정했다. sangmin2ya 님 블로그를 참고하여 만들었다.==

---

✅ assets/js/sidebar-folder.js 생성

---

# file: `_config.yml`
function spread(count){
    document.getElementById('folder-checkbox-' + count).checked = 
    !document.getElementById('folder-checkbox-' + count).checked
    document.getElementById('spread-icon-' + count).innerHTML = 
    document.getElementById('spread-icon-' + count).innerHTML == 'arrow_drop_down' ?
    'arrow_right' : 'arrow_drop_down'
  }

메뉴 옆쪽 화살표를 클릭하면 동작하는 spread function을 생성한다.

---

✅ _includes/body/nav.html

---

# file: `_includes/body/nav.html`

<span class="sr-only">{{ site.data.strings.navigation | default:"Navigation" }}{{ site.data.strings.colon | default:":" }}</span>
<ul>
    {% if site.menu %}
    {% for node in site.menu %}
    {% assign url = node.url | default: node.href %}
    {% assign count = count | plus: 1 %}
    <li>
        <div class="menu-wrapper">
            {% if node.submenu %}
            <button class="spread-btn" onclick="javascript:spread({{count}})">
                <span id="spread-icon-{{count}}" class="material-icons">arrow_drop_down</span>
                                                                      <!-- arrow_right -->
            </button>
            {% endif %}
            <a
                    {% if forloop.first %}id="_drawer--opened"{% endif %}
                    href="{% include_cached smart-url url=url %}"
                    class="sidebar-nav-item {% if node.external  %}external{% endif %}"
                    {% if node.rel %}rel="{{ node.rel }}"{% endif %}
            >
                {{ node.name | default:node.title }}
            </a>
        </div>
        {% if node.submenu %}
        <div class="menu-wrapper">
            <input type="checkbox" id="folder-checkbox-{{count}}" checked>
            <ul>
                {% for subnode in node.submenu %}
                <li>
                    <a
                            class="sidebar-nav-item {% if node.external  %}external{% endif %}"
                            href="{% include_cached smart-url url=subnode.url %}"
                    >
                        {{ subnode.title }}
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </li>
    {% endfor %}
    {% else %}
    {% assign pages = site.pages | where: "menu", true %}
    {% assign documents = site.documents | where: "menu", true %}
    {% assign nodes = pages | concat: documents | sort: "order" %}

    {% for node in nodes %}
    {% unless node.redirect_to %}
    <li>
        <a
                {% if forloop.first %}id="_navigation"{% endif %}
                href="{{ node.url | relative_url }}"
                class="sidebar-nav-item"
                {% if node.rel %}rel="{{ node.rel }}"{% endif %}
        >
            {{ node.title }}
        </a>
    </li>
    {% else %}
    <li>
        <a href="{{ node.redirect_to }}" class="sidebar-nav-item external">{{ node.title }}</a>
    </li>
    {% endunless %}
    {% endfor %}
    {% endif %}
    
</ul>

if문 추가 submenu가 있을때 화살표 버튼을 추가해주고 버튼 클릭시 onclick : spread 함수호출 하도록 추가해준다.

---

✅ _includes/my-head.html

---

# file:`_includes/my-hdad.html`
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="/assets/js/sidebar-folder.js"></script>

font추가와 sidebar-folder.js가 동작하도록 추가해준다.

---

✅ _sass/my-style.css

---

# file: `_sass/my-style.css`
.sidebar-sticky {
    height: 100%;
    padding-top: 5%;
    position: absolute;
  }
  .sidebar-about {
    padding-bottom:10%;
  }
  .spread-btn{
    left: 7%;
    position: absolute;
    padding: 0;
    padding-top: 5px;
    border: none;
    background: none;
    color: white;
    cursor: pointer;
  }
  
  .spread-btn:hover{
    color: grey;
  }
  
  .menu-wrapper{
    display: flex;
    text-align: left;
    margin-left: 10%;
    margin-bottom: 0%;
  
    input[type=checkbox]{
      display: none;
    }
  
    input[type=checkbox] ~ ul{
      display: none;
      list-style: none;
    }
  
    input[type=checkbox]:checked ~ ul{
      display: block;
    }
  }

submenu 버튼 css 추가해준다.

??? ☹️사이드바에 메뉴는 만들었는데 클릭을 하면 404 에러가 난다. 그 이유는 list페이지를 불러오지 못하기 때문이다.

---

✅ _featured_categories 폴더 안에 .md파일 생성

---

# file: `study.md`
---
layout: list
type: category
title: Study
sitemap: true
hide_description: false
order: 2
description: >
  공부하며 생긴일
---

# file: `etc.md`
---
layout: list
category: study
title: etc
description: >
  about ETC
list: true  
order: 2  
---

주 메뉴와 서브 메뉴 .md파일 작성 예시입니다.



서브메뉴는 폴더를 만들어서 그안에 넣어줬습니다.

아직 글을 올리진 않았지만 list 페이지로 이동하는 것을 볼 수 있습니다.

---

📝 포스팅 작성예시

---

이제 카테고리별 포스팅 작성법에 대해 설명하겠습니다.!

==_posts 폴더를 생성하고 .md파일을 생성하여== ==파일명은 yyyy-mm-dd-[제목].md 포멧을 기본 작성해주시면 됩니다.==

# file: `작성예시`
---
layout: post
title: 📘 Git 명령어 정리
image:
  path: /assets/img/blog/example-content-iii.jpg
categories: [study, etc]
tags: [git]
description: >
  Git 명령어 정리
published: true
sitemap: true
related_posts: _posts/study/etc/2025-05-01-git-basic.md
---

• layout : post 이 글이 포스트 형식이라는 것을 지정
• title : 글 제목 지정
• image : 포스팅 썸네일 이미지 경로
• categories : 카테고리 지정 (대분류, 소분류)
• tags : 태그 목록
• description : 글 요약 설명(검색엔진 요약으로 노출됨)
• sitemap : 사이트맵에 포함할지 여부(true면 sitemap.xml에 포함되어 검색엔진 색인 가능)
• related_posts : 연관된 글 목록을 수동 지정(추천 포스트로 연결)

---

📑 Reference

---

• sangmin2ya
• nomoreFt

---