작업 개요
oopy 블로그에 댓글 기능을 연동했다. 처음엔 Utterances로 시작했으나 GitHub Issues 기반의 한계(카테고리 분류 불가, 반응 이모지 없음 등)로 인해 Giscus로 최종 전환했다.
연동 대상
•
•
댓글 저장소: codesche/blog-comment-repo (GitHub Public Repository)
•
최종 댓글 시스템: Giscus (GitHub Discussions 기반)
작업 흐름 전체 요약
Utterances → Giscus 전환 이유
항목 | Utterances | Giscus |
기반 | GitHub Issues | GitHub Discussions |
카테고리 분류 |  | General 등 |
반응 이모지 | | |
대댓글 | | |
비용 | 무료 | 무료 |
최종 적용 설정값
항목 | 값 |
data-repo | codesche/blog-comment-repo |
data-repo-id | R_kgDOR_oZIw |
data-category | General |
data-category-id | DIC_kwDOR_oZI84C6lrv |
data-mapping | pathname |
data-theme | dark |
data-lang | ko |
oopy HTML body 태그 최종 코드
<script>
(function() {
var observer = new MutationObserver(function() {
var container = document.querySelector('div.notion-page-content');
if (container) {
observer.disconnect();
// 댓글창 상단 여백 조절
var style = document.createElement('style');
style.innerHTML = '.giscus { margin-top: -40px !important; }';
document.head.appendChild(style);
var script = document.createElement('script');
script.src = 'https://giscus.app/client.js';
script.setAttribute('data-repo', 'codesche/blog-comment-repo');
script.setAttribute('data-repo-id', 'R_kgDOR_oZIw');
script.setAttribute('data-category', 'General');
script.setAttribute('data-category-id', 'DIC_kwDOR_oZI84C6lrv');
script.setAttribute('data-mapping', 'pathname');
script.setAttribute('data-strict', '0');
script.setAttribute('data-reactions-enabled', '1');
script.setAttribute('data-emit-metadata', '0');
script.setAttribute('data-input-position', 'bottom');
script.setAttribute('data-theme', 'dark');
script.setAttribute('data-lang', 'ko');
script.setAttribute('crossorigin', 'anonymous');
script.async = true;
container.appendChild(script);
}
});
observer.observe(document.body, { childList: true, subtree: true });
})();
</script>
JavaScript
복사
특이사항
•
blog-repository는 최종적으로 Private 유지 (블로그 포스트 및 코드 저장용)
•
댓글 전용 blog-comment-repo는 Public 유지 필수 (Giscus API 접근 조건)
•
oopy Utterances 플러그인은 Repo name을 비워서 비활성화 처리
•
MutationObserver를 사용한 이유: oopy가 Notion 페이지를 비동기로 렌더링하기 때문에 콘텐츠 로드 완료 후 스크립트를 삽입해야 정상 작동함
