Github ๋ธ”๋กœ๊ทธ ๊ตฌ์ถ•ํ•˜๊ธฐ (2)

Github ๋ธ”๋กœ๊ทธ ๊ตฌ์ถ•ํ•˜๊ธฐ (2) - ์ปค์Šคํ„ฐ๋งˆ์ด์ง•

1. Github ๋ธ”๋กœ๊ทธ ๊ตฌ์ถ•ํ•˜๊ธฐ (1) - Github ๋ธ”๋กœ๊ทธ ์ƒ์„ฑ

2. Github ๋ธ”๋กœ๊ทธ ๊ตฌ์ถ•ํ•˜๊ธฐ (2) - ์ปค์Šคํ„ฐ๋งˆ์ด์ง•

๋ชฉ์ฐจ

1. ๋ชฉ์ฐจ

2. ๊ตฌ์กฐ ํŒŒ์•…ํ•˜๊ธฐ

2.1 jekyll ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ

2.2 liquid ์–ธ์–ด๋ž€?

3. ๋ธ”๋กœ๊ทธ ์ˆ˜์ •ํ•˜๊ธฐ

4. ๋ธ”๋กœ๊ทธ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•˜๊ธฐ

4.1 ์ปค์Šคํ…€ ๋ฉ”๋‰ด ์ถ”๊ฐ€ํ•˜๊ธฐ

4.2 ๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด ๋งŒ๋“ค๊ธฐ

4.3 ์‚ฌ์ด๋“œ ๋ฉ”๋‰ด ๋งŒ๋“ค๊ธฐ

5. ๋งˆ์น˜๋ฉฐ

๊ตฌ์กฐ ํŒŒ์•…ํ•˜๊ธฐ

jekyll ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.
โ”œโ”€โ”€ _config.yml
โ”œโ”€โ”€ _data
โ”‚   โ””โ”€โ”€ members.yml
โ”œโ”€โ”€ _drafts
โ”‚   โ”œโ”€โ”€ begin-with-the-crazy-ideas.md
โ”‚   โ””โ”€โ”€ on-simplicity-in-technology.md
โ”œโ”€โ”€ _includes
โ”‚   โ”œโ”€โ”€ footer.html
โ”‚   โ””โ”€โ”€ header.html
โ”œโ”€โ”€ _layouts
โ”‚   โ”œโ”€โ”€ default.html
โ”‚   โ””โ”€โ”€ post.html
โ”œโ”€โ”€ _posts
โ”‚   โ”œโ”€โ”€ 2007-10-29-why-every-programmer-should-play-nethack.md
โ”‚   โ””โ”€โ”€ 2009-04-26-barcamp-boston-4-roundup.md
โ”œโ”€โ”€ _sass
โ”‚   โ”œโ”€โ”€ _base.scss
โ”‚   โ””โ”€โ”€ _layout.scss
โ”œโ”€โ”€ _site
โ”œโ”€โ”€ .jekyll-metadata
โ””โ”€โ”€ index.html # ์˜ฌ๋ฐ”๋ฅธ ๋จธ๋ฆฌ๋ง์„ ๊ฐ€์ง„ 'index.md' ๋„ ๊ฐ€๋Šฅ

