이 내용은 현재 작동하지 않습니다.
Notion에서 쉽게 댓글 기능을 추가해보세요!
(도움말이 어렵다면 영상을 참고해주세요!)
소개
최근에 Oopy에 새로 생긴 기능인 커스텀 스크립트 추가 를 아시나요? 이 기능을 사용하면 Script Injection 을 사용할 수 있어요! 이 기능을 활용해서 Oopy에 disqus를 추가해볼게요!
사용법
이 방법은 다른 방법보다는 살짝 복잡합니다! 차근차근 따라해주세요.
이 설명은 disqus 추가하기를 자세히 다루지 않습니다. 모르는 것이 있다면 구글에 검색해주세요.
필요한 것들
1.
Oopy 에 연결된 페이지
2.
Notion
만들어볼까요?
1.
disqus 링크 추가하기
a.
b.
I want to install Disqus on my site를 눌러주세요
c.
내용은 알맞게 넣고 Create Site를 눌러주세요
d.
Basic 플랜을 선택해주세요.
e.
아래 사진을 클릭해주세요.
f.
아래와 비슷한 코드를 복사해주시면 됩니다!
<div id="disqus_thread"></div>
<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.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://(이 부분만 다르면 됩니다)/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>
HTML
복사
2.
소스코드 수정하기
위에 나와있는 소스코드에서 s.src = 'https://이름.disqus.com/embed.js';(15번 줄) 을 복사해주세요.
아래 코드의 이 줄을 지우고 복사한 코드를 넣어주세요 를 지우고 방금 복사한 코드를 넣어주세요. (메모장을 열어서 임시로 아래 코드를 적으시면 편해요!)
<script>
setTimeout(() => {
console.log("Notion Tools - oopy-disqus 스크립트 작동");
var disqus_block = document.querySelector('.notion-text-block>div>div>div>a[href="https://notion-tools.com/disqus"]').parentNode.parentNode.parentNode.parentNode;
disqus_block.innerHTML = `<div id="disqus_thread"></div>`;
(function() {
var d = document, s = d.createElement('script');
이 줄을 지우고 복사한 코드를 넣어주세요
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
}, 1000);
</script>
HTML
복사
다 하였다면 코드 전체를 복사하고 다음 단계를 진행해주세요.
수정한 소스코드 예시
3.
Oopy 에 커스텀 스크립트 추가하기
https://app.oopy.io/script 에 들어가주세요. (로그인이 필요할 수도 있습니다.)
방금 복사한 코드를 <body> 와 </body> 사이에 넣어주세요.
4.
Notion 에서 링크 추가하기
원하는 페이지의 위치에 https://notion-tools.com/disqus 링크를 추가해주세요!
하이퍼링크(클릭하면 이동하는 주소)가 https://notion-tools.com/disqus 면 됩니다.
5.
확인하기
Oopy 에서 만든 링크(개인 도메인 or *.oopy.io)에서 확인해주세요!
참고
•
Oopy 에서 확인하면 링크가 약 1초 정도 보였다가 disqus으로 바뀌게 됩니다! 문제가 아니니 걱정 말아주세요!
혹시 궁금한 것이 있다면 오른쪽 아래 문의 버튼으로 알려주세요!
Notion Tools 개발자 혀느현스