disqus

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

disqus 설치하기

(myvenv)root@goorm:/workspace/컨테이너명/mysite# pip install django-disqus
  1. disqus 사이트에 접속합니다. https://disqus.com/

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cd2180b7-80c8-4ccb-af28-d06ad84b31f4/Untitled.png

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

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/98ebd5dd-9ea4-4d67-b4de-c319f1ce7dfb/Untitled_(2).png

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

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d7f93fde-238b-4f5d-8f27-99309c2a77cd/Untitled.png

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

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4bb217e-c330-4575-980d-92e6c27de3c1/Untitled.png

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

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2cfe6e13-35e0-49a2-ba74-77182c2a5d1e/Untitled.png

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3a39d1bf-487e-44c4-8d98-6236a19c4767/Untitled.png

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

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/02228397-a23b-4c42-977e-dde67f2f0ed6/Untitled.png

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

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/29e93c43-4f82-4e25-bd30-ad776fa5e7d5/Untitled.png

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

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/aae001ba-1d13-4176-89da-2a440db55f0d/Untitled.png

  9. 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>
    

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

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/74a6a729-546b-4508-83c9-c5f59e10a2dd/Untitled_(3).png