Jooyeun Seo

☕️

Single layout

---
excerpt: "미리보기와 검색 결과에서 나타나는 요약 문구" # 미설정시 본문에서 첫 100단어 자동추출
title: "포스트 제목"
layout: single    # 레이아웃 설정
classes: wide     # 컨텐츠 부분의 가로폭을 넓히는 옵션(목차가 맨 위에 고정됨) 
comments: true    # 댓글 시스템 옵션
share: true       # 소셜미디어 공유 링크 표시 옵션
related: true     # 관련 게시물 표시 옵션
toc: true         # 목차 표시 옵션
categories:       # 카테고리
  - 카테고리1
tags:             # 태그
  - 태그1
  - 태그2
---
  • 보통 ‘왼쪽 사이드바 + 메인 컨텐츠’ 조합으로 사용하는 레이아웃
  • 포스트 형식에 사용됨

toc: true

  • 페이지 내의 제목과 하위 제목을 기반으로 자동으로 목차를 생성하는 옵션
  • 블로그 포스트나 긴 문서에서 사용됨
  • 그 밖의 파라미터
    • toc_label: 목차 제목(defaults: _data → ui-text.yml의 toc_label 값)
    • toc_icon: 목차 아이콘(defaults: Font Awesome의 file-alt 아이콘)
    • toc_sticky: 목차 화면 상단 고정 여부(defaults: false)
  • 포스트 맨 밑에 위치한 소셜미디어 공유 링크 옵션
  • 링크의 순서나 아이콘 및 색상 커스텀 가능

/_includes → social-share.html

<section class="page__share">
  <h4 class="page__share-title">{{ site.data.ui-text[site.locale].share_on_label | default: "Share on" }}</h4>

  <!-- Facebook -->
  ...

  <!-- LinkedIn -->
  ...

  <!-- Add Reddit button -->
  <a href="https://www.reddit.com/submit?url={{ page.url | absolute_url | url_encode }}&title={{ page.title | url_encode }}"
     class="btn btn--reddit"
     onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
     title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} Reddit">
    <i class="fab fa-fw fa-reddit" aria-hidden="true"></i>  <!-- Font awesome 코드 -->
    <span> Reddit</span>
  </a>
  • 버튼 추가 및 순서 변경 예시
  • Font awesome 아이콘 사용

Archive layout

---
excerpt: "미리보기와 검색 결과에서 나타나는 요약 문구" # 미설정시 본문에서 첫 100단어 자동추출
entries_layout: grid  # 아카이브 페이지의 포스트들을 4개의 열을 가진 배열로 나열하는 옵션(defaults: list)
classes: wide         # 컨텐츠 부분의 가로폭을 넓히는 옵션(목차가 맨 위에 고정됨)

<!-- 모든 포스트들을 카테고리별로 분류한 아카이브 페이지 -->
title: "Posts by Category"
layout: categories
permalink: /categories/

<!-- 모든 포스트들을 태그별로 분류한 아카이브 페이지 -->
title: "Posts by Tag"
layout: tags
permalink: /tags/

<!-- 모든 포스트들을 년도별로 분류한 아카이브 페이지 -->
title: "Posts by Year"
layout: posts
permalink: /year-archive/
---
  • single 레이아웃과 거의 비슷한 페이지 레이아웃
  • 목록을 List(defaults) 또는 grid(바둑판형) 형태로 나열할 수 있다.

Same Categories

---
title: "페이지 제목"
layout: archive           # 레이아웃 설정
permalink: /링크제목/       # 네비게이션의 url과 동일
---

{% assign category_name = "카테고리이름" %}

{% assign filtered_posts = site.posts | where: "categories", category_name %}

{% for post in filtered_posts %}
  {% include archive-single.html %}
{% endfor %}
  • 한 페이지에서 특정 카테고리의 포스트만 모아서 보는 방법
  • 왼쪽 사이드바의 메뉴 커스텀에 사용했다.

Same Collections

  1. 원하는 컬렉션의 이름으로 폴더 생성 e.g. /_portfolio
  2. _config.yml의 Archives에 양식 추가 
     collections:
   portfolio:      # collection name
     output: true
     permalink: /:collection/:path/
  3. /_pages에 portfolio-archive.md 추가 
     ---
 title: Portfolio
 layout: collection
 permalink: /portfolio/
 collection: portfolio
 entries_layout: grid
 classes: wide
 ---

 Sample document listing for the collection `_portfolio`.
  4. /_portfolio 안에 포트폴리오용 md 파일 생성
    (파일 layout을 명시해야 오류없이 아카이브 페이지에 나타났다.)

