Disqus Alternative
노션 블로그에 disqus를 붙였는데, 붙인지 얼마 지나지 않아 아래 사진처럼 보기 싫은 광고가 댓글 앞뒤로 달렸다. 월 10달러 정도 내야 광고를 없앨 수 있다고 한다. 그래서 disqus의 대안책을 찾아보았다.
🔮utterances
무료 오픈소스 comment widget이다. github issue API를 이용해서 코멘트를 달 수 있게 해준다. 특정 페이지에 코멘트를 달면 utterances 앱이 레파지토리에 issue를 자동으로 생성하고, 코멘트가 저장된다.
How to use
repository 만들기
issue가 생성될 repository를 만든다.
utterances app 추가
repository에 utterances 앱을 추가한다.
configuration
https://utteranc.es/ 에서 configuration을 설정한다. 순서대로 'repo 이름, issue 이름을 어떻게 생성할지(post의 title, url 등), 생성할 이슈에 어떤 라벨을 붙일지(옵션), 코멘트 테마 컬러'를 설정한다.
script 태그 추가
생성할 위치에 script 태그를 추가해준다. script 태그가 추가되는 곳에 코멘트가 생긴다.
<script src="https://utteranc.es/client.js"
repo="[ENTER REPO HERE]"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
단, oopy로 만든 노션 블로그의 경우 그냥 추가하면 안된다.
oopy 노션 블로그에 script 태그 추가하기
oopy의 경우, body 태그에 script 태그를 넣으면 head에 들어간다. 영문을 몰라 처음에는 버그인 줄 알았는데 문의해보니 그렇다고 한다. 그래서 oopy에서는 일반적인 방법으로는 넣지 못하고 appendChild를 사용해야 한다. (innerHTML은 script를 실행시키지 않기때문에 script를 실행시키려면 appendChild를 써야한다.)
oopy 콘솔 - HTML 편집 - body 태그에 아래 코드를 추가한다. setAttributes 부분은 자신의 config로 바꾸면 된다.
<body>
<script>
function setAttributes(el, attrs) {
for (var key in attrs) {
el.setAttribute(key, attrs[key]);
}
}
var script = document.createElement('script');
setAttributes(script, {
"src": "https://utteranc.es/client.js",
"repo": "[YOUR_REPO]",
"issue-term": "title",
"label": "comment",
"theme": "github-light",
"crossorigin": "anonymous",
"async": "async"
});
document.body.appendChild(script);
</script>
</body>
장단점
장점
- 무료
- 코멘트 서버를 만들거나 배포할 필요가 없음
- 시작하기 매우 쉬움
- 기술 블로그의 경우 개발자들이 많이 이용하므로 깃허브로 로그인할 수 있는 것도 좋았음
- 예쁜 ui, dark theme 지원
- 가벼움
단점
- 답장을 못함 (치명적인 단점)
references
utterances는 이 블로그를 통해 알게되었다.
'개발 이야기' 카테고리의 다른 글
| 2021 Junction X Seoul 해커톤 참여 후기 (0) | 2021.05.24 |
|---|---|
| graphql-design-tutorial 번역 | 1년이 넘어 다시 본.. (0) | 2021.03.01 |
| [2020년 회고] 초심의 공중부양 (0) | 2021.01.24 |
