깃블로그(9) 카테고리와 태그 구현
카테고리와 태그 개요
: 적용하면 다음과 같이 게시물 내용 하단에 출력된다.
카테고리
- 카테고리는 게시물을 제목이나 유형으로 분류할 때 사용되며, 블로그에 대한 일반적인 주제를 글 묶음을 위해 사용된다.
- 전문가들이 초보 블로거들에게 하는 충고 중의 하나가 블로그에서 다룰 주제를 몇가지로 한정해서 주제를 가진 블로그를 구성하라는 것이다.
- 이 때, 카테고리는 블로그가 다룰 주제들이 될 수 있다.
- 카테고리도 태그와 같이 여러개의 카테고리를 입력할 수도 있다. 이런 경우는 방문자들이 혼동을 느낄 수 있으니 카테고리 구성을 잘 해야 할 것이다.
태그
- 해당 게시물의 세부 정보를 키워드로 설명하는 것이며, 해시태그와 유사한 것으로 볼 수 있다.
- 블로그 게시물에 여러 태그를 추가할 수 있다.
- 보통 블로그 게시물에 1개의 카테고리를 추천하지만 태그에는 이 보다는 더 많게 설정함을 추천한다
카테고리스 페이지 구현하기
: 각각의 모든 카테고리를 모은 카테고리스 페이지를 구현한다.
과정
- 카테고리스 태그스 페이지 주소 설정
- 카테고리,태그 적용한 포스트(post) 생성
- 카테고리스 페이지(page) 생성
- 완료
구현
: 카테고리를 모은 카테고리스 페이지를 구현한다
-
카테고리스 태그스 페이지 주소 설정
/_config.yml
category_archive: type: liquid path: /categories/ tag_archive: type: liquid path: /tags/category_archive, tag_archive 설정 부분을 주석 처리하면 블로그에서 더 이상 카테고리와 태그 목록을 표시하지 않는다.
-
카테고리,태그 적용한 포스트(post) 생성
/_posts/2022-11-01-테스트태그카테고리포스트1.md
--- title: "테스트태그카테고리포스트1" excerpt: "테스트태그카테고리포스트1 입니다." categories: - 동물 tags: - 강아지 - 호랑이 - 토끼 --- # 동물 개요 : 동물에 대한 내용은 생략합니다./_posts/2022-11-01-테스트태그카테고리포스트2.md
--- title: "테스트태그카테고리포스트2" excerpt: "테스트태그카테고리포스트2 입니다." categories: - 동물 tags: - 오리 - 돼지 - 너구리 ---2개의 포스트(게시글)를 생성했다.
-
카테고리스 페이지(page) 생성
/_pages/blg-category-archive.md
--- title: "Posts by Category" layout: categories permalink: /categories/ author_profile: true ---- layout
categories를 지정했다. categories는 모든 카테고리 별로 글을 보여주는 레이아웃 설정이다. - permalink
/categories/을 지정했다 _config.yml 파일에서 category_archive path 설정과 같게 설정해야한다. permalink는 /categories/인데 _config.yml파일에서 category_archive path 설정과 같게 설정해야한다. (_config.yml 카테고리스 페이지를 지정했던 category_archive 항목의 path도 이 경로였다. 즉 카테고리스 페이지는 _config.yml 파일에서 category_archive 옵션에 명시해놓은 설정이 permalink 옵션값과 동일하게 작성해주어야 진정한 카테고리스의 기능일가진 페이지가 되는것이다.)
주의)카테고리가 아닌 카테고리스 이다.
내용에서 permalink 를 보면 categories 를 참조한다. 복수가 붙고 안붙고의 실수를 조심하자.참고로 이 파일을 나는 별도로 직접 생성했다.
기본적으로 구성에 category-archive.md 이라는 파일이 어딘가에 있을텐데 blg 를 붙여서 직접 카테고리스 페이지를 생성했다. 다시한번 강조하지만 파일명은 아무거나 해도 상관없으며 _config.yml 에 정의한 category_archive 옵션의 permalink 경로가 이 페이지의 permalink 랑 동일하면된다. - layout
-
완료
카테고리스 페이지 설정이 완료되었으면 지정된 permalink 주소에 해당하는 https://git.blang.co.kr/categories 페이지에 접속해보자. 모든 블로그 글이 카테고리 별로 보여지는 카테고리스페이지가 잘나온다.
카테고리 페이지 구현하기
: 카테고리스가 모든 카테고리를 보여주는 페이지라면 카테고리 페이지는 특정 1개의 카테고리에 대한 포스트만 보여주는 페이지이다.
과정
- 카테고리스 태그스 표현여부 설정
- 카테고리,태그 적용한 포스트(post) 생성
- 카테고리스 페이지(page) 생성
- 완료
구현
: 특정 1개의 카테고리의 포스트를 모은 페이지를 구현한다 (헷갈릴 수 있다… 포스트가 아니라 페이지다!.. 즉, 특정 카테고리의 포스트들을 모은 페이지다.)
-
위와 동일(생략)
-
위와 동일(생략)
-
카테고리 페이지(page) 생성
/_pages/blg-category-animal.md
--- title: "동물 카테고리만 모은 PAGE" permalink: /categories/동물/ layout: category author_profile: true taxonomy: 동물 ----
- permalink
- categories 하위에 특정 카테고리 이름이다. 내가 작성한 포스트들에서 특정 카테고리 이름이 ‘동물’ 인 것으로 설정 했다.
-
- layout
category를 지정했다. (categories가 아니다!!) layout category는 1개 카테고리 글들을 모두 보여주는 레이아웃이다.
-
- taxonomy
동물을 지정했다. 다른 post파일의 categories가 동물인 post만 모아서 보여준다.
-
-
완료
카테고리 페이지 설정이 완료되었으면 지정된 taxonomy 주소에 해당하는 https://git.blang.co.kr/categories/동물 페이지에 접속해보자. 모든 포스트 중에서 오직 특정 카테고리 1개만 나오는 카테고리페이지가 잘나온다.
추가 내용
카테고리 페이지 목록 UI 변경
: 카테고리 페이지에서 하위에 포스트들이 출력될때 UI를 변경한다.
게시글 목록 줄간격
: 게시글의 줄간격을 수정한다.
/_sass/minimal-mistakes/_base.scss
body {
margin: 0;
padding: 0;
color: $text-color;
font-family: $global-font-family;
line-height: 1.5; <!-- 이 부분을 수정하면 된다. -->
&.overflow--hidden {
/* when primary navigation is visible, the content in the background won't scroll */
overflow: hidden;
}
}
그래서 응용은 어떻게?
: 특정 카테고리를 모은 카테고리페이지를 각각의 카테고리마다 만들어두고..! 다음과 같이 홈페이지 메뉴영역에 달아놓으면 그 메뉴(카테고리)의 게시글(포스트)만 출력될것이다!
Leave a comment