์šฐ์„  ์ปค์Šคํ„ฐ๋งˆ์ด์ง•์„ ์œ„ํ•ด์„œ๋Š” jekyll ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ํŒŒ์•… ํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ์— ๊ด€ํ•ด์„œ๋Š” jekyll ๊ณต์‹ ํ™ˆํŽ˜์ด์ง€์— ์ž์„ธํžˆ ๋‚˜์™€์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ๋‹ค ํ™•์ธ ํ•  ํ•„์š”๋Š” ์—†์„ ๊ฒƒ ๊ฐ™๊ณ  ํ•„์š”ํ•œ ๋ถ€๋ถ„์€ ๊ณต์‹ ๋ฌธ์„œ์˜ ๋””๋ ‰ํ† ๋ฆฌ ์„ค๋ช…์„ ์ฐธ์กฐํ•˜์˜€์Šต๋‹ˆ๋‹ค.

  • _config.yml : ํ™˜๊ฒฝ์„ค์ • ์ •๋ณด๋ฅผ ๋ณด๊ด€ํ•œ๋‹ค. ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•  ๋•Œ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์˜ต์…˜๋“ค์„ ์ถ”๊ฐ€ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ๊ทธ๋ ‡๊ฒŒ ๋”ฐ๋กœ ์™ธ์šฐ๋Š” ๊ฒƒ๋ณด๋‹ค ์ด ํŒŒ์ผ์— ์ •์˜ํ•ด๋‘๋Š”๊ฒŒ ๋” ํŽธ๋ฆฌํ•˜๋‹ค.
  • _data : ์‚ฌ์ดํŠธ์—์„œ ์‚ฌ์šฉ ํ•  ๋ฐ์ดํ„ฐ๋ฅผ ์ ์ ˆํ•œ ํฌ๋งท์œผ๋กœ ์ •๋ฆฌํ•˜๋Š” ๋””๋ ‰ํ† ๋ฆฌ์ด๋‹ค.
  • _includes : ์žฌ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ํŒŒ์ผ์„ ๋‹ด๋Š” ๋””๋ ‰ํ† ๋ฆฌ๋กœ์„œ, ํ•„์š”์— ๋”ฐ๋ผ ํฌ์ŠคํŠธ๋‚˜ ๋ ˆ์ด์•„์›ƒ์— ์‰ฝ๊ฒŒ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • _posts : ํ•œ๋งˆ๋””๋กœ ๋งํ•˜๋ฉด, ๋‹น์‹ ์˜ ์ปจํ…์ธ ๋‹ค. ์ค‘์š”ํ•œ ๊ฒƒ์€ ํŒŒ์ผ๋“ค์˜ ๋ช…๋ช…๊ทœ์น™์ธ๋ฐ, ๋ฐ˜๋“œ์‹œ ์ด ํ˜•์‹์„ ๋”ฐ๋ผ์•ผ ํ•œ๋‹ค: YEAR-MONTH-DAY-title.MARKUP. ๊ณ ์œ ์ฃผ์†Œ๋Š” ํฌ์ŠคํŠธ ๋ณ„๋กœ ๊ฐ๊ฐ ์ •์˜ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๋‚ ์งœ์™€ ๋งˆํฌ์—… ์–ธ์–ด ์ข…๋ฅ˜๋Š” ์˜ค๋กœ์ง€ ํŒŒ์ผ๋ช…์— ์˜ํ•ด ๊ฒฐ์ •๋ฉ๋‹ˆ๋‹ค.

์ฃผ๋กœ ์ œ๊ฐ€ ์ˆ˜์ • ํ•  ํŒŒ์ผ์€ ์ด๋ ‡๊ฒŒ ๋„ค ๊ฐœ ์ธ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

liquid ์–ธ์–ด๋ž€?

liquid๋Š” Shopify2๊ฐ€ ๊ฐœ๋ฐœํ•œ Ruby๋กœ ์ž‘์„ฑ๋œ ์˜คํ”ˆ์†Œ์Šค ํ…œํ”Œ๋ฆฟ ์–ธ์–ด์ด๋ฉฐ ์ฃผ๋กœ jeykyll ์—์„œ ํ…œํ”Œ๋ฆฟ์„ ์ฒ˜๋ฆฌ ํ•  ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ Liquid์—์„œ๋Š” ๋‚ด์šฉ ์ถœ๋ ฅ ์‹œ ์ค‘๊ด„ํ˜ธ 2๊ฐœ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ %๋ฅผ ์ด์šฉํ•˜์—ฌ ๋…ผ๋ฆฌ ์—ฐ์‚ฐ์„ ํ•ฉ๋‹ˆ๋‹ค. jekyll ํŒŒ์ผ ์ด๊ฒƒ ์ €๊ฒƒ ์—ด์–ด๋ณด๋‹ค ๋ณด๋ฉด ๋œฌ๊ธˆ์—†์ด ์ค‘๊ด„ํ˜ธ 2๊ฐœ๋กœ ๊ฐ์‹ธ์ ธ์žˆ๋Š” ์–ธ์–ด๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๊ฒƒ์ด liquid ์–ธ์–ด์ž…๋‹ˆ๋‹ค.

๋ธ”๋กœ๊ทธ ์ˆ˜์ •ํ•˜๊ธฐ

