Minimal Mistakes - 카테고리에서 리스트뷰/그리드뷰 전환 버튼 만들기
Minimal Mistakes 테마로 블로그를 만들면 카테고리는 보통 아래 그림처럼 줄글 목록, 즉 리스트뷰로 보이게 됩니다.
사실 리스트뷰도 크게 불편하진 않지만, 그리드뷰로 썸네일과 함께 글 목록을 보는 것이 더 편할 때가 있는데요.
몇 가지 코드만 수정해주면, 카테고리 글 목록에서 리스트뷰/그리드뷰를 전환해주는 버튼을 추가할 수 있습니다.
1. category.html 수정
먼저 모든 카테고리에 대해서 레이아웃을 바꾼다고 가정하여, /_layout/category.html 파일 전체를 다음과 같이 수정합니다.
2. _archive.scss에 버튼 클래스 추가
위 코드에서 9-10번 줄에 나오는 view-switch와 view_btn 클래스를 /_sass/minimal-mistakes/_archive.scss에 정의하여줍니다. 다른 코드는 건드리지 않고 끝 부분에 아래 코드를 추가해주기만 하면 됩니다.
3. 각 카테고리 md 파일 적절하게 수정
minimal mistakes에서 카테고리 페이지가 md 형식으로 있을텐데, layout: category에서 모든 정보를 불러왔으므로 front matter를 제외하고 나머지 코드는 다 지웁니다. 카테고리 페이지는 /_pages/categories/~~~.md 형태로 저장되어 있을 것입니다.
다음은 내 블로그 카테고리인 “일상”에 해당하는 daily.md 파일 예시입니다. 아래 코드에서 title, permalink, taxonomy를 각자 사용목적에 맞게 변경하면 됩니다. 또한, paginator 등 각자에게 맞는 추가적인 기능도 넣어도 무방합니다.
이 때 주의할 점은, taxonomy 이름은 title과 같게 해야한다는 것입니다. 그 이유는, category.html에서 taxonomy와 정확히 일치하는 카테고리의 글들만 보여주도록 구현했기 때문입니다.
4. 아이콘 이미지 넣기
이제 마지막으로 버튼에 사용될 아이콘을 asset 폴더에 넣으면 끝입니다. 구글링해봤지만 다 loyalty가 있는 이미지밖에 없어서 제가 직접 파워포인트로 만들었습니다.
위 파일들을 저장해서 적당한 폴더에 넣으면 됩니다.
category.html을 위 코드 그대로 작성했다고 치면
/assets/images/list_view_icon.png
/assets/images/grid_view_icon.png
가 맞는 경로와 이름이 됩니다.
5. 썸네일 이미지 추가하기 (옵션)
이로써 그리드/리스트뷰 전환 구현이 끝났습니다.
하지만 포스트를 올릴 때 썸네일을 추가해주지 않으면, 그리드뷰로 전환해도 심심하게 보일텐데요.
좀 더 풍부한 시각적 효과를 위해서, 귀찮지만 썸네일을 포스트의 front matter의 teaser: 부분에 추가해주었습니다. 덧붙여, 썸네일 아래 미리보기로 텍스트의 일부가 나오는데, 이 부분을 따로 설정하고 싶다면 excerpt: 부분에 따로 입력해줄 수 있습니다. 만약 설정하지 않는다면 포스트의 첫 문장이 나오게됩니다.
결과는 다음과 같습니다.
이렇게 minimal mistakes에서 리스트뷰/그리드뷰 전환 기능이 완성되었습니다.
