[Jekyll] Jekyll에 댓글 추가하기(Disqus)
Jekyll을 이용하여 만든 블로그의 포스팅에 댓글을 추가하는 방법 소개
Jekyll 블로그는 기본적인 layout만을 제공해 주기 때문에 블로그 포스팅에 댓글을 달 수 있도록 만들기 위해서는 추가적인 작업이 필요하다. 댓글창을 만들기 위해 Disqus를 사용할 것이다.
1. Disqus 계정 만들기
첫번째로 Disqus에 접속하여 회원가입 후 등록을 한다. 등록 후 Main 페이지에서 우측 상단의 톱니바퀴를 누르면 나오는 메뉴 중 Setting으로 이동 후 다시 Add Disqus To Site로 이동한다. 페이지 이동 후 페이지 가장 아래쪽으로 이동하면 GET STARTED를 눌러 블로그 명 및 URL을 등록한다.
2. Universal Code 복사하기
등록을 마친 후 Setting의 Installation page로 이동 후 platform을 선택한다. Jekyll에 추가하기 위해서는 Universal code를 선택한다. 이제 1번에 있는 코드를 복사하여 Jekyll의 _layouts/post.html 파일에 추가해준다.
3. Layout/post.html 및 Config 파일 수정
_layouts/post.html 파일을 열고 <article> 블락 사이에 복사한 내용을 아래 코드에서 <insert your code> 부분에 넣어준다.
---
layout: default_post
---
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header class="post-header single-post-header" style="background-image:url('{{ site.url }}{{ page.image }}')">
<div>
<h1 class="post-title single-post-title" itemprop="name headline">{{ page.title }}</h1>
<p class="post-meta single-post-meta">
<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date_to_long_string }}</time>
•
{% assign words = page.content | number_of_words %}
{% if words < 360 %}
1 min
{% else %}
{{ words | divided_by:180 }} mins
{% endif %}
read
</p>
</div>
</header>
<div class="wrapper">
<div class="single-post-summary">
<code> {{ page.summary }} </code>
</div>
<div class="post-content single-post-content" itemprop="articleBody">
<code> {{ content }} </code>
</div>
{% if page.comments %}
<-- add your code here -->
{% endif %}
</div>
</article>
포스팅에서 comment활성화 여부를 설정하기 위해서 위의 예의 주석으로 되어 있는 {% if page.comments %} {% endif %} 이 부분을 추가해준다. 추가할 때 앞 뒤로 중괄호({})를 넣어준다. 다음으로 _config.yml 파일을 열어 마지막에 다음의 코드를 추가한다.
disqus_shortname: myblog(등록한 본인 블로그 이름)
4. Post에 명령 추가
마지막으로 포스팅을 할 때 포스팅 .md file의 맨 위에 comments: true 를 추가해 주면 포스팅에 댓글쓰기가 다음과 같이 활성화 된다.