์ž, ์ด์ œ ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ๋„ ์•Œ์•˜๊ณ  liquid ์–ธ์–ด๋„ ์•Œ์•˜์œผ๋‹ˆ ๋ณธ๊ฒฉ์ ์œผ๋กœ ์ˆ˜์ •์„ ํ•ด๋ด…์‹œ๋‹ค. ์ผ๋‹จ ๋ฉ”๋‰ด๋ฅผ ๋‹ด๊ณ ์žˆ๋Š” ํ—ค๋”๊ฐ™์€ ๊ฒฝ์šฐ์—” ์žฌ์‚ฌ์šฉ์„ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์œผ๋‹ˆ _include์— ์žˆ์„ ํ™•๋ฅ ์ด ๋งค์šฐ ๋†’์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ _include/_layout.html ์„ ๊ฐ€์žฅ๋จผ์ € ์‚ดํŽด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

1
2
3
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"> {% include _partials/header.html %} </div>
</header>

theme-apply

ํฌ๋กฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋กœ html ์ฝ”๋“œ๋ฅผ ํ™•์ธ ํ›„ ๋น„๊ต ํ–ˆ์„ ๋•Œ _includes/_partials/header.html์—์„œ ๋ฉ”๋‰ด ๊ตฌ์„ฑ์„ ํ•˜๋Š” ๊ฑธ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<nav class="site-nav">
  .
  .
  .
   {% if site.menu %}
    <ul id="menu" class="menu">
      {% for name_path in site.menu %}
        {% assign name = name_path[0] %}
        {% assign path = name_path[1] %}
        {% assign itemName = name | downcase %}
        <li class="menu-item menu-item-">
          <a href="" rel="section">
            {% if site.menu_icons.enable %}
              <i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br />
            {% endif %}
            {{ __.menu[name] }}
          </a>
        </li>
      {% endfor %}
      .
      .
      . 
    </ul>
  {% endif %}
  .
  .
  .
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.
.
.
menu:
  home: /
  #categories: /categories/
  about: /about/
  archives: /archives/
  #tags: /tags/
  #sitemap: /sitemap.xml
  #commonweal: /404.html

menu_icons:
  enable: true
  KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  schedule: calendar
  tags: tags
  archives: archive
  sitemap: sitemap
  commonweal: heartbeat
.
.
.

html ํƒœ๊ทธ์™€ ๋น„๊ต ํ•ด ๋ณด๋‹ˆ ์ด ๋ถ€๋ถ„์ด ๋ฐ”๋กœ ์ œ๊ฐ€ ์›ํ•˜๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. site.menu๋ผ๋Š” liquid ๋ณ€์ˆ˜๋กœ config ํŒŒ์ผ์— ์žˆ๋Š” menu ํ•ญ๋ชฉ์„ ๋ถˆ๋Ÿฌ์™€ ๋ฉ”๋‰ด๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” ํ˜„์žฌ about ํŽ˜์ด์ง€๊ฐ€ ํ•„์š”ํ•˜๋‹ˆ about์— ์ฃผ์„์„ ํ•ด์ œํ•˜๋„๋ก ํ•ฉ์‹œ๋‹ค. ๋˜ ์นดํ…Œ๊ณ ๋ฆฌ์™€ ํƒœ๊ทธ ๋Œ€์‹ , ์ง์ ‘ ์ปค์Šคํ…€ ํ•œ ๋ฉ”๋‰ด๋ฅผ ๋„ฃ์„ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— categories์™€ tags๋Š” ์ฃผ์„์ฒ˜๋ฆฌ ํ•ด์ฃผ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

menu-apply

๊ทธ๋ ‡๋‹ค๋ฉด ์œ„์™€๊ฐ™์ด ๊ธฐ์กด์— ์žˆ๋˜ categories๊ณผ tag๋Š” ์‚ฌ๋ผ์ง€๊ณ  ๋Œ€์‹  about ๋ฉ”๋‰ด๊ฐ€ ์ƒ๊ธด ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฉ”๋‰ด ์•„์ด์ฝ˜์€ https://fontawesome.com/v4.7/icons/ ์‚ฌ์ดํŠธ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์›ํ•˜๋Š” ์•„์ด์ฝ˜์˜ ์ด๋ฆ„์„ menu_icons ํ•ญ๋ชฉ์— ๋„ฃ์–ด์ฃผ๋ฉด ์ž๋™์œผ๋กœ ์‚ฝ์ž…๋ฉ๋‹ˆ๋‹ค.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.
.
.
# Local search
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1
.
.
.

