장고 1.6, 1.7 버전에서는 django.contrib.comments 패키지를 통해 자체 댓글 기능을 제공했지만 1.8버전부터는 이보다 좀 더 유연하고 확장성 높은 오픈소스 플랫폼 Disqus 앱을 사용하는 것을 권장하고 있다고 한다. 또한 Disqus에서는 자바스트립트코드로 앱을 제공하고있기 떄문에 수정 및 보완이 쉽다.
disqus활용 영상
🧛♀️1.setting.py 설정하기
DISQUS_SHORTNAME = 'pydjango-web-1'
DISQUS_MY_DOMAIN = 'http://192.168.56.101:8000'disqus에서 부여한 shortname 항목을 사용한다. 도메인 항목은 댓글페이지를 구분하는 url을 지정할 때 사용한다.
데이터베이스 관련된 수정사항은 없다. 따라서 models.py, admin.py의 수정사항은 없고, 관련 url을 따로 설계할 필요도 없기 때문에 urls.py의 수정사항도 없다.
🧛♂️2. views.py 설정하기
# DetailView
class PostDV(DetailView):
# DetailView 제네릭 뷰를 상속받아 PostDV 클래스형 뷰를 정의함.
# DetailView 제네릭 뷰는 테이블로부터 특정 객체를 가져와 그 객체의 상세 정보를 출력.
# 테이블에서 특정 객체를 조회하기 위한 키는 기본 키 대신 slug속성을 사용하고 있음.
# 이 slug파라미터는 URLconf에서 추출해 뷰로 넘겨줌.
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}" #고유한 id를 만들어주기 위함.
context['disqus_url'] = f"{settings.DISQUS_MY_DOMAIN}{self.object.get_absolute_url()}" #ex)http://127.0.0.1:8000/blog/post/99
context['disqus_title'] = f"{self.object.slug}"앞서 작성해놓은 DetailView에 get_context_data 메서드를 오버라이딩한다. super()의 메소드를 호출하여 기존의 컨텍스트 변수를 구하고, 이를 context변수에 할당한다.
여기에 새로운 컨텍스트 변수 'disqus_short', 'disqus_id', 'disqus_url', 'disqus_title'을 정의한 후 리턴해준다.
✍ Python "f-String"
python 3.0부터 f-string기능이 추가되었다. 기존의 포맷기능과 같은데 가독성이 훨씬훨씬 좋다!!
ex)name = jeongseo age = 20 str = f"hi, my name is {name}, and {age} years old~!"이렇게 사용할 수 있다.
🧜♀️3. template 코딩
blog/post_detail.html
<br>
<div id="disqus_thread"></div>
</div>
{% endblock %}
{% block extra-script %}
<script>
(function() {
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 %}먼저 {% block content %} 내부에
<div id="disqus_thread"></div>얘를 추가해서 댓글창이 들어갈 자리를 정해준다. 그리고 자바스크립트 block을 열어서 disqus에서 제공하는 코드를 그대로 가져오면 된다.
주소 : https://{{ 내 웹의 shortName }}.disqus.com/admin/settings/universalcode/ 에서 코드를 확인 한 후, 편의에 따라 수정해서 사용한다. 나는 shortName이 들어가는 자리에 context변수로 받아온 disqus_short 변수를 넣어서 사용했다.
🧜♂️4. 변경사항 확인하기
댓글을 작성할 수 있는 창이 생성되었다. ╰(°▽°)╯
댓글, 대댓글 모두 작성할 수 있다. ☜(ﾟヮﾟ☜)
Disqus를 통해서 내 웹페이지의 댓글들을 관리할 수도 있다. §(￣▽￣)§
🐌 마치며...
오픈소스의 유용함을 깨달아버렸다.
이전 프로젝트에서 댓글기능을 구현하려다가 너무 코드가 너무 복잡해져서 댓글기능 없이 프로젝트를 완성한 적이 있다. 그 때 이렇게 오픈소스를 활용하는 방법을 알았다면 훨씬 적게 고생하고 댓글기능을 완성할 수 있었을텐데...😂
하지만 아쉬운 점도 있다. 댓글창의 크기나 글씨 크기를 조절할 수 없다는 점이다. 간편한 대신 Discus가 제공하는 그대로 따라야한다. 자유도가 매우 떨어진다.
이 간편하면서도 자유도 높은 댓글작성 오픈소스가 분명 있을텐데. 찾아봐야겠다.
