Github Blog 만들기 #3 - SubMenu 추가
단순히 메인 카테고리로 + 태그로만 꾸리기에는 메뉴가 너무 난잡해질 것 같았습니다.
그래서 서브메뉴를 구성하기로 했습니다. 여러가지 자료를 찾아보는데 Hydejack 9.1.6으로 꾸린 예시를 찾았습니다.
글의 원본 참조는 여기서 하시면 됩니다.
글의 1번부터 차례대로 진행해왔기 때문에, 제 기본 틀과 동일한 경우와 가정해서 설명하겠습니다.
그럼 시작해볼까요?
파일 설정 추가
제공된 코드를 그대로 복사해서 붙여넣기 하면 됩니다.
해당 경로에 파일이 없으면 파일을 만들면 됩니다.
제작시에 헷갈림 없게 파일의 전체 코드를 올려놓을 것이라서 1번부터 따라오신 분들은 그냥 전체 파일내용과 동일하니 전체복붙 하시면 됩니다.
서브메뉴는 선택사항이 발생하는데요, 초기에 서브메뉴가 열려있는가 닫혀있는가 선택하시면 됩니다.
저는 누군가가 봐주길 바라는 마음으로 글을 쓰고 블로그를 운영하고 있기 때문에,
서브메뉴를 클릭하는 사용자 경험을 최대한 축소하고 싶었습니다.
그래서 초기 메뉴는 열려있습니다.
선택사항 1.나는 디폴트로 메뉴가 닫혀있는 경우를 원한다. 예시
선택사항 2.나는 디폴트로 메뉴가 열려있는 경우를 원한다. 예시
💡 각 파일에 선택사항은 한 번호로만 사용하셔야 합니다. sidebar-folder.js는 1번, nav.html은 2번 고르시면 안됩니다.
assets/js/sidebar-folder.js
선택사항 1.나는 디폴트로 메뉴가 닫혀있는 경우를 원한다.
// file: `assets/js/sidebar-folder.js`
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_right' ?
'arrow_drop_down' : 'arrow_right'
}
선택사항 2.나는 디폴트로 메뉴가 열려있는 경우를 원한다.
// file: `assets/js/sidebar-folder.js`
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';
}
선택사항 1, 2는 초기값 설정만 바꿔준겁니다.
_includes/body/nav.html
선택사항 1.나는 디폴트로 메뉴가 닫혀있는 경우를 원한다.
<!-- 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_right</span>
</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}}">
<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>
선택사항 2.나는 디폴트로 메뉴가 열려있는 경우를 원한다.
<!-- 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>
</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>
선택사항 1, 2는 초기값 설정만 바꿔준겁니다.
_sass/my-style.scss
// file: `_sass/my-style.scss`
//sidebar
.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;
}
}
_includes/my-head.html
맨 윗줄에 추가해주면 됩니다.
<!-- file: `_includes/my-head.html` -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="/assets/js/sidebar-folder.js"></script>
메뉴 설정 추가
submenu도 메뉴니까 기존에 하던 방식대로 메뉴를 추가해주면 됩니다.
_config.yml
추가하고 싶은 대 카테고리 하위에 submenu를 추가해주면 됩니다.
# file: `_config.yml`
# Add links to the sidebar.
menu:
- title: DevLog
url: /devlog/
submenu:
- title: Blog Dev
url: /blog/
- title: Study
url: /study/
submenu:
- title: CLEAN-ARCHITECTURE
url: /clean-architecture/
- title: ALGORITHM
url: /algorithm/
- title: Archive Blog
url: https://nomoreft.tistory.com/
- title: Documentation
url: /docs/
- title: About Me
url: /about/
_featured_categories 폴더에 submenu 추가
저는 서브메뉴로 devlog - blog, study - clean-architecture, algorithm을 추가했습니다.
그래서 _featured_categories 폴더에 blog, clean-architecture, algorithm md파일을 만들어줬습니다.
---
layout: list
title: Blog Log
slug: blog
description: >
이 블로그 개발기
sitemap: false
order: 3
---
요런식으로 title을 설정해주시고 중요한건 slug입니다. slug가 키값이란건 알고 계시죠?
Post에 카테고리 추가
1부터 따라오시던 분들은 기존 카테고리에 글 쓰던 방식이 실제 Folder를 1차 Depth로 두고, 그 안에 파일을 만들어서 썼습니다.
기존 구조. 사실상 categories는 필요없었다.
이 폴더 구조를 이제 개편할 때입니다. 더 관리하기 편하게 말이죠.
관리하기 편한 구조 및 post의 categories 설정
이제는 글에 categories를 설정할 때, 폴더 구조를 따라서 설정해주시면 됩니다.
설정하지 않으면 글이 리스트에 나오지 않습니다.
오른쪽으로 갈 수록 Depth라고 보시면 되는데, categories에 devlog, blog가 들어가면 devlog를 눌러도 글이 나옵니다.
자연스럽게 최상위 카테고리엔 하위카테고리의 모든 글, 하위카테고리엔 하위카테고리의 글만 나오게 됩니다.
마지막으로
이정도 만들면 사실상 블로그는 거의 완성이 되었습니다.
다음은 간단하게 사용자 설정과 사진 설정으로 정체성 형성정도만 해주면 되겠죠
다음 글에서 뵙겠습니다.
