GitHub Pages에 포트폴리오 호스팅하기 - 3) 커스터마이징

본격적인 커스터마이징을 하기 앞서 시안을 만들고 현재 테마의 구조를 파악하기로 했다 

사용된 테마는 아래와 같은 구조로 되어 있었다. 왼쪽을 기준으로 고정시킨 다음, 오른쪽 페이지에 컨텐츠를 띄우는 방식이다. (포스팅 글 클릭시 왼쪽 프로필 페이지는 그대로 유지)

이 구조를 아래와 같이 변경하고 싶었다.

먼저 포스팅한 내용은 기존과 동일하게 메인 페이지에 리스트업 시키되(포트폴리오를 만드는 과정을 포스팅하고 싶었기 때문에) 포스팅 클릭시 왼쪽의 프로필을 상단으로 올리고 포스팅 위치를 가운데로 하고 하단에는 포스팅 리스트를 뿌려준다.

(좌)메인 / (우)포스팅 페이지

 

또 나를 소개하는 페이지(about.md)와 프로젝트 리스트 페이지(works.md)를 만들기로 했다. 이 구조는 기존 구조와 같이 왼쪽에 프로필 페이지를 그대로 두고 오른쪽 페이지만 변경되는 구조로 만들 예정이다.

여기에는 프로필 아래에 해당 페이지를 볼 수 있게 리스트만 간단히 추가하기로 했다.

 

이제 구조를 조금 더 정확히 파악하기 위해 소스를 열어봤다. 첫 글에서 알아본 바로 페이지의 템플릿과 레이아웃을 담당하는 파일이 위치한 폴더는 _includes와 _layouts이었다.

 

_includes

• head.html

_layouts

• default.html
• home.html
• page.html
• post.html

전체적인 페이지의 레이아웃은 default.html이 담당하는 것 같았다. 아래 소스를 통해 유추할 수 있었고, 구글링을 통해 의미를 확인했다.

---
layout: default
---

이 소스는 해당 파일이 _layouts - default.html에 있는 ｛｛ content ｝｝ 영역에 삽입된다는 의미이다.
이 형식은 YAML Front matter 형식으로 작성된 선언부로서 Jekyll에서 포스트나 페이지를 관리하는데 사용하는 YAML 방식의 문서 양식이라고 한다.
예를 들어, page.html 상단부에 위와 같은 형식이 사용된다면 page.html의 내용이 default.html에 있는｛｛content｝｝영역에 삽입되어 보여지게 된다.

｛｛conten ｝｝는 Liquid 태그로 컨텐츠를 해당 영역에 주입하는 역할을 한다. Liquid 태그는 Jekyll에서 템플릿 처리 작업을 위해 사용된 템플릿 언어이다. Liquid 태그는 이후에도 계속 나오기 때문에 천천히 알아가보도록 하겠다.

 

layout:default가 사용된 파일은 home.html, default.html, post.html이다.(default.html 파일에는 head.html 파일이 include 되어 있다)

head.html      
        |  -- default.html -- home.html 
                         | -- page.html
                         | -- post.html

 

프로필 바꾸기

프로필 이미지와 아래로 본인 소개를 할 수 있는 제목/부제목 위치 정도는 쉽게 찾을 수 있었다. 프로필 이미지와 본인 소개 위치 정도는 쉽게 찾을 수 있었다.(개발자도구를 참고하여) 그런데 소스를 보면 site.plainwhite.xxxx로 사용된 변수들을 볼 수 있었다. 낯선 문법이었지만 Jekyll의 디렉토리 구조에서 _config.yml에 사이트 설정 정보가 변수로 구분되어 저장되어 있다고 알고 있었기 때문에 _config.yml 파일에서 확인할 수 있지 않을까라는 추측이 가능했다.

 

① 프로필 이미지 위치
② 제목 위치
③ 부제목 위치

default.html

 

_config.yml 소스를 보니 아래와 같이 plainwhite 내에 name, tagline, portfolio image라는 값들을 확인할 수 있었다. 아마 이 문서에 정의된 변수들은 Map 형태의 키(Key)와 값(Value)으로 이해하면 되지 않을까 싶다.

우선 값을 변경해봤다. 이미지 파일은 assets 폴더에서 바꿔치기 했다.

(현재 사이트에 들어가보니 이 테마를 처음 받았을 때와 이미지가 바뀐 것 같네요)

 

예상한대로 프로필이 변경되었다.

메뉴 페이지 만들기

나를 소개할 페이지와 프로젝트 소개 페이지는 메뉴 형태로 뿌려주면 될 것 같았는데 README.md에 친절히 설명이 나와있었다. _config.yml에 있는 navigation 값을 이용하면 될 것 같았다.

레이아웃을 담당하는 default.html 파일로 이동했다.

nav 태그를 보면 문법은 조금 어색하지만 분명 for문과 if문임을 알 수 있다. 이를 통해 navigation 값이 있는 만큼 <li> 태그를 생성하는 것 같다.

_config.yml navigation에 title, url 값을 입력한 후에 root 경로에 about.md와 works.md 파일을 만들었다.

(html 파일도 가능하지만 이번 기회에 Markdown도 공부하고자 Markdown 파일로 진행했습니다)

_config.yml

진행 후 확인해보면 프로필 아래에 메뉴가 생긴다.

about.md, works.md 파일은 layout: page를 사용했다.

works.md

 

page.html은 아래와 같이 default 레이아웃을 사용한다.

 

별다른 수정작업없이 원하는 모양으로 결과가 출력되었다.

 

포스팅 페이지 변경하기

이제 포스팅 페이지만 바꿔주면 얼추 원하는 모습의 사이트가 완성된다.

포스팅 파일은 _posts 폴더에 위치하는데 기존 포스팅 페이지들은 layout:post를 사용하고 있었다.

 

post.html로 이동했다.

post.html은 default.html 레이아웃을 사용하고 있다. 기존 default.html 파일은 그대로 두고 복사를 해서 원하는 구조로 변경하기로 했다.

post.html

 

먼저 default.html 복사해 default2.html 파일을 만들었다.
소스를 보면 section 태그를 이용해 영역 구분이 되어있는 것을 알 수 있다.

<section class="about"> ... </section>
<section class="content"> ... </section>

“about” 클래스 영역은 프로필 정보들을 담고 있고 “content” 클래스 영역에 컨텐츠가 보여진다. 이 영역들에서 필요한 부분만 가져와 새로운 템플릿을 만들 수 있을 것 같다.

포스팅 리스트는 home.html 파일에서 확인할 수 있었다.

｛ %- if site.posts.size > 0 -% ｝

이 부분이다.

해당 영역을 복사해 <section class="content">...</section> 영역 아래로 위치하게 했다.

 

마지막으로 템플릿을 수정하고 post.html의 layout을 default2.html로 변경해주었다.

(좌)변경전 / (우)변경후

 

참고)

Variables

지킬 블로그에 페이지네이션과 태그 등 추가

---

중간중간 CSS 수정이 필요한 부분은 따로 변경을 해주었습니다. 아래에서 개발자 도구를 이용해 참고해주세요.

eeesnghyun.github.io/