본인은 현재 WHATATHEME이라는 jekyll 테마를 적용해서 사용 중이다.
그러나 해당 테마의 불편했던 점은 바로 포스팅을 하면 각 카테고리별로 글이 정리되지 않아서 블로그 정리 팁, 이런저런 딥러닝 페이퍼 리뷰 그리고 소소한 일기장같이 구분이 잘 안된다는 점이었다.
그래서 아예 그냥 슥 뜯어고치려고 했다. 기존 블로그 테마에서 어떤 식으로 코드를 바꾸었고, 해당 내용이 블로그 레이아웃에 반영이 어떻게 되었는지 확인해보겠다.
기존 navigation bar는 다음과 같이 구성된다.
그런데 잘 보면 MORE에는 프로젝트가 들어가있고, BLOG를 누르면 이동되는 곳은 모든 포스팅이 한꺼번에 나오고 해서 원하는 글을 한번에 나타내기 힘들었다.
그래서 카테고리 만드는 이런저런 블로그를 찾아봤는데, 다들 기존 테마를 조금 바꾸거나 아니면 아예 페이지를 새로 구성하는 형태로 하는 편이다.
사실 그런 방식도 크게 보면 나쁘진 않았는데, 본인은 그냥 현재 테마를 유지하는 형태에서 살짝만 수정하고 싶었기 때문에 그냥 내 방식대로 바꾸기로 했다.
그래서 최종적으로 바꾸고 싶었던 네비게이션 바 구조는 다음과 같이 잡았다.
이 두 내용을 적용하기 위해 navbar.html을 수정했다.
위의 코드가 기존에 있던 navbar.html코드 중 일부이다. 잘 보면 dropdown.html이라고 되어있는 부분이 MORE가 되고, 나머지는 순서대로 쭉 있는 녀석이다.
내가 원하는 레이아웃으로 구성하기 위해 해당 코드를 다음과 같이 바꾸고,
이제 dropdown을 수정해야한다. 왜냐하면 project를 빼내고 거기다가 category로 채워넣을 것이기 때문.
코드는 위와 같이 수정하였는데, 대충 내용을 요약하자면 category에 해당되는 sitepage url만 dropdown 링크에 띄우겠다는 것이다.
HTML 코드에서 조건문이나 반복문을 쓸 때는 그냥 저렇게 꺾쇠랑 %를 사용한다고 알아두면 좋을 것 같다.
여기까지는 쉬운데, 그럼 이제 저 category 링크들을 만들어줘야한다.
참고로 링크를 만드는 건 jekyll에서 category 이름을 가지는 디렉이 하나의 하위 집합이 되고, 그 내부에 있는 md 파일로 정의를 해줘야한다.
가장 중요했던 건 category 별로 post를 어떻게 나열할지에 대한 부분이었는데, 일반적인 포스팅 레이아웃을 그대로 사용하기로 결정했다. 왜냐하면 포스팅할 때 각 포스팅 내용에 맞게 image를 가져오는데, 해당 테마를 유지하고 싶었다.
대강 이런 느낌으로 만들기 위해 blog.html 테마를 확인해보면 쭉 돌면서 모든 post를 다 including한다. 여기서 blog-card.html이 바로 각 포스트가 어떤 식으로 visualize되는지에 대해 정의된 소스라고 보면 된다.
암튼 그냥 여기에 내가 원하는 category에 대해서만 조건화해주면 되기 때문에, 다음과 같은 방법을 사용했다.
기존의 포스팅에서는 그냥 다음과 같이 타이틀, 태그 등등 달았었는데
---
title: 제목
layout: post
description: Test post
post-image:
use_math: true
tags:
- Beginner
- Blog
- AI
- Deep learning
---
여기에 추가적으로 각 포스팅의 카테고리명을 key value로 주는 것이다.
---
title: 제목
layout: post
description: Test post
post-image:
use_math: true
category: github blog
tags:
- Beginner
- Blog
- AI
- Deep learning
---
모든 포스트에 이렇게 라벨링을 해주면 코드에서 읽어올 수 있기 때문에 만약 “github blog”에 대한 포스트만 리스트업하는 코드를 짜고 싶다면,
이런 식으로 해주면 된다. 그리고 실제로 링크를 연결해주기 위해서 폴더를 다음과 같이 구성해주고,
각 내용은 원하는 레이아웃을 따라가게끔 해주면 된다. 예를 들어 본인은 ‘PAPER’라는 카테고리와 ‘GITHUB BLOG’라는 카테고리를 실제로 시각화하기 위해 title을 각각 설정해주고,
GITHUB BLOG는 ‘github blog’라는 카테고리를 가진 포스트만 리스트업하는 html 파일이랑 연결,
PAPER는 ‘paper review’라는 카테고리를 가진 포스트만 리스트업하는 html 파일이랑 연결.
이런 식으로 마무리하였다. 더 필요한 카테고리가 발생한다면 이를 추가해야하고, 만약 카테고리를 string 형태가 아니라 리스트 형태로 받아서 그에 맞게끔 포스팅 정렬을 해야한다면 이건 추후에 해결할 수 있는 문제므로 잠시 남겨두었다.
실은 본인이 정리정돈 잘 못하는 INFP라 좀 귀찮았던 것도 사실임.
결과물은 다음과 같다. 사실 이 글은 로컬에서 확인하면서 바로 작성하고 있는 중이라 깃허브에 push는 아직 안해놓음. 뭐 이 글이랑 같이 push하면 알아서 적용되지 않을까 싶다.
원했던 레이아웃 그대로 나오고, 적용된 카테고리들 모두 잘 나온다. 각각 들어가보면,
옹기종기 알아서들 잘 모여있는 걸 확인할 수 있다. 기특한 것들… 다음에는 카테고리별로 레이아웃을 좀 꾸며보거나 그래야겠다.