@giscusgiscus

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 생성을 지원하지 않습니다.

유사한 제목으로 여러 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를 사용하신다면, GitHub에서 giscus를 🌟 별표하신 후에 giscus를 자신의 저장소 토픽에 추가해 주세요! 🎉

고급 사용법

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

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

전환하기

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

giscus를 사용하는 사이트

기여하기

CONTRIBUTING.md를 참고하세요.

한번 사용해 보기 👇👇👇

Powered by Vercel