LIGHTNING⚡️

라이트닝 테마는 모든 레이아웃이 공통으로 사용하는 default.html을 제외하고 총 7개의 레이아웃을 사용할 수 있습니다.

└─ _layouts
    ├─ artwork.html
    ├─ artworks.html
    ├─ cover.html
    ├─ cv.html
    ├─ default.html
    ├─ page.html
    ├─ text.html
    └─ texts.html

artworks.html, texts.html처럼 복수형을 사용하는 레이아웃은 목록을 출력하는 레이아웃입니다. artwork.html, text.html은 작품 한 점, 글 한 편을 담을 수 있는 레이아웃입니다. artworks.html, artwork.html, texts.html, text.html, 이 네 가지 레이아웃은 포스트를 출력하는데 쓰입니다.

한편 cover.html, cv.html, page.html은 개별 페이지를 위한 레이아웃입니다. cover.html은 인트로 페이지를 제작할 때 사용하며, cv.html은 약력 페이지를 제작할 때 사용하는 레이아웃입니다. page.html은 그 외의 페이지를 만들 때 사용할 수 있습니다.

그럼 각 레이아웃에 대해 소개하겠습니다. 각 레이아웃의 속성 표에서 * 표시가 있는 속성은 반드시 필요한 속성이며, 값에 *가 있는 경우에는 그 값 외에 다른 값을 사용할 수 없습니다.

`artwork.html`, `text.html`

아래 표는 artwork.html의 프런트매터에서 사용하는 속성입니다. artwork.html은 마크다운 본문을 사용하지 않습니다.

속성	값
layout*	artwork*
categories*	CUSTOM-CATEGORY	여러개 사용시 [CAT-1, CAT-2]로 입력
author	AUTHOR-NAME
title*	ARTWORK-TITLE
caption*	ARTWORK-CAPTION
image*	IMAGE-URL	/assets/images/CATEGORY-NAME/FILENAME 권장
thumb*	THUMBNAIL-IMAGE-URL	/assets/images/CATEGORY-NAME/THUMBS/FILENAME 권장
order	POST-ORDER	숫자로 입력. 높은 숫자일수록 상단에 출력

artwork.html의 예시입니다. order 속성에 숫자를 지정해주면 높은 숫자를 가진 포스트가 위쪽에 출력됩니다.

---
layout: artwork
categories: artwork
author: Seokwoo Chung
title: now here
caption: now here _ oil on canvas _ 145.5x112.2cm _ 2005
image: /assets/images/artwork/artwork200.jpg
thumb: /assets/images/artwork/thumbs/artwork200.jpg
order: 200
---

text.html의 프런트매터에서 사용하는 속성입니다. text.html의 마크다운 본문에 글의 본문을 작성합니다.

속성	값
layout*	text*
categories*	CUSTOM-CATEGORY
author	AUTHOR-NAME
title*	ARTWORK-TITLE
image	IMAGE-URL
order	POST-ORDER

아래는 text.html의 예시 코드입니다.

---
layout: text
categories: text
author: 김윤경
title: 되찾은 질문
---

정석우의 작업은 최근의 회화가 잊고 있었던 장(場)에 대한 기억을 환기시킨다. ...

`artworks.html`, `texts.html`

artworks.html과 texts.html은 포스트의 목록을 보여주는 레이아웃이며 일반적으로 루드 폴더에 페이지로 생성합니다. 이때 item 속성의 값으로 카테고리를 지정해줍니다.

속성	값
layout*	artwork*
title*	CUSTOM-TITLE
item*	CATEGORY-NAME
permalink*	/PERMALINK
caption*	ARTWORK-CAPTION
navItemTitle	NAVIGATION-ITEM-NAME

navItemTitle 속성으로 이 페이지가 내비게이션 메뉴의 어떤 아이템에 해당하는지 지정할 수 있습니다. 예를 들어 아래의 예시 코드에서는 이 페이지가 내비게이션 메뉴의 artwork.html에 해당한다는 것을 명시하고 있습니다. 이렇게 navItemTitle에 내비게이션 아이템의 이름을 지정해주면 이 페이지를 열었을 때, 내비게이션 메뉴의 해당 아이템의 클래스로 .active가 추가됩니다. .active은 해당 내비게이션 아이템을 밑줄로 꾸밉니다.

---
layout: artworks
title: artworks
item: artwork
permalink: /artworks
navItemTitle: artwork
---

속성	값
layout*	texts*
title*	CUSTOM-TITLE
item*	CATEGORY-NAME
permalink*	/PERMALINK
caption*	ARTWORK-CAPTION
navItemTitle	NAVIGATION-ITEM-NAME

아래는 texts.html의 예시 코드입니다.

---
layout: texts
title: texts
item: text
permalink: /texts
navItemTitle: text
---

`page.html`

page.html은 기본적인 페이지를 만드는데 사용합니다. 카테고리 기능을 활용하지 않으며, artwork.html, text.html의 우측 상단에 출력되는 뒤로 가기 버튼이 없습니다.

속성	값
layout*	page*
title*	PAGE-TITLE
image	IMAGE-URL	/assets/images/IMAGE-FILENAME

`cover.html`

cover.html은 포트폴리오 웹사이트의 첫 화면에 대표 이미지를 노출시키고 싶은 경우에 주로 사용할 수 있는 레이아웃입니다.

속성	값
layout*	cover*
title*	ARTWORK-TITLE
image*	IMAGE-URL	/assets/images/IMAGE-FILENAME
caption	ARTWORK-CAPTION

아래는 cover.html의 예시 코드입니다.

---
layout: cover
title: ~
image: /assets/images/cover.jpg
permalink: /
---

`cv.html`

cv.html은 _data/author.yml의 데이터를 활용합니다. _data/author.yml의 exhibitions은 cv.html의 전시 약력 부분에 출력됩니다. _data/author.yml의 자세한 내용은 라이트닝 공식 문서의 데이터의 종류와 사용법를 참고하세요.

속성	값
layout*	cv*
title*	CV-TITLE
permalink*	/cv	/cv 권장
navItemTitle*	cv

아래는 cv.html의 예시 코드입니다.

---
layout: cv
title: CV
permalink: /cv
navItemTitle: cv
---

artwork.html, text.html

artworks.html, texts.html

page.html

cover.html

cv.html

`artwork.html`, `text.html`

`artworks.html`, `texts.html`

`page.html`

`cover.html`

`cv.html`