10. 댓글기능 추가하기

disqus

이제 댓글을 달 수 있도록 설정해 보도록 하겠습니다. 아래 명령어를 사용하여 disqus를 Django내에 설치할 수도 있지만 우리는 좀 더 편한 방법을 사용해 보도록 하겠습니다.

disqus 설치하기


(myvenv)root@goorm:/workspace/컨테이너명/mysite# pip install django-disqus

* 우리는 설치하지 않는 방법을 사용하도록 하겠습니다. 따라서 위 명령어를 사용하지는 않습니다. 그러나 설치하셔서 사용하시는 분도 계시기 때문에 명시해 두도록 하겠습니다.

disqus 사이트에 접속합니다. https://disqus.com/

login버튼을 누르시고 회원 가입을 해주세요. Name, E-mail 등은 관리하기 쉽도록 구름 IDE ID, PW를 사용하시는 것을 권장합니다.

자, 이제 GET STARTED를 눌러주세요.

I want to install Disqus on my site를 클릭해주세요.

아래 내용을 작성하신 다음(작성하는 내용이 중요하지는 않습니다.) Create Site를 눌러주세요. 우리는 BASIC으로 설치를 하도록 하겠습니다.

다음을 누르시면 여러 플랫폼이 나오는데 맨 아래 있는 것을 클릭하겠습니다.

그런 다음 1번이 나와있는 모든 소스를 복사해두세요. 이 스크립트를 HTML 파일에 붙여넣으면 원하는 곳에 댓글창이 뜨게 됩니다! (참 쉽죠? 😉)

마지막에 작성하라고 나오는 내용은 작성하지 않으시고 Complete Setup을 눌러주세요.

cafedetails.html로 오셔서 body 닫기 태그 위에 해당 소스를 붙여주세요. 주석은 보기 편하게 지웠습니다.

tutorialdjango/mysite/main/templates/main/cafedetails.html


<!DOCTYPE html>
<html>
<head>
	<title>cafelist</title>
</head>
<body>
	<h1>cafedetails</h1>
	<p>{{cafeobj.name}}</p>
	<p>{{cafeobj.content|linebreaks}}</p>
  {% if cafeobj.mainphoto %}
		<img src="{{ cafeobj.mainphoto.url }}">
  {% endif %}
	<a href="https://jejucodingcampsample-iqusj.run.goorm.io/cafelist>목록</a>
	<div id="disqus_thread"></div>
<script>
(function(){
var d= document, s = d.createElenment('script');
s.src = 'https://codingcampsamplepage.disqus.com/embed.js';
s.setAttribute('data-timestamp', + new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Plaese enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">
comments powered by Disqus.</a></noscript>
</body>
</html>

실행된 화면입니다. 목록 아래 댓글창이 달립니다.