Prévia do ghost-giscus-plugin
Por padrão, este plugin colocou os comentários desta página logo depois do corpo do artigo. Mude a posição, o espaçamento e se existe uma área de comentários para assinantes no painel à esquerda, e os comentários reais se movem junto.
Introdução
O giscus monta os comentários em qualquer elemento da página que tenha a classe giscus. Este plugin apenas cria esse elemento no lugar que você quiser. Os comentários em si continuam servidos pelo giscus e armazenados no GitHub Discussions, então nada é reimplementado.
Instalação
No Ghost, cole os dois scripts abaixo em Configurações, injeção de código, rodapé do site. O primeiro é este plugin; o segundo é a tag oficial do giscus.
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
data-target=".gh-content"
data-place="after"
data-class="gh-comments gh-canvas"
data-padding-bottom="48"></script>
<script src="https://giscus.app/client.js"
data-repo="[YOUR REPO]"
data-repo-id="[REPO ID]"
data-category="[CATEGORY]"
data-category-id="[CATEGORY ID]"
data-mapping="pathname"
data-theme="preferred_color_scheme"
crossorigin="anonymous"
async></script>A ordem importa
Este plugin deve vir antes do script do giscus. O giscus decide onde montar no instante em que roda, verificando se há um elemento giscus, então nosso script precisa criar esse lugar primeiro. Inverta a ordem e os comentários acabam na tag do script.
Opções
Tudo é configurado com opções na tag do script: a qual elemento ancorar (data-target), onde ao redor dele anexar (data-place, um entre replace, append, prepend, before, after), a classe ou classes adicionadas ao wrapper de montagem (data-class, separadas por espaço para você colocar várias e herdar o estilo do seu tema) e os quatro lados do espaçamento (data-padding-top, data-padding-right, data-padding-bottom, data-padding-left, em px). Quando o elemento alvo não é encontrado, uma proteção de página remove o script do giscus para os comentários não caírem no lugar errado; desligue-a com data-guard="false".
data-target=".gh-content"
data-place="after"
data-class="gh-comments gh-canvas"
data-padding-bottom="48"Escolhendo um lugar
Dois formatos cobrem a maioria dos casos: colocar os comentários logo depois do artigo ou substituir um bloco de comentários existente. Os dois são vistos a seguir, um de cada vez.
Colocar depois do artigo
O padrão recomendado é data-target=".gh-content" data-place="after" data-class="gh-comments gh-canvas" data-padding-bottom="48". Ele cria o ponto de montagem logo depois do corpo do artigo (.gh-content) e herda as classes gh-comments gh-canvas do tema, de modo que o espaçamento e a largura parecem nativos. É a escolha mais segura porque o corpo do artigo sempre existe em toda página. Ao contrário de uma área de comentários só para membros, que pode ficar oculta, o alvo nunca some, então o comportamento é o mesmo em todo lugar.
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
data-target=".gh-content"
data-place="after"
data-class="gh-comments gh-canvas"
data-padding-bottom="48"></script>Substituir um bloco de comentários existente
Se o seu tema já tem um bloco de comentários, reaproveite o lugar dele com data-target=".gh-comments" data-place="replace". Isso reproduz <div class="gh-comments gh-canvas giscus"></div> apenas com code injection, sem editar o tema, então você herda a posição e o estilo que o tema já definiu. Use quando existir um bloco correspondente. A ressalva: os comentários nativos do Ghost são só para membros, então em sites que os desativam o elemento .gh-comments pode não existir. Nesse caso, use o padrão de colocar depois do artigo acima.
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
data-target=".gh-comments"
data-place="replace"></script>Configuração do giscus
O link do repositório, a categoria e o repo-id vêm do site oficial do giscus. Informe seu repositório lá e ele monta a tag do giscus pronta para colar.
Perguntas frequentes
Os comentários aparecem na tag do script, não onde eu quero.
Seu script do plugin está depois do script do giscus. Troque a ordem para que este plugin venha primeiro.
Só quero comentários em certas páginas.
Aponte a âncora para um elemento que só exista nessas páginas. Quando o seletor não corresponde a nada, o plugin não faz nada, então mirar um elemento exclusivo dos posts mantém os comentários nos posts.
Quero o espaçamento de comentários do meu tema.
Se a regra está na folha de estilos do seu tema, adicione a classe dela com data-class para herdá-la; caso contrário, defina o valor diretamente com data-padding-bottom.
Conclusão
É uma ferramenta leve que mantém o giscus oficial intacto e apenas o posiciona por você. ghost-giscus-plugin é de código aberto sob a licença MIT; o código e as issues estão no GitHub. Experimente as opções no painel à esquerda e copie o trecho quando gostar. Se ajudou você, um café é sempre bem-vindo ☕.