Zone de l'image à la une. La barre mesure l'article ci-dessous, pas cet en-tête.

Aperçu de ghost-progress-plugin

Faites défiler et regardez la barre du haut se remplir de 0% à 100%. Modifiez les options dans le panneau de gauche, le code d'intégration se met à jour.

Pour commencer

ghost-progress-plugin est une barre de progression de lecture minuscule et sans dépendance pour Ghost. Il a commencé comme un widget pour Ghost, mais il fonctionne aussi sur les blogs basés sur Notion, et partout où vous pouvez ajouter un script. Pendant la lecture, une fine barre se remplit pour indiquer où vous en êtes dans l'article. Cette page est un exemple en direct : la barre en haut est le vrai widget.

Installation

Ajoutez-le en une fois avec cet extrait, sans étape de build ni fichiers de thème à modifier :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.css">
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.min.js"
        data-content=".gh-content"
        data-position="top"></script>

Injection de code

Dans Ghost, collez-le dans Settings → Code injection → Site Footer. Sur un hébergement basé sur Notion, ajoutez-le dans le champ de code personnalisé : oopy propose une zone de code head/footer, super.so a une zone Custom Code, et là vous réglez data-content sur .notion-page-content. Sur tout autre site, placez-le juste avant la balise </body>.

Options

Tout se configure avec des attributs data-* sur la balise script : le sélecteur de contenu, la position, l'épaisseur et le z-index :

data-content=".gh-content"
data-position="top"
data-height="4"
data-z-index="100"

Personnalisation

La couleur et l'épaisseur de la barre sont réglables. Chaque classe et variable CSS est dans l'espace de noms greedylabs-ghost-progress, donc elle n'entre jamais en conflit avec votre thème.

Couleurs

Le remplissage suit par défaut la couleur d'accent de votre thème Ghost (--ghost-accent-color) ; utilisez data-color ou redéfinissez les variables CSS pour la changer. La piste non lue est transparente par défaut, donnez-lui donc une couleur pour que la barre soit visible même à 0% :

.greedylabs-ghost-progress {
  --greedylabs-ghost-progress-track: rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  .greedylabs-ghost-progress {
    --greedylabs-ghost-progress-track: rgba(255,255,255,.14);
  }
}

Position

Utilisez data-position pour haut ou bas, et data-height pour l'épaisseur en pixels. La barre atteint 0% quand le haut de l'article rejoint le haut de la fenêtre, et 100% quand son bas rejoint le bas.

Questions fréquentes

Mesure-t-il toute la page ou seulement l'article ?

Seulement l'article visé par data-content. L'en-tête, l'image à la une et le pied de page ne comptent pas.

Pourquoi la barre est-elle invisible en haut ?

À 0% le remplissage n'a pas de largeur et la piste est transparente par défaut. Donnez une couleur à la piste (voir Couleurs) pour voir la barre même vide.

Fonctionne-t-il hors de Ghost ?

Oui. Partout où vous pouvez injecter un script, pointez data-content vers votre conteneur d'article. Pour Notion, c'est .notion-page-content.

Conclusion

ghost-progress-plugin est open source sous licence MIT ; le code et les tickets sont sur GitHub. Essayez les options dans le panneau de gauche et copiez l'extrait quand cela vous convient. Si cela vous a aidé, un café est toujours apprécié ☕.

Commentaires