github.io 블로그 만들기(3) - comment 기능 추가하기

post 작성할 때 

---
layout: post
title: "2021-01-15-TIL"
date: 2021-01-15
excerpt: "오늘 한 일!!"
tags: [TIL, BOJ]
comments: true
---

이를 추가해야한다.

 

comments 기능을 false로 해두면 비활성화 되어 게시글에 아무런 내용이 표시되지 않는다.

하지만 true로 두면 활성화가 되어 댓글 기능이 활성화가 될 것인데!

true를 하고 들어가보면 disqus~~ 머라 하면서 내용이 안뜬다.

구글링을 해보니 disqus를 가입하고 등록하고 해야하더라..

 

하지만 우리는 댓글을 github과 연동하여 작성할 수 있게끔 만들면 되기 때문에 굳이 disqus를 가입할 필요가 없었다.

 

 

참고: https://baek.dev/post/4/

utterances 를 이용하자.

이를 이용하면 입력된 댓글들이 내 깃헙에 issue로 등록이 된다.

알람이 오니 댓글 확인에도 용이하다.

 

먼저 댓글이 입력될 새 repository를 생성하자.

일반적으로 blog-comments라고 많이 짓는다고 하니 나 또한 blog-comments라 지었다.

그 후 utterances.json file을 생성한다.

내용은 다음과 같다.

// utterances.json
{
  "origins": ["https://zzu-h.github.io"]
}

저 내용은 자신의 블로그 페이지 메인 주소를 입력한다.

 

다음은 utterances app을 깃헙 계정에 추가한다.

github.com/apps/utterances 로 이동하여 app을 추가한다.

기능은 자신이 만든 블로그 repository에 추가를 한다.

 

그 후 input란에 신규로 만든 repository를 입력한다.

다음 포스팅과 깃허브 이슈를 어떻게 맵필할 것인지 선택을 하는데 난 첫번째걸로 선택을 하였다.

여기까지 하면 아래에 script 코드가 생성이 되어있다.

자신이 테마도 선택할 수 있으니 원하는 코드를 선택하길..

이 코드를 복사하여 다음의 이미지와 같이 붙여넣는다

기존 코드는 필요없으니 삭제하고 복사한 코드를 붙여 넣는다.

여기까지 저장하고 자신이 포스팅한 글에 들어가면 댓글 기능이 생성되었다.

 

+ 추가

다음과 같은 파일 내에도 추가를 해주어야 post글에 댓글 겹침 현상이 일어나지 않는다.

여기 파일을 찾아서 온다.

위 복사한 script 내용을 disqus section 내에 포함시켜준다.

 

이렇게 해주어야 아래 댓글 div에 제대로 추가된다.

 

+ 추가

이렇게 하니 댓글 겹침 현상이 없어지는 것이 아니라 댓글창이 두개가 된다.

disqus_comments.html파일에 있는 복사했던 script내용을 깔끔하게 지우고 commint한다.

기다리니 정상작동한다.