๋˜ํ•œ ์›ํ™œํ•œ ๋ธ”๋กœ๊ทธ ํƒ๋ฐฉ์„ ์œ„ํ•ด ๋ธ”๋กœ๊ทธ ๋‚ด ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ๋„ ์ถ”๊ฐ€ํ•˜๋ ค๋ฉด local_search ๋ถ€๋ถ„์—์„œ enable ๋ถ€๋ถ„์„ true๋กœ ๋ณ€๊ฒฝ ํ•ด ์ค๋‹ˆ๋‹ค.

search

๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ์ด ํ™œ์„ฑํ™” ๋œ ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ธ”๋กœ๊ทธ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•˜๊ธฐ

๊ทธ๋Ÿผ ์ด์ œ ๋ณธ๊ฒฉ์ ์œผ๋กœ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•˜๊ธฐ ์œ„ํ•ด ๊ตฌ์กฐ๋ฅผ ์„ค๊ณ„ ํ•ด ๋ด…์‹œ๋‹ค. ๊ธฐ์กด์˜ ๋ฉ”๋‰ด๋ฅผ ๊ทธ๋Œ€๋กœ ์“ฐ๊ธฐ ๋ณด๋‹ค๋Š” ํƒ€ ๋ธ”๋กœ๊ทธ ์‚ฌ์ดํŠธ ์ฒ˜๋Ÿผ ์ œ๊ฐ€ ์›ํ•˜๋Š” ๋ฉ”๋‰ด๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ๋‚˜๋ˆ„๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. category์™€ tag๋ฅผ ์ด์šฉํ•˜์—ฌ category๋ฅผ ๋ฉ”์ธ ๋ฉ”๋‰ด๋กœ, tag๋ฅผ ์„œ๋ธŒ ๋ฉ”๋‰ด๋กœ ์จ์„œ ๊ธฐ์กด ๋ฉ”๋‰ด๋ณด๋‹ค ๋‹ค์–‘ํ•˜๊ฒŒ ๊ธ€์„ ๋ถ„๋ฅ˜ํ•  ์ˆ˜ ์žˆ๊ณ  ์ •์  ํŽ˜์ด์ง€์ด์ง€๋งŒ ๋™์ ์œผ๋กœ ๋ฉ”๋‰ด๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ˆ˜์ • ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ ์ƒ๋‹จ header์—๋Š” category์™€ tag๋ฅผ ์ด์šฉํ•œ ๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด๋ฅผ ๋งŒ๋“ค๊ณ  ์šฐ์ธก ์‚ฌ์ด๋“œ๋ฐ”์—๋„ custom ๊ณต๊ฐ„์— ํ•ด๋‹น ๋ฉ”๋‰ด๋ฅผ ๋งŒ๋“ค์–ด ์กฐ๊ธˆ ๋” ๋ฉ”๋‰ด ์ด๋™์ด ์‰ฝ๋„๋ก ๋งŒ๋“ค์–ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

์ปค์Šคํ…€ ๋ฉ”๋‰ด ์ถ”๊ฐ€ํ•˜๊ธฐ

์šฐ์„  main menu๋กœ ์‚ฌ์šฉ ํ•  categories๋ฅผ ํ—ค๋”์— ์ถœ๋ ฅํ•ด๋ด…์‹œ๋‹ค.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.
.
.
    <ul id="menu" class="menu">
      {% for name_path in site.menu %}
        {% assign name = name_path[0] %}
        {% assign path = name_path[1] %}
        {% assign itemName = name | downcase %}
        <li class="menu-item menu-item-{{ itemName }}">
          <a href="{{ path | relative_url }}" rel="section">
            {% if site.menu_icons.enable %}
              <i class="menu-item-icon fa fa-fw fa-{{site.menu_icons[itemName] | default: 'question-circle' | downcase }}"></i> <br />
            {% endif %}
            {{ __.menu[name] }}
          </a>
        </li>
      {% endfor %}
.
.
.

