disqus 로 작성한 댓글 수를 글 목록 옆에 표현하기

disqus 를 이용해서 댓글 기능을 추가하는 법은 작성했고

disqus 로 작성한 댓글들이 글 목록 리스트에서 표현되게 하려고 한다.

*제목 밑에 4 comments 라고 표현된 것이 해당 글에 달려있는 댓글 수를 표현한다.

​

1. include 용 디스커스 스크립트 파일 (disqus.html) 에서 주석처리 되어있는 부분을 해제해준다

var disqus_config = function () { this.page.url = "{{ site.url }}{{ site.baseurl }}{{ page.url }}"; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = "{{ page.id }}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable };

위의 부분이 주석처리 되어있을 텐데 작동할 수 있게 해제한다.

page.url 은 글을 썼을 때의 URL 주소를 나타내고

page.identifier 는 글의 고유 아이디라고 생각하면 된다.

​

​

2. body 태그 안쪽에 스크립트를 추가한다

- default.html 레이아웃 파일에 밑에 코드를 추가했다.

{% if site.discus-identifier %} <script id="dsq-count-scr" src="//{{ site.discus-identifier }}.disqus.com/count.js" async></script> {% endif %}

​

​

3. 글 목록을 보여주는 레이아웃 파일을 열어서 댓글 표시 코드를 넣는다

{% if site.discus-identifier %} <a href="{{ site.url }}{{ site.baseurl }}{{ post.url }}#disqus_thread" data-disqus-identifier="{{ post.id }}"></a> {% endif %}

​

*skyksit.github.io 의 글 리스트는 include 폴더의 item.html 에서 표현을 하고 있기에

위의 소스를 글 제목 밑에 추가했음

​

<a href="{{ post.url }}"> <h3 class="post-title">{{ post.title }}</h3> {% if site.discus-identifier %} <a href="{{ site.url }}{{ site.baseurl }}{{ post.url }}#disqus_thread" data-disqus-identifier="{{ post.id }}"></a> {% endif %} <p class="post-excerpt">{{ post.excerpt | strip_html | truncatewords: 75 }}</p> </a>

이렇게 추가함

​

​

그럼 끝~

Reference

https://disqus.com/