이전 글과 이어집니다.
머리말
글을 쓰는 사람은 Visual Studiuo Code를 적극 활용하였습니다.
이전 글에서 게시물을 포스팅 하는 방법에 대해서 알아보았다.
이번에는 게시물에 댓글 기능을 추가하는 방법에 대해서 알아보자.
Utterances
Utterances는 주로 웹사이트에 댓글 기능을 추가하는 데 사용되는 오픈소스 라이브러리이다.
Utterances는 GitHub Issue시스템을 활용하여 댓글을 관리하며,
이를 통해 정적 웹사이트에 동적인 댓글기능을 추가할 수 있다.
우리는 다른 라이브러리도 있지만 Utterances를 사용할 것이다.
Utterances 특징
GitHub저장소의 이슈를 댓글로 활용할 수 있기 때문에,
댓글을 관리하고 표시하는데 필요한 백엔드 서버나 데이터베이스를 설정할 필요가 없다.
Utterances 작동 방식
GitHub Issue시스템 활용:Utterances는GitHub Issue를 댓글 저장소로 사용한다.
각 웹페이지에 대한 댓글은 해당 웹 페이지와 연결된GitHub저장소의Issue로 저장됨GitHub로그인을 통한 사용자 식별:
댓글을 작성하려면 사용자는GitHub계정으로 로그인해야한다.
이를 통해 사용자를 식별하고 댓글 작성 권한을 부여홤.- 웹 페이지에 임베드:
Utterances는 간단한 JavaScript 코드를 통해 웹 페이지에 댓글을 임베드함.
이 코드를 추가하면 해당 웹 페이지에 댓글 영역이 생성되고,
GitHub Issue와 연결돼 있는 댓글을 표시.댓글 기능 추가하기
1) blog-comments라는 새로운 Repository 생성
댓글이 달리면 이 Repository Issue 탭에 저장된다.
2) Utterances 연동
https://github.com/apps/utterances
Utterances의 GitHub App 페이지로 이동한다.
우측 상단의 Install 클릭
for these repositories 부분에서 Only select repositories를 선택하고,
방금 생성한 blog-comments를 선택한다.
그리고 Install 클릭
3) Script 생성
이제 생성되는 GitHub Issue를 화면에 표시하기 위해 Utterances 스크립트를 생성할 것이다.
위의 과정을 따랐으면 Utterances 공식 페이지로 이동했을 것이다.
이제 다음 절차를 따라해보자.
이 항목은 저장소를 지정하는 부분이다.
하단의 repo 부분에 [Username]/[Repositoryname] 을 입력하면 된다.
이 항목은 GitHub Issue에 작성된 내용 중 해당 페이지에 관한 댓글만 표시하기 위한 방법을 선택하는 항목이다.
필자는 글의 제목은 바뀔 수 있어도 파일 명은 변하지 않는다고 생각했기 때문에,
Issue title contains page pathname을 선택했다.
다른 기능을 사용해도 문제 없다.
이 항목은 테마를 설정하는 항목이다.
필자의 블로그는 Darkmode를 Default로 사용하고 있기 때문에 비슷한 테마를 선택했다.
자신이 원하는 테마를 선택해도 좋다.
테마까지 선택했으면 아래 Copy 버튼을 클릭한다.
4) _layouts/post.html에 추가
위 코드를 보고 해당 위치에 복사한 Script를 넣으면 된다.
근데 이 부분을 보면
다른 방법으로도 할 수 있는 것 같은데 필자는 위의 방법으로 했다.
방법을 아는 사람이 있다면 댓글 남겨주세요!!!!!!!!!
5) 확인
적용이 잘됐는지 확인해보자.
원하는 부분에 잘 적용된 것 같다.
Repository Issue 탭에도 저장 됐는지 확인도 해보자
굿.
5탄 끝
이번엔 댓글 기능을 추가하는 방법에 대해서 알아보았다.
다음 글에서는 Google Analytics를 연동하는 방법에 대해서 알아볼 것이다.
이상.