์œ„ ์ฝ”๋“œ๋ฅผ ๋ณด๋‹ˆ site.menu์—์„œ ๋ฉ”๋‰ด ์ •๋ณด๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ณ , __.menu[name]์—์„œ ๋ฉ”๋‰ด ์ด๋ฆ„์„ ์ถœ๋ ฅ ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. site.menu์— project ๋ฉ”๋‰ด ์ •๋ณด๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด _config.yml ํŒŒ์ผ์„ ์ˆ˜์ •ํ•ฉ๋‹ˆ๋‹ค. project ๋ฉ”๋‰ด๋Š” category์˜ project์™€ ์—ฐ๊ฒฐ ํ•  ์˜ˆ์ •์ด๊ธฐ ๋•Œ๋ฌธ์—, /category/#/project ๋งํฌ์™€ ์—ฐ๊ฒฐํ•ด์ค๋‹ˆ๋‹ค.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.
.
.
menu:
  home: /
  #categories: /categories/
  about: /about/
  archives: /archives/
  #tags: /tags/
  project: /category/#/project
  #sitemap: /sitemap.xml
  #commonweal: /404.html

  menu_icons:
  enable: true
  KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  schedule: calendar
  tags: tags
  archives: archive
  sitemap: sitemap
  commonweal: heartbeat
  project: pencil-square
.
.
.

config ํŒŒ์ผ ์ˆ˜์ • ํ›„ ๋ฉ”๋‰ด ํƒญ์„ ๋ณด์‹œ๋ฉด ์•„์ด์ฝ˜๋งŒ ์ถœ๋ ฅ๋˜๊ณ  ๋ฉ”๋‰ด์˜ ์ด๋ฆ„์€ ์ถœ๋ ฅ๋˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ๋ฉ”๋‰ด ์ด๋ฆ„ ์ถœ๋ ฅ ๋ถ€๋ถ„์€ ์œ„ ์ฝ”๋“œ์ƒ์—์„œ ``์— ํ•ด๋‹น๋˜๋Š”๋ฐ ํ•ด๋‹น ๋ณ€์ˆ˜์— project ๊ฐ€ ์„ ์–ธ๋˜์ง€ ์•Š์•„ ์ถœ๋ ฅ์ด ์•ˆ๋˜๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ณ€์ˆ˜ ์„ ์–ธ์„ ํ•ด์ฃผ์–ด์•ผ ํ•˜๋Š”๋ฐ, ํ•ด๋‹น ๋ณ€์ˆ˜๋Š” _data/default.yml ์•„๋ž˜์—์„œ ์„ ์–ธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.
.
.
menu:
  home: Home
  archives: Archives
  categories: Categories
  tags: Tags
  about: About
  search: Search
  schedule: Schedule
  sitemap: Sitemap
  commonweal: Commonweal 404
  project: Project
.
.
.

์œ„ ์ž‘์—…๊นŒ์ง€ ๋งˆ์น˜๊ณ  ๋‚˜๋ฉด project ๋ฉ”๋‰ด๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์ถ”๊ฐ€ ๋œ ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด ๋งŒ๋“ค๊ธฐ

๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋จผ์ € tag๋กœ ๋ฆฌ์ŠคํŠธ๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋ฉ”๋‰ด ์•„๋ž˜์— ํ•ด๋‹น ์นดํ…Œ๊ณ ๋ฆฌ ์•„๋ž˜์— ์žˆ๋Š” tag ์ •๋ณด๋ฅผ ๋ฆฌ์ŠคํŠธ๋กœ ๋งŒ๋“ค์–ด ์ถœ๋ ฅํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.
.
.
{% for name_path in site.menu %}
  {% assign name = name_path[0] %}
  {% assign path = name_path[1] %}
  {% assign itemName = name | downcase %}
  <li class="menu-item menu-item-{{ itemName }}">
    <a href="{{ path | relative_url }}" rel="section">
    {% if site.menu_icons.enable %}
      <i class="menu-item-icon fa fa-fw fa-{{site.menu_icons[itemName] | default: 'question-circle' | downcase }}"></i> <br />
    {% endif %}
    {{ __.menu[name] }}
    </a>
    {% for post in site.categories[name] %}
      {% if post.tags %}
        {% assign tag_list = tag_list | concat: post.tags | uniq %}
      {% endif %}
    {% endfor %}
    {% if site.categories[name] %}
        <ul class="dropdown-content" >
        {% for tag in tag_list %}  
          {% assign tag_url_encode = tag | url_encode | replace: '+', '%20' %}
            <li class="dropdown-list">
              <a class = "dropdown-item" href="{{ '/tag/#/' | relative_url | append: tag_url_encode }}">{{ tag }}</a>
            </li> 
        {% endfor %}
        </ul>
      {% endif%}
  </li>
{% endfor %}
.
.
.

