[GitHub Blog]깃허브 블로그 만들기 - tags
11 Aug 2023 - juno
깃허브 블로그에 태그(tags) 추가하기
구현하고 싶은 것
3과 4는 순서가 무관하다.
1. 게시글에 들어갔을때 tag 내용 보이게 하기
기존 내 게시글은 이렇다.
나는 날짜 밑에 tags 를 추가 하고자 한다.
- 먼저 각 게시글의 머릿말(front-matter)에 tags 라는 속성?을 추가 해준다.
빨간줄과 같은 형식으로 tag들을 지정 해주면 된다. 공백을 기준으로 태그들을 구분하고 있다.
- 게시글을 보여주는 레이아웃인 _layout/post.html 을 수정해주어야 한다.
위 사진에서 빨간 부분의 코드를 추가 해줬고 노란밑줄로 그어진 부분의 코드로 태그 이미지를 추가해 줬다.
만약 page에 tags가 지정 되어있다면 for문을 통해 그 태그들을 출력하는 코드이다.
- 결과
게시글 속에 tag가 잘 생성되었다.
2. 네비게이션의 Post항목에 들어 갔을때 게시물의 제목 옆에 tag가 보이게 하기
- 이번엔 junodevv.github.io/post.html(블로그 root 파일 속의 post.html)에서 코드를 수정해준다.
기존 코드와 화면
변경된 코드와 화면
3. tags 를 모아놓은 페이지 생성하기 (tags.html)
tag들과 해당tag를 포함하고 있는 게시글을 나열하는 tags.html을 만들고자 한다.
먼저 모든 post의 tag들을 추출하고 그걸 전역변수처럼 만들기 위해서 _includes/tag.html을 만들어 tag라는 변수로 사용할 수 있도록 만들었다.
참고로 나중에 4번에서 aside 부분에서도 이 변수를 사용하기 위해 전역 변수처럼 만들었다.
- _includes/tag.html
위의 코드는 reference의 깃허브 블로그 만들기5 - 태그 기능 구현 를 참고했다.
참고 liquid문법 문법 참고사이트1, 문법 참고사이트2
join : 배열을 문자열로 바꾸기
contains : 좌항의 String Array에 우항의 String이 원소로 있는지. 있으면 true, 없으면 false.
split: 문자열을 배열로 만들기
sort: 배열 정렬하기(대문자 > 소문자, a > z)
unless: if 의 반대, ~하지 않으면
slugify: 문자열을 소문자 URL로 변환 해주는 필터
위 파일을 생성함으로써 다른 파일에서
{% include tag.html %} 를 사용하여 tag라는 변수를 사용할 수 있게 된다.
-
이번엔 (root)junodevv.github.io/tags.html 파일을 만들어 위의 tag 변수를 사용해 tags 페이지를 만들었다.
-
(root)junodevv.github.io/tags.html 코드와 구현된 화면
해당 코드도 reference의 깃허브 블로그 만들기5 - 태그 기능 구현 를 참고했다.
4. main 화면에서 Category 아래에 tags 목록을 생성하기
여기서 빨간 부분에 모든 tags들의 리스트를 추가하고자 한다.
3번 과정에서 tag라는 변수를 전역으로 사용할 수 있도록 만들었으니 _includes/main.html에 적용하여 나의 default.html의 aside 부분에 tags의 list를 추가할 수 있다.
- _includes/main.html 코드와 구현된 화면
참고로 여기서 노란부분은 ~(root)/tags.html의 href=”#{{tag | slugify}}” 와 연결되게 한 부분이다.