[Django] Blog 앱 확장 - 댓글 달기

장고 1.8 버전부터는 comments 기능을 제외하고

이보다 좀 더 유연하고 확정성 높은 오픈소스 플랫폼인 Disqus 앱을 사용하는것을 권장한다.

 

Disqus 앱은 별도의 테이블을 정의하지 않으므로 테이블 관련 변경 사항은 없다. 또한 댓글 처리는 Disqus앱에서 자바스크립트로 처리하기 때문에 댓글 관련 URL 변경되는 사항은 없다.

setting.py 설정을 위하여 DISQUS 홈페이지 설정을 먼저 한다.

https://disqus.com/

Disqus – The #1 way to build your audience

로그인 후

여기까지 진행했다면 DISQUS홈페이지에서 설정은 마친것이다.

 

setting.py 수정

# mysite/setting.py
DISQUS_SHORTNAME = 'Django-Web-Programing' #DISQUS 설정시 생성한 WEB-SITE NAME
DISQUS_MY_DOMAIN = 'http://192.168.56.101:8000' # 현재 장고 사이트 URL

views.py 수정

from django.conf import settings

class PostDV(DetailView):
    model = Post

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['disqus_short'] = f"{settings.DISQUS_SHORTNAME}"
        context['disqus_id'] = f"post-{self.object.id}-{self.object.slug}"
        context['disqus_url'] = f"{settings.DISQUS_MY_DOMAIN}{self.object.get_absolute_url()}"
        context['disqus_title'] = f"{self.object.slug}"
        return context

templates 수정

#post_detail.html
{% extends "base.html" %}

{% block title %}post_detail.html{% endblock %}

{% block extra-style %}
<style>
.post-body {
    width: 80%;
    margin: auto;
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    font-size: 16px;
}
</style>
{% endblock extra-style %}

{% block content %}
<div class="post-body">

    <h2>{{ object.title }}</h2>

    <p>
        {% if object.get_next %}
        <a href="{{ object.get_next.get_absolute_url }}" title="View previous post">
            <i class="fas fa-arrow-circle-left"></i> {{ object.get_next }}
        </a>
        {% endif %}

        {% if object.get_previous %}
        | <a href="{{ object.get_previous.get_absolute_url }}" title="View next post">
        {{ object.get_previous }} <i class="fas fa-arrow-circle-right"></i>
        </a>
        {% endif %}
    </p>

    <div>{{ object.modify_dt|date:"j F Y" }}</div>
    <br>

    <div>
        {{ object.content|linebreaks }}
    </div>

    <br>
    <div>
        <b>TAGS</b> <i class="fas fa-tag"></i>
        {% load taggit_templatetags2_tags %}
        {% get_tags_for_object object as "tags" %}
        {% for tag in tags %}
        <a href="{% url 'blog:tagged_object_list' tag.name %}">{{tag.name}}</a>
        {% endfor %}
	&emsp;
        <a href="{% url 'blog:tag_cloud' %}"> <span class="btn btn-info btn-sm">TagCloud</span> </a>
    </div>

    <br>
    <div id="disqus_thread"></div>

</div>
{% endblock %}

{% block extra-script %}
<script>
/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION
*  BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT:
*  https://disqus.com/admin/universalcode/#configuration-variables*/

var disqus_config = function () {
    this.page.identifier = '{{ disqus_id }}';
    this.page.url = '{{ disqus_url }}';
    this.page.title = '{{ disqus_title }}';
};

(function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://{{ disqus_short }}.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
{% endblock %}

정상적으로 댓글이 작동되는것을 확인할수있다.