๋จผ์ € ํ•ด๋‹น ๋ฉ”๋‰ด์™€ ๋™์ผํ•œ ์ด๋ฆ„์„ ๊ฐ€์ง„ ์นดํ…Œ๊ณ ๋ฆฌ์— ์žˆ๋Š” ํฌ์ŠคํŠธ๋ฅผ ์ „๋ถ€ ๊ฒ€์‚ฌํ•˜์—ฌ ํƒœ๊ทธ๊ฐ€ ์žˆ๋Š”์ง€ ๊ฒ€์‚ฌํ•˜๊ณ , ํƒœ๊ทธ๊ฐ€ ์žˆ์œผ๋ฉด ํ•ด๋‹น ํƒœ๊ทธ๋ฅผ ๋ฆฌ์ŠคํŠธ์— ์ €์žฅ ํ›„์— ๋ฆฌ์ŠคํŠธ๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.

search

์ด๋ ‡๊ฒŒ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑ ํ•œ ํ›„์— ๋ธ”๋กœ๊ทธ์— ์ ์šฉ์‹œ์ผœ๋ณด๋ฉด ์นดํ…Œ๊ณ ๋ฆฌ ์•„๋ž˜ ํƒœ๊ทธ ๋ฆฌ์ŠคํŠธ๊ฐ€ ์ƒ์„ฑ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด์ œ ์ด๊ฒƒ์„ ๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด๋กœ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด CSS๋ฅผ ์ ์šฉ์‹œ์ผœ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฉ”๋‰ด css๋Š” _sass/_common/components/header/header.scss ๊ฒฝ๋กœ์— ์žˆ์Šต๋‹ˆ๋‹ค.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
@at-root %menu-a-hover { border-bottom-color: $menu-link-hover-border; }
&:hover { 
      @extend %menu-a-hover; 
      -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
      transform: scaleX(1); // reveal
    }
  }

  .fa { margin-right: 5px; }
}

.use-motion .menu-item { opacity: 0; }

