Multiple and Hierarchical Category » 이력 » 버전 5

Jinwuk Admin, 2018/07/25 12:10

1 1 Jinwuk Admin
h1. Multiple and Hierarchical Category
2 1 Jinwuk Admin
3 3 Jinwuk Admin
기본적으로는 Wordpress 등에서 제공하는 다음과 같은 계층적 Category를 구현하기 위해서이다. 
4 1 Jinwuk Admin
5 2 Jinwuk Admin
!picture940-1.png!
6 1 Jinwuk Admin
7 1 Jinwuk Admin
인터넷에 살펴보면 여러가지 방법론들이 나오는데, 여기에서는 오직, Category 만으로 이러한 계층적 Category를 만들고 Sidebar 에 구현하고 이를 이용할 수 있도록 해 보고자 한다.
8 3 Jinwuk Admin
여기서는 Hydeout Theme를 기본으로 구현 하였다.
9 1 Jinwuk Admin
10 3 Jinwuk Admin
Hydeout Theme 는 다음의 특징을 가지고 있다.
11 3 Jinwuk Admin
* Jekyll 3.x 의 특성을 충실히 반영하고 있다.
12 3 Jinwuk Admin
* Jekyll 을 이용한 Blog를 만들시 의 가장 기본적인 구조인 Minimal Theme에서 Sidebar 구조를 제외하고는 크게 변경된 것이 없다. 
13 3 Jinwuk Admin
14 3 Jinwuk Admin
그러므로 Hydeout Theme에서 사용된 기법을 다른 Theme에 적용시키는 것은 거의 문제가 없을 것으로 본다.
15 3 Jinwuk Admin
16 1 Jinwuk Admin
h2. 기본 구조
17 1 Jinwuk Admin
18 1 Jinwuk Admin
Category를 다음과 같은 기본 구조로 만들고 싶다.
19 1 Jinwuk Admin
20 1 Jinwuk Admin
<pre>
21 3 Jinwuk Admin
------ 상위 Category (1)
22 3 Jinwuk Admin
 |  |---- 하위 Category (1)
23 3 Jinwuk Admin
 |  |---- 하위 Category (2) 
24 3 Jinwuk Admin
 |---- 상위 Category (2)
25 3 Jinwuk Admin
    |---- 하위 Category (3)
26 4 Jinwuk Admin
</pre>
27 3 Jinwuk Admin
28 3 Jinwuk Admin
h3. Multiple and Hierarchical 구조를 위한 기본 Front matter
29 3 Jinwuk Admin
30 3 Jinwuk Admin
기본적으로 Fron matter를 어떻게 설계 하느냐가 중요하다.
31 3 Jinwuk Admin
32 3 Jinwuk Admin
다음과 같이 Category의 Front matter를 놓는다.
33 3 Jinwuk Admin
34 3 Jinwuk Admin
<pre><code class="ruby">
35 3 Jinwuk Admin
---
36 3 Jinwuk Admin
layout: category
37 3 Jinwuk Admin
title: Briefs
38 3 Jinwuk Admin
menu: true
39 3 Jinwuk Admin
submenu: true
40 3 Jinwuk Admin
order: 2
41 3 Jinwuk Admin
---
42 3 Jinwuk Admin
</code></pre>
43 3 Jinwuk Admin
44 3 Jinwuk Admin
중요한 부분은 menu와 submenu의 존재이다. 이것을 사용하여 html 에서 상위 Category인지 하위 Category인지를 파악하고자 한다.
45 3 Jinwuk Admin
46 3 Jinwuk Admin
* menu 에서 true 이면 sidebar 에서 category 의 이름이 나타나도록 하며 최상위 category 임을 의미한다.
47 3 Jinwuk Admin
* submenu 에서 true 이면 자신의 category에 속하는 하위 category가 있음을 나타낸다.
48 3 Jinwuk Admin
49 3 Jinwuk Admin
하위 category의 Front matter는 다음과 같이 놓는다.
50 3 Jinwuk Admin
예를 들어 "Brief" category 에 속하는 "Machine Learning" Category를 다음과 같아야 한다.
51 3 Jinwuk Admin
52 3 Jinwuk Admin
<pre><code class="ruby">
53 3 Jinwuk Admin
---
54 3 Jinwuk Admin
layout: category
55 3 Jinwuk Admin
title: Machine Learning
56 3 Jinwuk Admin
category: Briefs
57 3 Jinwuk Admin
menu: false
58 3 Jinwuk Admin
order: 2
59 3 Jinwuk Admin
---
60 3 Jinwuk Admin
</code></pre>
61 3 Jinwuk Admin
62 1 Jinwuk Admin
* 최상위 category사 아니므로 menu는 false 이다. 
63 4 Jinwuk Admin
* 만일 하위 category를 주고 싶다면 submenu에서 true를 준다.
64 4 Jinwuk Admin
65 4 Jinwuk Admin
마지막으로 post는 다음과 같이 쓰면 된다.
66 4 Jinwuk Admin
67 4 Jinwuk Admin
<pre><code class="ruby">
68 4 Jinwuk Admin
---
69 4 Jinwuk Admin
layout: post
70 4 Jinwuk Admin
title:  "Deep Image Compression via End to End Learning"
71 4 Jinwuk Admin
date:   2018-07-07 22:03:00 +0900
72 4 Jinwuk Admin
categories: [Briefs, Machine Learning]
73 4 Jinwuk Admin
tags:
74 4 Jinwuk Admin
  - Machine-Learning
75 4 Jinwuk Admin
subtitle:   "Machine Learning"  
76 4 Jinwuk Admin
comments: true
77 4 Jinwuk Admin
---
78 4 Jinwuk Admin
</code></pre>
79 4 Jinwuk Admin
80 4 Jinwuk Admin
* category는 복수이므로 caterories가 되고 상위는 Brief 그리고 하위는 Machine Learning임을 가켜야 한다.
81 5 Jinwuk Admin
82 5 Jinwuk Admin
h2, HTML 편집
클립보드 이미지 추가 (최대 크기: 977.563 MB)