[BlogDev] 블로그 댓글 기능 만들기

도입

본 게시물은 공부하는 식빵맘님의 게시물을 통해 배우고 따라하는 과정입니다.

utterances

1. 광고가 없고 가벼운 댓글 플랫폼
2. Github 계정 로그인을 통해 댓글을 달고, 댓글이 달리면 알림이 Github Repository의 Issue로 올라오는 시스템이다.
3. 댓글에 마크다운을 사용할 수 있다.

블로그에 utterances 적용시키기

댓글 Issue가 올라올 저장소를 결정 or 생성

그냥 Github 블로그 Repository에 해도 되지만, 블로그 Repository가 private인 경우에는 새롭게 public 한 Repository를 이용해 댓글 이슈를 관리하면 된다.

만들었다.

utterances를 Install한다.

https://github.com/apps/utterances 의 링크를 통해 설치한다. 설치 시 댓글이 모든 저장소의 Issue들에 업로드가 되게 할지, 아니면 특정 저장소의 Issue에만 업로드되게 할지 선택할 수 있다. 나의 경우 comment repository의 Issue에만 올라가면 되었다. Only Select Repositories를 통해, 댓글 Issue가 올라올 저장소로 선택한 repository를 선택 후 Install 한다.

Install 이후 페이지 작성

형광 표시한 부분들을 입력한다.

repo:

• 위에서 댓글 Issue가 올라올 곳으로 선택한 저장소의 permalink 를 써준다.
• ex) Orchemi/comments

Blog Post - Issue Mapping

• 댓글 이슈를 댓글 달린 블로그 페이지의 어떤 부분과 매핑시킬지 Key를 결정한다.
• 매핑시키므로 Key가 달라지거나 없어지면 Value가 사라지게 된다. 때문에 고유하고 수정을 제일 안 할 것 같은 pathname을 선택하는 것이 좋다.

블로그 코드에 반영

Theme

utterances의 테마를 결정한다. 블로그 톤과 같게 Photon Dark 테마를 일단 선택하겠다. 나중에 블로그 테마색을 조금 수정할 계획인데 그때에는 블로그 코드에서 theme만 바꿔주면 된다. theme 리스트는 아래를 참고하자.

Enable utterances

보통의 웹사이트라던가 테마를 사용하지 않는 경우에는 댓글 구현을 담당하는 html 파일에 해당 스크립트 태그 코드를 그대로 붙여넣으면 된다. 하지만 minimal-mistakes 테마를 사용하는 경우 📃_config.yml 파일에 다음과 같이 코드만 바꿔주면 된다.

• repository
  • 위에서 댓글 Issue 가 올라올 곳으로 선택한 repository의 permalink
• comments - provider
  • utterances를 앞으로 사용할 것이므로 utterances를 입력
• utterances - Theme
  • 위에서 설정한 테마
• utterances - issue_term
  • 위에서 설정한 맵핑 키(pathname)

이후 커밋과 푸시하여 repository에 반영하면 성공이다.

이렇게 댓글을 달 수 있다!

comments repository를 들어가면 이렇게 댓글을 단 것이 Issue탭에서 확인할 수 있다.

Github 메일 알림 설정하기 (메일로 댓글 알림 받기)

Github 메일 알림은 Github Repository Settings의 [Notifications] 섹션에서 이메일을 등록함으로써 설정할 수 있다.

utterances 댓글창의 너비 조절

댓글창이 생긴 것만으로도 감동이었는데 인간의 욕심은 끝이 없다 했던가, 댓글창의 크기가 화면에 꽉 차지 않는다는 것을 알 수 있다. 공부하는 식빵맘님도 같은 문제를 겪었는데, baek.dev님의 댓글 조언을 참고하여 해결했다고 한다. 나 역시 해당 블로그를 정독하고, 식빵맘님이 해결한 방식대로 해결해보고자 하였다.

아래는 baek.dev 님이 댓글로 조언해준 코드이다.

블로그 내 css 파일에 .utterances 속성의 max-width를 760px가 아닌 100%로 덮어씌워주면 오버라이딩된다고 한다. 정확한 코드는 다음과 같다.

.utterances {
  max-width: 100% !important;
}

minimal-mistakes 테마에서는 📃_page.scss에 적용하면 된다.

반영이 잘 되었다!