.dropdown-content {
  display: none;
  position: absolute;
  background-color: darken(#ffffff, 3%);
  min-width: 100%;
  box-shadow: 5px;
  box-sizing: border-box;

  a {
    display: block;
    font-size: 13px;
    line-height: inherit;
    border-bottom: 1px solid $menu-link-border;
    transition-property: border-color;
    @include the-transition();

    @at-root %menu-a-hover { border-bottom-color: $menu-link-hover-border; }
    &:hover { 
      @extend %menu-a-hover; 
    }
  }
}

.menu-item:hover .dropdown-content {
  padding: 0px;
  margin: 0px;
  min-width: 100%;
  display: block;
  // font-size: 17px;
}

.dropdown-list{
  list-style: none;
  position: relative;
}

.dropdown-item {
  padding: 0px;
  margin: 0px;
  font-size: 15px;
}

.dropdown-item:after {
  padding: 0px;
  margin: 0px;
  display:block;
  content: '';
  border-bottom: solid 3px #2b2a2a;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}

.dropdown-item:hover:after { 
  padding: 0px;
  margin: 0px;
  transform: scaleX(1); 
  min-width: 100%;
}

์ €๋Š” css๋ฅผ ์ž˜ ๋ชจ๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์ธํ„ฐ๋„ท์— ์žˆ๋Š” ๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด css๋ฅผ ์ ๋‹นํžˆ ์งœ์ง‘๊ธฐ ํ•ด์„œ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค. ํ•ต์‹ฌ์€ ๋ฉ”๋‰ด์— ์ปค์„œ๋ฅผ ๊ฐ€์ ธ๋‹ค ๋Œ€๋ฉด ์ˆจ๊ฒจ์ ธ์žˆ๋˜ tag ๋ฆฌ์ŠคํŠธ๋ฅผ ๋„์šฐ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ ์ˆจ๊ฒจ์ ธ์žˆ๋˜ tag ๋ฆฌ์ŠคํŠธ๊ฐ€ ๋œฐ ๋•Œ ํฌ์ŠคํŠธ๊ฐ€ ํ•ด๋‹น ๋ฆฌ์ŠคํŠธ๋ฅผ ๊ฐ€๋ฆฌ๋ฉด ์•ˆ๋˜๋ฏ€๋กœ position๊ณผ z-index๋ฅผ ์ ์ ˆํ•˜๊ฒŒ ์„ค์ •ํ•˜์—ฌ ๋ฆฌ์ŠคํŠธ๊ฐ€ ์ œ์ผ ์•ž์— ๋œฐ ์ˆ˜ ์žˆ๊ฒŒ๋” ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

search

์„ค์ •์ด ์™„๋ฃŒ๋˜๋ฉด ์œ„์™€ ๊ฐ™์ด ๋ฉ”๋‰ด ์•„๋ž˜ ํƒœ๊ทธ ๋ฆฌ์ŠคํŠธ๊ฐ€ ๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด๋กœ ํ™œ์„ฑํ™”๋˜๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‚ฌ์ด๋“œ ๋ฉ”๋‰ด ๋งŒ๋“ค๊ธฐ

ํฌ์ŠคํŠธ๋ฅผ ๋ณด๋Š” ์ค‘์—๋„ ๋ฉ”๋‰ด๋ฅผ ๋น ๋ฅด๊ฒŒ ์ „ํ™˜ ํ•  ์ˆ˜ ์žˆ๋„๋ก ์‚ฌ์ด๋“œ ๋ฉ”๋‰ด๋ฅผ ๋งŒ๋“ค์–ด ๋ด…์‹œ๋‹ค. ์ด๋ฏธ next ํ…Œ๋งˆ์—๋Š” ์ปค์Šคํ…€ ํ•  ์ˆ˜ ์žˆ๋Š” side bar ๊ณต๊ฐ„์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ๋‚จ๋Š” ๊ณต๊ฐ„์„ ํ™œ์šฉํ•˜์—ฌ ๋งŒ๋“ค์–ด ๋ด…์‹œ๋‹ค. ๊ฒฝ๋กœ๋Š” _includes/_custom/sidebar.html ์ž…๋‹ˆ๋‹ค.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="side-custom">
{% if site.menu %}
<ul id="sidemenu" class="sidemenu">
  {% for name_path in site.menu %}
    {% assign name = name_path[0] %}
    {% assign path = name_path[1] %}
    {% assign itemName = name | downcase %}
    <li class="side-menu-item" id="side-menu-item-list">
      <a id="side-menu-item" href="{{ path | relative_url }}" rel="section">
        {{ __.menu[name] }}
      </a>
         {% for post in site.categories[name] %}
            {% if post.tags %}
               {% assign tag_list = tag_list | concat: post.tags | uniq %}
            {% endif %}
         {% endfor %}
         {% if site.categories[name] %}
         <ul class="side-dropdown-content" >
         {% for tag in tag_list %}
            {% assign tag_url_encode = tag | url_encode | replace: '+', '%20' %}
                  <li class="side-dropdown-item">
                     <a id="side-dropdown-item" href="{{ '/tag/#/' | relative_url | append: tag_url_encode }}">{{ tag }}</a>
                  </li>      
         {% endfor %}   
         </ul> 
         {% endif%}
    </li>
  {% endfor %}
</ul>
{% endif %}
</div>

๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด๋ฅผ ๋งŒ๋“ค ๋•Œ์˜ ์ฝ”๋“œ์™€ ๊ฑฐ์˜ ์œ ์‚ฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋”ฐ๋กœ ์ถ”๊ฐ€ ์„ค๋ช…์„ ์ ์ง€๋Š” ์•Š๊ฒ ์Šต๋‹ˆ๋‹ค. ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ css๋„ ๊พธ๋ฉฐ์ฃผ๋ฉด ์‚ฌ์ด๋“œ ๋ฉ”๋‰ด๋„ ์™„์„ฑ์ž…๋‹ˆ๋‹ค.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
.sidemenu{
    -webkit-padding-start: 5px;

    li {
        list-style: none;
        padding: 5px 0px 5px 0px;
        margin-bottom: 0px;
        font-size: 15px;
        text-align: left;
        
    }

    a {
        border-bottom: none;
        text-decoration-line: none;
        text-decoration-style: none;
        text-decoration: none;
    }

    a:hover{
        color: #87d9ff;
    }

    .side-menu-item::before{
        display: inline-block;
        vertical-align: middle;
        //padding: 0px 5px 0px 0px;
    }
}
#side-menu-item-list{
    border-bottom: 0.5px solid #333333;
}

#side-menu-item-list:last-child{
    border-bottom: 0px;
}

#side-menu-item{
    font-weight: 400;
    color: #f5f5f5;
    padding-left: 10px;
    padding-bottom: 0px;
}

#side-menu-item:hover{
    color: #87d9ff;
}