Splash page layout

---
title: "페이지 이름"
layout: splash                              # 레이아웃 이름
permalink: /splash-page/                    # permalink
excerpt: "미리보기와 검색 결과에서 나타나는 요약 문구" # 미설정시 본문에서 첫 100단어 자동추출
intro: 
  - excerpt: 'intro 문구'
feature_row:
  - image_path: 이미지 경로
    <!-- 선택사항 -->
    title: "이미지 밑의 제목"
    excerpt: "제목 밑 문구"
    alt: "대체 텍스트"
    image_caption: "이미지 캡션"
    url: "버튼에 연결된 링크"
    btn_label: "버튼의 텍스트 라벨"
    btn_class: "버튼 스타일"
  - image_path: 이미지 경로
feature_row2:
  - image_path: 이미지 경로
feature_row3:
  - image_path: 이미지 경로
feature_row4:
  - image_path: 이미지 경로
---

{% include feature_row id="intro" %}                     <!-- intro를 출력 --> 

{% include feature_row type="center" %}                  <!-- feature_row를 가운데 정렬로 출력 -->

{% include feature_row id="feature_row2" type="left" %}  <!-- feature_row2를 왼쪽 정렬로 출력 -->

{% include feature_row id="feature_row3" type="right" %} <!-- feature_row3을 오른쪽 정렬로 출력 -->
  • 기본으로 넓은 가로폭을 사용하고 사이드바가 없는 레이아웃
  • Feature blocks를 사용하여 이미지를 왼쪽, 오른쪽, 가운데 정렬할 수 있다.

Home page layout

---
layout: home
classes: wide
entries_layout: grid
---
  • 블로그 왼쪽 상단의 제목을 클릭하면 연결되는 홈페이지 레이아웃
  • _config.yml의 pagination에서 설정한 숫자만큼의 포스트들을 최신 순으로 나열
  • 프로젝트 최상단의 index.html에서 설정

Headers

---
header:
  image: /assets/images/image-filename.jpg  <!-- /assets/images/ 경로의 이미지를 사용할 경우 -->
  image: http://some-site.com/image.jpg     <!-- 외부에서 호스팅된 이미지 주소를 사용할 경우 -->

  video:      <!-- 동영상 자체를 헤더로 사용할 경우 -->
    id:       <!-- 동영상 링크에서 ID 부분만 작성 -->
    provider: <!-- youtube 등 -->
  
  image_description: "A description of the image"               <!-- 헤더 이미지 설명 -->
  
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)" <!-- 헤더 오른쪽 하단에 캡션 추가-->
---
  • 포스트나 페이지의 위에 full-width 사이즈로 들어가는 이미지(상단 네비게이션 바의 밑)
  • YAML Front Matter에 양식 작성

Header overlay

---
title: "포스트 제목"  <!-- 헤더 위로 오버레이됨 -->
excerpt: "요약 문구"  <!-- 헤더의 제목 밑에 표시됨 -->
header:
  overlay_image: 이미지 경로  <!-- 이미지를 배경으로 사용할 경우 -->
  overlay_color: "#333"    <!-- 지정한 색상을 배경으로 사용할 경우 -->
  
  overlay_filter: 0.5                     <!-- 헤더에 불투명도를 조절한 검정색 필터를 오버레이 -->
                  rgba(255, 0, 0, 0.5)    <!-- 색상과 불투명도를 동시에 조절한 필터 오버레이 -->
                  linear-gradient(rgba(...), rgba(...))   <!-- 2색 그라데이션 필터 오버레이 --> 
              
  actions:         <!-- 설정한 url로 이동하는 버튼 추가(여러 개 생성 가능) -->
    - label: "More Info"
      url: "https://unsplash.com"
---
  • 포스트의 title과 excerpt, 작성 날짜 등 미리보기에서 볼 수 있는 정보들을 헤더로 오버레이하는 설정
  • 불투명도는 0과 1 사이에서 조절

Leave a comment

You may also enjoy