[Github Blog] 댓글 기능 추가하기

Hyeona·2021년 7월 7일
3
post-thumbnail

블로그를 만드는 가장 중요한 건, 정리한 내용을 다른 이들과 공유하며,
모르는 분들은 도와주고, 틀린건 다시 배워가며 업데이트하는 맛이겠죠!

따라서 댓글 기능을 구현하는 건 매우 중요하다고 생각합니다.
저도 오류는 많았지만, 충분히 할 수 있었습니다! 걱정말고 진행해봅시다!

DISQUS 가입하기

댓글로 사용할 수 있는 기능은 disqus를 포함해 discourse, facebook, staticman, staticman_v2, utterances, custem 등이 있습니다.
전 무엇보다 한 번에 댓글을 모아볼 수 있고 세팅과 예제가 많았던 disqus로 시작하였습니다.

DISQUS 에 접속하셔서 회원가입을 완료해주세요. (특별히 어렵지 않아 생략하였습니다.)

  • 무료 계정, URL은 Github Blog URL 작성하기

이후 중요한게 shortname을 찾는 것인데,
이 부분에서 생각치도 못하게 헤매는 경우가 많아서(저도😂)
이를 조금 더 상세히 도와드리도록 하겠습니다.

shortname 찾기

1) DISQUS 메인 화면에서 HOME으로 이동합니다.
image

2) 여기서 Admin으로 이동합니다.
image

3) 좌측 상단 부에 내용을 클릭하면, DISQUS에 연결된 모든 사이트가 나옵니다. 깃허브 블로그 링크를 클릭합니다.
image

4) 원하는 내용을 클릭했을 때의 url가 shartname.disqus.com/admin으로 나옵니다.
따라서 .disqus 앞의 내용을 shortname으로 찾아주시면 됩니다.
image

_config.yml 수정하기

  • 수정 파일 : github.io 폴더 > _config.yml
# _config.yml, 32line 코드
comments:
  provider    : "disqus"                                # comment 처리 사이트 명칭 기재
              # false (default), "disqus", "discourse", "facebook"
              # "staticman", "staticman_v2", "utterances", "custom"
  disqus:
    shortname : "eona1301-github-io"                    # disqus의 shortname 기재
              # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-

# _config.yml, 270line 코드

# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true
      read_time: true
      comments: true                                    # comment 를 주석 해지 후 true로 수정하기
      share: true
      related: true
  
  # _pages
  - scope:
      path: "_pages"
      type: pages
    values:
      layout: single
      author_profile: true

위의 코드를 모두 작성한 후 git push 해주세요!
여기서 중요한 점은 로컬 서버에서는 comment 처리부분이 보여지지 않습니다.
또, git push를 해주셔도 반영되는데에 딜레이가 걸리기 때문에 코드 수정 후 5~10분 정도 기다려주세요.

COMMENT TEST

모든 작업을 마친 후 반영이 된다면,

image

이와 같은 모습으로 볼 수가 있습니다.

image

Test용 댓글을 달아보았습니다.
다시 한번, DISQUS에서 admin으로 확인해보면,

image

이렇게 모아서 볼 수 있어 좋았습니다 :)
댓글 기능은 로컬에서 확인할 수 없고,
git push를 통해서 반영되는 것만 확인할 수 있기에 여유롭게 작업해주시면 좋을 것같습니다!

profile
✍🏻 뭐든 배우면 다 자산이 되겠죠!

0개의 댓글