giscus

GitHub Discussions로 작동하는 댓글 시스템입니다. GitHub를 이용해 방문자가 댓글과 반응을 웹사이트에 남기게 해보세요! utterances에서 큰 영감을 받았습니다.

주의:
giscus는 활발히 개발되고 있습니다. GitHub에서도 Discussions와 그 API를 활발하게 개발하고 있습니다. 따라서 시간이 지나면서 giscus의 일부 기능이 작동하지 않거나 변경될 수 있습니다.

작동 원리

giscus가 로드되면, GitHub Discussions 검색 API를 사용하여 선택된 매핑 방법(URL, pathname, <title>, etc.)에 따라 페이지와 연관된 Discussion을 찾습니다. 일치하는 discussion이 없으면 giscus 봇은 누군가 처음으로 댓글이나 반응이 남길 때 자동으로 discussion을 생성합니다.

댓글을 남기기 위해 방문자는 GitHub OAuth를 이용하여 giscus app대신 게시할 수 있도록 권한을 부여해야합니다. 혹은 방문자들은 GitHub Discussion에서 직접 댓글을 달 수도 있습니다. GitHub에서 댓글을 관리할 수 있습니다.

설정

언어

giscus에서 사용할 언어를 선택해 주세요. 원하는 언어가 없으신가요? 번역 기여에 참여해주세요.

저장소

giscus에 연결할 저장소를 선택하세요. 정확히 확인하세요.:

  1. 공개저장소여야 합니다. 그렇지 않으면, 방문자들은 discussion을 볼 수 없습니다.
  2. giscus 앱이 설치되어 있어야 합니다. 그렇지 않으면, 방문자들은 댓글과 반응을 남길 수 없습니다.
  3. Discussions 기능이 해당 저장소에서 활성화되어 있어야 합니다..

공개 GitHub 저장소입니다. 이 저장소에 discussions이 연결됩니다.

페이지 ↔️ Discussions 연결

페이지와 Discussion 간의 연결을 선택하세요.

giscus가 페이지의 URL 경로 요소를 포함한 제목의 discussion을 찾습니다.

giscus가 페이지의 URL을 포함한 제목의 discussion을 찾습니다.

giscus가 페이지의 <title> 태그를 포함한 제목의 discussion을 찾습니다.

giscus가 페이지의 <meta property="og:title"> HTML 태그를 포함한 제목의 discussion을 찾습니다.

giscus가 특정 단어를 포함한 제목의 discussion을 찾습니다.

giscus가 특정 번호를 가진 discussion을 찾습니다. 이 옵션은 자동 discussion 생성을 지원하지 않습니다.

유사한 제목으로 여러 토론이 있을 때 GitHub의 퍼지 검색 방식으로 인한 불일치를 방지합니다. 상세한 내용은 문서에 나와 있습니다.

Discussion 카테고리

새 discussion이 만들어질 카테고리를 선택하세요. giscus와 메인테이너만이 새 discussion을 만들 수 있게 Announcements 타입을 가진 카테고리를 선택하는 것을 권장합니다.

giscus에서 조건을 만족하는 discussion을 찾을 때, 이 카테고리에서만 찾습니다.

기능

특정 기능을 활성화할지 선택하세요.

discussion의 메인 포스트에 대한 반응이 댓글 위에 표시됩니다.

Discussion의 메타데이터가 부모 페이지(설치된 페이지)로 전송됩니다. 체험하시려면, 이 기능을 활성화한 뒤 브라우저 콘솔을 열어보세요. 상세한 내용은 문서에 나와 있습니다.

댓글 입력란은 댓글 위에 배치되어 사용자가 토론의 맨 아래로 스크롤하지 않고도 댓글을 남길 수 있습니다.

주석 로드는 사용자가 주석 컨테이너 근처에서 스크롤할 때까지 지연됩니다. <iframe> 요소에 loading="lazy"를 추가하면 됩니다.

테마

당신의 사이트에 적절한 테마를 선택하세요. 마음에 드시는 게 없나요? 테마 기여에 참여해주세요.

giscus 활성화

아래 <script> 태그를 댓글 기능을 사용할 웹사이트의 템플릿에 넣으세요. giscus 클래스를 가진 요소가 존재하면, 그 대신에 댓글들이 나타납니다.

<script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="ko"
        crossorigin="anonymous"
        async>
</script>

giscus가 들어있는 페이지에서 .giscus.giscus-frame 선택자를 이용하여 컨테이너 레이아웃을 꾸밀 수 있습니다.

giscus를 사용한다면, giscus GitHub 저장소 스타🌟를 눌러 주시고저장소의 토픽에 giscus를 추가해 주세요! 🎉

고급 사용법

고급 사용법 가이드를 따라서 추가적인 설정(예를 들면, 특정 origin 허가하기)을 할 수 있습니다.

React, Vue, 또는 Svelte와 함께 giscus를 사용하고 싶다면, giscus component library를 확인해보세요.

전환하기

GitHub Issues를 활용한 다른 시스템(예를 들면, utterances, gitalk)을 사용하고 있다면 이미 생성된 issue를 discussion으로 변환할 수 있습니다. 변환 후에 discussion의 제목과 페이지 간의 매핑이 올바른지 확인하세요. 그러면 giscus가 자동으로 해당 discussion을 사용합니다.

giscus를 사용하는 사이트

기여하기

CONTRIBUTING.md를 참고하세요.

한 번 사용해 보기 👇👇👇

Powered by Vercel