Jekyll 테마 만들기

Jekyll로 이동하면서 가장 큰 문제점 중 하나는 사용자 대부분이 개발자라는 것이다. 무슨 말이냐하면, Jekyll로 만드는 테마들은 워드프레스처럼 전문 디자이너가 만들어 판매하는 게 있는 것도 아니고 대부분 개발자 스스로가 직접 끄적거려 만든 테마라는 것이다. 그말인즉슨, 나도 내 홈페이지의 테마를 직접 만들어 써야 한다는 것이다.

Jekyll로 만드는 테마는 CSS와 JavaScript를 제외하면 Markdown에서 HTML로 인코딩되는 부분, 레이아웃 부분, 그 레이아웃의 부모가 되는 부분 등으로 나뉘는데, 테마를 사고 팔기는 커녕 테마를 모아놓은 사이트조차 없어서 결국 직접 건드려야만 했다. 굳이 말하면 모아놓은 사이트가 있긴 한데, 테마를 모아놓았다는 느낌보다는 Github Pages로 호스팅하고 있는 Jekyll 블로그 사이트를 모아서 그 사이트들이 저장된 Public Repository로부터 Clone하여 사용하도록 한 정도이다.

사용하기로 한 프레임워크는 요즘 잘나가는 트위터 부트스트랩. 예전에 잠깐 티스토리에서 끄적거려봤었는데 나름 쓸만했었던 기억도 났고, 들인 시간 대비 효율이 가장 좋기로 유명하기 때문이었다.

일단 Fixed Nav Bar를 추가한 다음 Grid로 레이아웃을 나누었다. 일단 CSS는 반드시 필요한 부분이 아니면 기본 Bootstrap CSS 파일을 사용했다. Archive 페이지는 간단하게 리스트로 쭉 나열했고 각 카테고리 페이지에 신경을 좀 썼다. 왼쪽에 썸네일, 오른쪽에 정보가 있는 구조의 포스트 리스트를 만들었는데 이거 만든다고 꽤 시간이 걸렸다.

메인 페이지에는 Carousel을 넣어서 현재 내가 하고 있는 작업 중 가장 중요한 것을 게시할 수 있게 했고 (물론 나중에 바뀌면 이걸 수동으로 바꿔야 하는건 좀 불편하다.) 오른쪽 위젯에는 최근 포스트, 최근 댓글, 관련 포스트 등의 정보를 표시할 수 있도록 List Group을 이용해서 만들었다. 최근 댓글을 건드리는게 좀 어려웠는데 Disqus에서 따로 제공하는 스크립트가 없어서 여기저기서 Disqus API를 사용하는 소스를 모아 수정하는 식으로 작성했다. 최적화가 덜 된건지, 아니면 Disqus가 이 정도 반응 속도인건지 바로바로 뜨지는 않아서 좀 그렇긴 한데 일단 구현은 됐으니 나중에 건드리기로 했다.

아직 구현은 안했는데, 리뷰 페이지는 좀 특별하게 만들어볼 생각이다. 한 제품에 관한 리뷰 글들을 크게 묶어서 표시할 수 있도록 할 생각인데 어떤식으로 하면 좋을지 생각중이다.

카테고리 페이지를 Pagination을 이용해서 만들어볼까 했는데 Jekyll에서 지원하는 Pagination이 루트에 있는 HTML 파일에만 적용된다고 해서 JavaScript로 직접 구현하려고 하는데 아직은 마땅한 아이디어가 없다.

예전보다는 좀더 괜찮아 보이는 블로그로 바뀌고 나니 나름 뿌듯하다.

Jekyll 카테고리를 만들어서 사용한 소스를 모아 포스팅해볼까 하는 생각이 든다.