힘들었던 블로그 태그 시스템 구현

2021-07-03

블로그를 좀 꾸몄지만 뭔가 부족하다

슬슬 3번째니까 요놈의 지정된 문법을 지켜가며 글쓰기도 익숙해질 무렵인데, 뭔가 허전한 느낌이 들었다.

포스트도 되고 링크도 걸어지고 하는데 뭐가 문제지? 라고 생각하면서 이리저리 생각하던 와중, 이걸 분류해서 찾을만한게 거의 없다는걸 알았다.

인스타 같은것도 해시태그를 다는 마당에, 블로그랍시고 만든게 태그 하나도 없었다. 이대로 놔둘수는 없는 노릇이라, 바로 지킬을 통해 돌리는 블로그에 태그 시스템을 넣을 방법을 찾아봤다.

생각대로 될 리가 없지

괜찮은 느낌의 포스트 (링크) 를 발견하곤 바로 따라하기 도전. 결과는 알겠지만 기깔나게 꼬여버린 코드들과 돌아오는 빌드에 실패했다는 깃허브의 메일 뿐.

그렇다고 이 예쁜 태그 구현방식을 포기하고 싶지 않았기에, 다시 내가 뭘 잘못하고 있는지 곰곰이 되짚어봤다.

그래 일단 태그 다는것까진 됐어

앞서 꼬여버렸다고는 했으나 그래도 span으로 태그들을 띄우는 것까지는 성공을 했었다. 그럼 이제 스크립트 부분에서 꼬여서 안 돌아간다는건데…

라고 살펴봤더니 가져와서 끼워맞춘 코드에 $이 들어있다. 어… 혹시 JQuery?

아 그렇지. 라이브러리 잘못 넣어서 삽푼지 얼마나 됐다고 이러냐. 당연히 제이쿼리 같은 너도나도 쓰는건 내장해놨을줄 알고 애꿎은 스크립트만 여기저기 갖다붙이고 있었다.

그렇게 다음과 같이 최신버전 제이쿼리를 받아와서

<script  src="https://code.jquery.com/jquery-latest.min.js"></script>

변수명이나 클래스명들을 조금씩 건드려주니… 돌아간다!

일단 이렇게 블로그 페이지의 태그 필터 기능은 구현에 성공했다.

왜 포스트에선 목록으로 안가지냐

다음은 개별 포스트에 달린 태그들도 목록 페이지로 이동해서 필터가 되게 하는 차례.

앞서 큰 부분을 해결했다고 느꼈기에, 이건 괜찮겠지 싶었는데… 문제가 안 터질 리가 없지.

포스트에서 태그를 누르면 쿼리 문자열을 받아오며 재연결을 하는데까진 성공했지만… 보이는건 아름다운 404뿐.

이걸로 또 한참 머리를 싸매게 되지만, 해결책은 간단했다.

seokgukim.github.io/blog/?tag=html

이렇게 지정되던 경로에서

seokgukim.github.io/blog?tag=html

이렇게 / 하나 빼니까 바로 돌아가더라. 언제 더해졌는진 모르지만, 슬래시 기호 하나때문에 몇시간 구글링하면서 또 삽을 펐다.

역시 컴퓨터가 말 듣게 하는건 쉬운 일이 아니야…