Vista previa de ghost-giscus-plugin
Por defecto, este plugin colocó los comentarios de esta página justo después del cuerpo del artículo. Cambia la ubicación, el margen y si existe un área de comentarios para suscriptores en el panel izquierdo, y los comentarios reales se mueven en consecuencia.
Introducción
giscus monta los comentarios en cualquier elemento de la página que tenga la clase giscus. Este plugin solo crea ese elemento en el lugar que quieras. Los comentarios en sí los siguen sirviendo giscus y almacenando GitHub Discussions, así que no se reimplementa nada.
Instalación
En Ghost, pega los dos scripts de abajo en Ajustes, inyección de código, pie del sitio. El primero es este plugin; el segundo es la etiqueta oficial de 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>El orden importa
Este plugin debe ir antes que el script de giscus. giscus decide dónde montar en el instante en que se ejecuta, comprobando si hay un elemento giscus, así que nuestro script tiene que crear ese lugar primero. Si inviertes el orden, los comentarios acaban en la etiqueta del script.
Opciones
Todo se configura con opciones en la etiqueta del script: a qué elemento anclarse (data-target), en qué punto a su alrededor adjuntarse (data-place, uno de replace, append, prepend, before, after), la clase o clases que se añaden al contenedor de montaje (data-class, separadas por espacios para poder poner varias y heredar el estilo de tu tema) y los cuatro lados del relleno (data-padding-top, data-padding-right, data-padding-bottom, data-padding-left, en px). Cuando no se encuentra el elemento objetivo, una guarda de página elimina el script de giscus para que los comentarios no acaben en el lugar equivocado; desactívala con data-guard="false".
data-target=".gh-content"
data-place="after"
data-class="gh-comments gh-canvas"
data-padding-bottom="48"Elegir un lugar
Dos formas cubren la mayoría de los casos: colocar los comentarios justo después del artículo, o reemplazar un bloque de comentarios existente. Ambas se repasan a continuación, una por una.
Colocarlo después del artículo
La opción predeterminada recomendada es data-target=".gh-content" data-place="after" data-class="gh-comments gh-canvas" data-padding-bottom="48". Crea el punto de montaje justo después del cuerpo del artículo (.gh-content) y hereda las clases gh-comments gh-canvas del tema, de modo que el espaciado y el ancho se ven nativos. Es la opción más segura porque el cuerpo del artículo siempre existe en cada página. A diferencia de un área de comentarios solo para miembros que puede quedar oculta, el objetivo nunca desaparece, así que se comporta igual en todas partes.
<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>Reemplazar un bloque de comentarios existente
Si tu tema ya tiene un bloque de comentarios, reutiliza su sitio con data-target=".gh-comments" data-place="replace". Esto reproduce <div class="gh-comments gh-canvas giscus"></div> solo con code injection, sin editar el tema, de modo que heredas la posición y el estilo que el tema ya definió. Úsalo cuando exista un bloque que coincida. La salvedad: los comentarios nativos de Ghost son solo para miembros, así que en sitios que los desactivan el elemento .gh-comments puede no existir en absoluto. En ese caso, usa la opción de colocar después del artículo de arriba.
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
data-target=".gh-comments"
data-place="replace"></script>Configuración de giscus
El enlace del repositorio, la categoría y el repo-id vienen del sitio oficial de giscus. Introduce ahí tu repositorio y te genera la etiqueta de giscus lista para pegar.
Preguntas frecuentes
Los comentarios aparecen en la etiqueta del script, no donde los quiero.
Tu script del plugin va después del script de giscus. Intercámbialos para que este plugin vaya primero.
Solo quiero comentarios en ciertas páginas.
Apunta el ancla a un elemento que solo exista en esas páginas. Cuando el selector no coincide con nada, el plugin no hace nada, así que apuntar a un elemento propio de las entradas mantiene los comentarios en las entradas.
Quiero el espaciado de comentarios de mi tema.
Si la regla está en la hoja de estilos de tu tema, añade su clase con data-class para heredarla; si no, fija el valor directamente con data-padding-bottom.
Conclusión
Es una herramienta ligera que deja intacto el giscus oficial y solo lo coloca por ti. Una línea y el orden correcto, y se comporta igual en cualquier sitio.