Github로 블로그 만들기 6편 - 본문의 제목 form 수정

💡 liquid언어를 코드블럭에 넣으면 깨지는 현상 때문에 코드를 캡쳐해서 올렸다. 복붙을 원하는 경우라면 아래 링크(내 깃허브 소스트리)로 들어가서 복붙하면 된다!

heestogram single.html 링크

minimal-mistakes 테마는 보다시피 제목 부분에 제목과 소요시간만 덩그러니 제공된다. 이 부분에 해당 게시글의 게시날짜, 수정날짜, 카테고리, 태그를 만들어보고자 한다.

_layouts 폴더 -> single.html

_layouts 폴더에는 각종 문서들이 블로그에서 어떻게 표현될지를 나타내는 문서들의 모임이다. 우리가 게시글을 포스팅할 때 머리말의 layout은 default값이 single이다. 때문에 _layouts 폴더의 single.html 파일을 건드려주는 것이다.

class="page__inner-wrap"부분을 보면 header 정보가 나와있다. 위 코드에서 주석처리 된 부분은 소요시간을 나타내는 부분인데, 나는 소요시간을 빼고 싶어서 주석처리를 했다.

게시날짜, 수정날짜 추가하기

위 코드에서 게시날짜와 수정날짜를 추가하는 코드를 발췌했다. 우리가 글을 포스팅할 때 머리말에서 last_modified_at과 date 요소를 설정해주는 것을 기억할 테다. 아래 코드는 그 요소들이 존재한다면 해당 아이콘과 함께 날짜를 출력해주는 if 조건문이다.

카테고리, 태그 추가하기

위 코드에서 카테고리와 태그를 추가하는 코드를 발췌했다. 우리가 글을 포스팅할 때 머리말에서 categories과 tag 요소를 설정해주는 것을 기억할 테다. 아래 코드는 그 요소들이 존재한다면 해당 아이콘과 함께 날짜를 출력해주는 if 조건문이다.

코드를 모두 추가해줬다면 위 사진처럼 바뀐다! 아주 마음에 든다.