개요

본격적으로 탐구를 해보니, 플러그인이 꽤나 잘 만들어져있는게 자유롭게 커스텀이 가능하도록 디자인됐다.^[1]
여기에서 내가 생각하는 사항들을 꽤나 많이 구현할 수 있을 것으로 보인다.
그래서 먼저 여기에서 제공해주는 기능들을 이용해서 개발을 진행해본다.

댓글 구현

댓글은 위에서도 언급했듯이, 깃헙의 기능을 이용할 것이다.
이중에 유명한 것이 바로 giscus이다.^[2]
내 블로그 레포 자체는 프라이빗으로 둘 예정이라, 댓글만을 위한 공개 레포를 하나 만들겠다.

레포지토리 설정에 들어가서 discussions 부분을 활성화 시켜주어야 한다.

조금 고민인 지점이 있다.
파일 경로가 바뀌면 페이지 경로에도 반영된다.
그런데 이때 경로를 기준으로 댓글을 달게 하면 나중에 내가 파일 위치를 바꿀 때 자동으로 추적이 되지 않는 이슈가 있을 것 같다.
그렇다고 타이틀을 이용하기에는 타이틀이 중복되는 것들이 많을 가능성이 있다.

<div class=giscus></div>
<script src="https://giscus.app/client.js"
        data-input-position="bottom"
</script>

모든 커스텀을 마치고, 이것만 푸터에 추가해주면 될 것 같다.

디지털 가든 플러그인에서는 이걸 쉽게 할 수 있도록 공간을 제공해준다.

쉽게 성공했다..
이게 뭐라고 여태 안 했지 ㅋㅋ

처음에는 footnote에 넣었다가, 큰 화면으로 보니 내가 생각했던 생김새가 아니라 afterContent로 옮겨주었다.

해당 내용은 레포 discussions에 들어가는데, 전체 url을 제목으로 해서 달리는 것이 확인된다.
역시 파일 경로가 바뀌면 댓글이 유지되지 않을 것이라는 것은 감안해야 한다.

커스텀 헤더 넣기

다른 코드들을 살짝 보니 어떤 변수를 쓰고는 있는데 어디에서 가져오는 건지를 도통 모르겠어서, 직접 일단 페이지에 출력해서 확인해본다.

위 방법을 썼던 것은 console.log로 데이터가 확인이 안 돼서 였는데, 한편 생각해보니 빌드되는 시점에 로그가 찍히긴 할 것 같았다.

https://github.com/uroybd/topobon/blob/main/src/site/_data/dynamics.js

다른 방법

관련한 설정 역시 제공되고 있었다.^[3]
탐구를 계속 해봤는데, markdown it를 통해 html로 변환된 이후에 eleventy가 서버로 띄워준다.
내가 원하는 프론트매터가 들어가게 하기 위해서는 html로 변환되기 이전에 작업을 해야할 것 같은데.. 이걸 직접 걸러내는 것이 꽤나 귀찮겠다는 생각이 들었다.
그래서 찾아보던 차에 마침 자료를 찾게 됐다.

관련 문서

참고