.side-dropdown-content{
    padding-left: 20px;
    border-bottom: 0px;
}
.side-dropdown-item{
    height: 15px;
    border-bottom: 0px;
}

.side-dropdown-item::before {
    content: "-";
}

.side-dropdown-item::before:hover {
    color: #87d9ff;
}
1
2
3
4
5
6
7
8
.sidebar {
  .
  .
  .
  overflow: scroll;
  .
  .
  .

๋‹ค๋ฅธ side menu์™€์˜ ํ˜ผ๋™์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด _sass/sidebar ๊ฒฝ๋กœ ์•„๋ž˜์— sidebar-custom.scss ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜์—ฌ ์‚ฌ์ด๋“œ๋ฉ”๋‰ด css๋ฅผ ๋”ฐ๋กœ ์„ค์ •ํ•ด์ค๋‹ˆ๋‹ค. ๋˜ํ•œ ์‚ฌ์ด๋“œ ๋ฉ”๋‰ด๊ฐ€ ๋Š˜์–ด๋‚˜ ์ž˜๋ฆฌ๋Š”๊ฒƒ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๊ธฐ์กด sidebar div๊ฐ€ ์ผ์ • ํฌ๊ธฐ๋ฅผ ๋ฒ—์–ด๋‚˜๊ฒŒ ๋˜๋ฉด ์Šคํฌ๋กค์„ ์ƒ์„ฑํ•ด์ฃผ๋Š” css๋„ ๋„ฃ์–ด์ค๋‹ˆ๋‹ค.

search

Overview๋ฅผ ํ™•์ธํ•ด๋ณด์‹œ๋ฉด ํ”„๋กœํ•„ ์•„๋ž˜ ์ปค์Šคํ…€ ๊ณต๊ฐ„์— ๋ฉ”๋‰ด ๋ฆฌ์ŠคํŠธ๊ฐ€ ์ƒ์„ฑ ๋œ ๊ฒƒ์„ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋งˆ์น˜๋ฉฐ

์ƒ๊ฐ๋ณด๋‹ค ๊ตฌ์กฐ๋ฅผ ๋ถ„์„ํ•˜๊ณ  ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•˜๋Š”๋ฐ์— ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ ค ์˜ˆ์ƒ ํ–ˆ๋˜ ๊ฒƒ ๋ณด๋‹ค๋Š” ํ›จ์”ฌ ๋Šฆ์–ด์กŒ์ง€๋งŒ ๊ทธ๋ž˜๋„ ์›ํ•˜๋Š” ๋Œ€๋กœ ์ ์ ˆํ•˜๊ฒŒ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•์ด ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ถ”ํ›„์— ๋” ์ˆ˜์ •ํ•˜๊ฑฐ๋‚˜ ์ถ”๊ฐ€ ํ•  ์‚ฌํ•ญ์ด ์žˆ์œผ๋ฉด ์ถ”๊ฐ€ํ•ด๊ฐ€๋ฉฐ ๋ธ”๋กœ๊ทธ๋ฅผ ๊พธ๋ ค๋‚˜๊ฐˆ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ์‚ฌ์‹ค ๋ธ”๋กœ๊ทธ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•˜๋Š”๋ฐ ์‹œ๊ฐ„์„ ๋„ˆ๋ฌด ์˜ค๋ž˜ ๋“ค์—ฌ์„œ ๊ทธ๋ƒฅ ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ๋ฅผ ์“ธ๊นŒ ํ›„ํšŒ๋„ ๋งŽ์ด ํ–ˆ์ง€๋งŒ ๋‚˜๋ฆ„ ์›ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๋„ฃ๊ณ  ๋‚˜๋‹ˆ ์—ญ์‹œ ์ง์ ‘ ๋งŒ๋“ค๊ธธ ์ž˜ ํ–ˆ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ญ๋‹ˆ๋‹ค. ๋‹ค์Œ์—๋Š” ๋” ์•Œ์ฐจ๊ณ  ์žฌ๋ฐŒ๋Š” ํฌ์ŠคํŒ…์„ ํ•˜๊ธธ ๋ฐ”๋ผ๋ฉฐ ์ด๋งŒ ๊ธ€์„ ๋งˆ์น˜๊ฒ ์Šต๋‹ˆ๋‹ค.


  1. https://jekyllrb-ko.github.io/docs/structure/ย 

  2. https://shopify.github.io/liquid/ย