전체 페이지뷰

2017년 1월 11일 수요일

Blog 앱, 댓글:django-disqus

django-disqus를 이용해 댓글 달기 기능을 구현합니다.

UI는 disqus의 디폴트를 그대로 사용할 예정이며, 별도의 테이블이나 URL변경사항은 없습니다.

disqus를 이용하려면 먼저 disqus홈페이지에 가입해야 합니다.



https://disqus.com/  로 방문해 봅니다.


우측 상단의 Get Started를 누르면 가입이 가능합니다.
가입 방식은 여러 가지가 있는데 저는 구글 계정으로 가입했습니다.
가입이 완료되면 다음의 화면이 나타납니다.
책과는 조금 다른데 최근에 바뀌었나 봅니다.


"I want to install Disqus on my site"를 눌렀습니다.
그러면 Register화면이 나타납니다.

제 이름(지웠습니다)이 위에 나타나고, 웹사이트 이름, 카테고리를 선택한 후 Create Site를 누릅니다.

Let's get started!를 누릅니다.

그러면 다음과 같이 플랫폼을 정하라는 화면이 나타납니다.


해당 사항이 없으므로 일단 선택하지 않고 좌측에 있는 "3.Configure Disqus"를 눌러 나타나는 화면에서 "Complete Setup"을 눌러줬습니다.



나타나는 화면이 책에 있는 것과 많이 다르네요. 당황했습니다.



그러나  하단 톱니바퀴 부분을 눌러보면...


여기에 제가 설정한 사이트의 shortname이 나타납니다. 이 이름은 settings.py에 등록해야 하므로 기억해두어야 합니다.
책에서 나온 부분과 달라진 부분이 있어 잘된 것인지 자신은 없지만 일단 코딩 작업으로 들어가 보겠습니다.


settings.py

(myvenv) D:\myDjango\mysite>subl settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bookmark.apps.BookmarkConfig',
    'blog.apps.BlogConfig',  
    'tagging.apps.TaggingConfig'
    'disqus',   #추가
    'django.contrib.sites',    #추가
]
DISQUS_WEBSITE_SHORTNAME = 'djangostudy-1'    #추가
SITE_ID = 1 # 추가
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
cs

지금까지 블로그앱이나, 태그 기능들을 INSTALLED_APPS에 추가할 때는 주로, 설치하고자 하는 앱의 소스 디렉터리에 존재하는 앱 설정 파일인 apps.py파일이 있어서 그 안에 정의되어 있는 클래스를 등록해주었습니다.
그런데 disqus의 경우에는 apps.py 파일이 존재하지 않습니다. 따라서 그냥 앱 폴더명인 'disqus'를 추가해 줍니다. 그리고, 사이트의 식별을 위해 장고 내장 앱인 dajngo.contrib.sites를 추가했습니다.

또, 아까 기억해 두었던 shortname을 웹사이트 식별자로 등록하고 SITE_ID를 지정해 줍니다.

모델 코딩

disqus앱에는 테이블 정의가 없으므로 DB에 테이블을 변경할 이유가 없습니다만,
django.contirb.sites는 테이블이 있어서 이를 DB에 반영합니다.
url, 뷰는 변화하는 것이 없으므로 바로 템플릿으로 넘어갑니다.

템플릿 코딩

댓글은 우리 DB에 저장되는 것이 아니라 DISQUS 서버에 저장됩니다. 우리가 하는 일은 그 댓글을 받아와서 화면에 보여주는 기능을 구현하기만 하면 됩니다.
따라서 post_detail.html과 base.css만 수정합니다.

(myvenv) D:\myDjango\blog\templates\blog>subl post_detail.html

<div>
<b>TAGS: </b>
{% load tagging_tags %}
{% tags_for_object object as tags %}
{% for tag in tags %}
<a href="{% url 'blog:tagged_object_list' tag.name %}">{{tag.name}}</a>
{% endfor %}
<a href="{% url 'blog:tag_cloud' %}"><i>[ TagCloud ]</i></a>
</div>
<!-- 상단 동일 -->
<!-- 여기서부터 추가 -->
<br/>
<div>
{% load disqus_tags %}
{% disqus_show_comments %}
</div>
<!-- 여기까지 -->
</div>
{% endblock %}
cs

네 줄만을 추가합니다.
먼저 공백 줄을 하나 지정하고,
disqus_tags를 로딩한 후, 댓글을 보여줍니다.

이제 css를 바꿔보겠습니다.

(myvenv) D:\myDjango\static\css>subl base.css

body{
    font-family: "Lucia Grande",Verdana,Arial,sans-serif;
    font-size: 14px; /* 변경 */
}
cs

댓글의 폰트 사이즈는 변경할 수 없습니다. 이에 어울리는 폰트 사이즈가 14 혹은 16이므로 댓글이 아닌 본문의 폰트 크기를 변경합니다.

이제 변경사항을 체크하기 위해 runserver하고 본문을 클릭해 봅니다.

댓글 란이 나타났습니다. 근데 읽어보니 제가 disqus 가입 시, 이메일 인증을 안 한 모양입니다. 이메일 인증을 하고 돌아와서 댓글을 작성해봅니다.


아주 간단하게 댓글 기능이 완성되었습니다.

댓글 4개:

  1. 등록되지 않은, 개발 중의 웹에서도 디스커스를 활용할 수 있나요?

    답글삭제
    답글
    1. 저는 웹사이트를 호스팅 한 것이 아니라 개발 공부만 한 것입니다. 보시다시피 디스커스 가입만 하시면 댓글을 사용할 수가 있습니다.

      삭제
  2. 이렇게 자세한 안내를 해주셔서 감사합니다! 또한 유용한 정보를 공유하고 싶습니다 https://kr.mspy.com/iphone-spy.html에서 직접 확인하십시오. 저에게는 이제 없어서는 안될 앱입니다.

    답글삭제