@giscusgiscus

giscus

Um sistema de comentários mantido por Discussões do GitHub. Permita que visitantes deixem comentários e reações no seu site através do GitHub! Fortemente inspirado por utterances.

Nota
giscus ainda está em desenvolvimento. O GitHub também está ativamente desenvolvendo Discussions e suas API. Desta forma, algumas características do giscus podem quebrar ou mudar no decorrer do tempo.

Como funciona

Quando o giscus é carregado, a API de pesquisa das Discussões do GitHub é usada para encontrar as discussões associadas com a página baseado no mapeamento escolhido (URL, pathname, <title>, etc.). Se uma discussão correspondente não for encontrada, o bot do giscus irá criar automaticamente uma discussão na primeira vez que alguém deixar um comentário ou reação.

Para comentar, visitantes devem autorizar o app giscus a postar em seu nome usando o fluxo GitHub OAuth. Alternativamente, visitantes podem comentar diretamente no GitHub Discussion. Você pode moderar comentários no GitHub.

Configuração

Idioma

Escolha o idioma no qual o giscus será exibido. Não encontrou seu idioma? Contribua com uma localização.

Repositório

Escolha o repositório ao qual o giscus se conectará. Certifique-se de que:

  1. O repositório é público, caso contrário os visitantes não poderão visualizar a discussão.
  2. O aplicativo giscus está instalado, caso contrário os visitantes não poderão comentar ou reagir.
  3. O recurso de Discussões está habilitado ao ativá-lo para seu repositório.

Um repositório do GitHub público. Este repositório é onde as discussões serão vinculadas.

Página ↔️ Mapeamento de discussões

Escolha o mapeamento entre a página de incorporação e a discussão incorporada.

giscus irá procurar uma discussão no qual o título contenha o componente de URL pathname da página.

giscus irá procurar uma discussão cujo título contenha o URL da página.

giscus irá procurar uma discussão cujo título contenha a tag HTML <title> da página.

giscus irá procurar uma discussão cujo título contenha a tag HTML <meta property="og:title"> da página.

giscus irá procurar uma discussão cujo título contenha um termo específico.

giscus carregará uma discussão específica por número. Está opção não suporta a criação automática de discussão.

Evite incompatibilidades devido ao método de pesquisa difusa do GitHub quando houver várias discussões com títulos semelhantes. Consulte a documentação para mais detalhes.

Categoria de Discussão

Escolha categoria de discussão onde as novas discussões serão criadas. É recomendado usar uma categoria com o tipo Anúncios para que novas discussões só possam ser criadas por mantenedores e giscus.

Ao pesquisar uma discussão correspondente, o giscus só pesquisará nesta categoria.

Características

Escolha se uma característica específica deve ser habilitada.

As reações para a publicação principal da discussão serão mostradas antes dos comentários.

Os metadados da discussão serão enviados periodicamente para a janela pai (a página de incorporação). Por exemplo, habilite essa opção e abra o console do seu navegador nesta página. Consulte a documentação para mais detalhes.

A caixa de entrada de comentários será colocada acima dos comentários, para que os usuários possam deixar um comentário sem rolar até o final da discussão.

O carregamento dos comentários será adiado até que o usuário role para perto do contêiner de comentários. Isso é feito adicionando loading="lazy" no elemento <iframe>.

Tema

Escolha uma tema que corresponda ao seu site. Não consegue encontrar um que combina? Contribua com um novo tema.

Habilitar giscus

Adicione a seguinte tag <script> ao modelo do seu site onde você deseja que os comentários apareçam. Se existir um elemento com a classe giscus, os comentários serão colocados lá.

Você não configurou seu repositório e/ou categoria. Os valores desses campos não serão mostrados até que você os preencha.
<script src="https://giscus.app/client.js"
        data-repo="[INSIRA O REPOSITÓRIO AQUI]"
        data-repo-id="[INSIRA O ID DO REPOSITÓRIO AQUI]"
        data-category="[INSIRA O NOME DA CATEGORIA AQUI]"
        data-category-id="[INSIRA O ID DA CATEGORIA AQUI]"
        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="pt"
        crossorigin="anonymous"
        async>
</script>

Você pode personalizar o layout do contêiner usando os seletores .giscus e .giscus-frame da página de incorporação.

Se você estiver usando giscus, considere dar uma 🌟 no giscus no GitHub e adicionar o tópico giscus no seu repositório! 🎉

Usos Avançados

Você pode adicionar configurações adicionais (por exemplo permitindo origens específicas) seguindo o guia de uso avançado.

Para usar o giscus com React, Vue, ou Svelte, olhe a biblioteca de componentes do giscus.

Migrando

Caso você tenha utilizado outros sistemas que usam os Problemas do GitHub (por exemplo utterances, gitalk), você pode você pode converter problemas existentes em discussões. Após a conversão, confira que o mapeamento entre títulos de discussões e páginas está correto, então o giscus irá utilizar as discussões automaticamente.

Sites que usam o giscus

Contribuindo

Veja CONTRIBUTING.md

Experimente 👇👇👇

Powered by Vercel