Intégrer des commentaires sur un blog Astro : guide Giscus, Waline et Twikoo

Ajouter des commentaires à mon blog Astro m’a pris bien plus de temps que prévu.

Au départ, ça semblait simple : intégrer un système de commentaires, c’est tout. En pratique, les options se multiplient — Giscus, Waline, Twikoo, Disqus… Chacune promet la simplicité, mais la configuration diffère complètement. Pire encore : après avoir suivi un tutoriel, les commentaires s’affichent correctement… jusqu’au clic vers un autre article, où ils disparaissent.

C’est le routage View Transitions d’Astro : lors du changement de page, le composant commentaires ne se recharge pas — des « commentaires de Schrödinger » dont on ne connaît l’état qu’après navigation.

Si vous hésitez entre les solutions ou si vos commentaires disparaissent au changement de page, cet article compare Giscus, Waline et Twikoo, fournit le code d’intégration Astro complet et corrige la compatibilité View Transitions. Comptez environ 10 minutes pour passer à l’action.

Comparatif des systèmes de commentaires

J’ai testé les trois ; chacun a ses forces. Tableau synthétique :

Mes recommandations

Blog orienté développeurs (tutos, documentation open source) → Giscus. Vos lecteurs ont déjà GitHub ; connexion native, zéro backend, configuration en environ 5 minutes.

Blog grand public (lifestyle, photo, voyage) → Waline ou Twikoo. Commentaires anonymes sans inscription ; Waline offre un admin plus complet, Twikoo reste plus léger.

Zéro coût → Giscus (GitHub gratuit, pas de base ni de serveur). Waline reste gratuit en dev LeanCloud (1 Go), mais un fort trafic peut imposer un passage payant.

Admin puissant (modération, stats, anti-spam) → Waline, proche d’un plugin WordPress.

En bref : technique → Giscus ; lifestyle → Waline ; minimalisme → Twikoo.

Railway - Plateforme de déploiement moderne, sans opérations complexes, en ligne en quelques minutes

Commencer →Pub

Tutoriel Giscus : la solution la plus simple

Giscus convient surtout aux blogs techniques : pas de backend, pas de base, tout repose sur GitHub.

Prérequis

1. Dépôt GitHub public — le dépôt du blog ou un dépôt dédié (blog-comments). Les dépôts privés ne fonctionnent pas.

2. Activer Discussions — Settings → Features → cocher Discussions.

3. Installer l’app giscus — https://github.com/apps/giscus , autoriser le dépôt.

4. Catégorie Discussion — créer une catégorie type Announcements (« Comments ») : seuls vous et le bot créent les fils, les autres répondent.

Paramètres de configuration

Sur https://giscus.app :

1. Dépôt : utilisateur/nom-du-depot
2. Mapping : pathname (une Discussion par URL)
3. Catégorie : celle créée ci-dessus
4. Thème : light, dark ou preferred_color_scheme

Notez data-repo, data-repo-id, data-category-id, etc.

Code d’intégration Astro

Créez src/components/Giscus.astro :

---
// src/components/Giscus.astro
---

<div class="giscus"></div>

<script>
  function loadGiscus() {
    const script = document.createElement('script');
    script.src = 'https://giscus.app/client.js';
    script.setAttribute('data-repo', 'your-username/your-repo'); // Votre dépôt
    script.setAttribute('data-repo-id', 'your-repo-id');
    script.setAttribute('data-category', 'Comments');
    script.setAttribute('data-category-id', 'your-category-id');
    script.setAttribute('data-mapping', 'pathname');
    script.setAttribute('data-reactions-enabled', '1');
    script.setAttribute('data-emit-metadata', '0');
    script.setAttribute('data-input-position', 'bottom');
    script.setAttribute('data-theme', 'light');
    script.setAttribute('data-lang', 'fr');
    script.setAttribute('crossorigin', 'anonymous');
    script.async = true;

    const container = document.querySelector('.giscus');
    if (container) {
      container.innerHTML = '';
      container.appendChild(script);
    }
  }

  loadGiscus();
  document.addEventListener('astro:page-load', loadGiscus);
</script>

<style>
  .giscus {
    margin-top: 2rem;
  }
</style>

La ligne document.addEventListener('astro:page-load', loadGiscus) évite la disparition des commentaires lors des transitions.

Utilisation sur les pages article

---
import Giscus from '@/components/Giscus.astro';
---

<article>
  <h1>{title}</h1>
  <div>{content}</div>
</article>

<Giscus />

Lancez npm run dev, ouvrez un article, naviguez entre les pages : les commentaires doivent rester visibles.

Tutoriel Waline : le plus complet

Pour des commentaires anonymes sans compte GitHub, Waline offre admin, stats et notifications — avec un backend à déployer.

Backend (Vercel + LeanCloud)

Étape 1 : application LeanCloud

1. https://console.leancloud.cn/ (version internationale recommandée)
2. Créer une application « Development » (1 Go gratuit)
3. Noter App ID, App Key, Master Key

Étape 2 : déployer Waline sur Vercel

1. https://vercel.com/new/clone?repository-url=https://github.com/waline/waline/tree/main/example
2. Nom du projet, Create
3. Variables : LEAN_ID, LEAN_KEY, LEAN_MASTER_KEY
4. Redeploy après ajout des variables
5. Domaine du type my-waline.vercel.app

Étape 3 : domaine personnalisé (important)

Le domaine .vercel.app peut être inaccessible depuis la Chine. Ajoutez un CNAME waline → cname.vercel-dns.com, puis liez waline.votredomaine.com dans Vercel → Domains.

Intégration frontend Astro

npm install @waline/client

src/components/Waline.astro :

---
// src/components/Waline.astro
---

<div id="waline"></div>

<script>
  import { init } from '@waline/client';
  import '@waline/client/style';

  function loadWaline() {
    const walineInstance = init({
      el: '#waline',
      serverURL: 'https://waline.yourdomain.com',
      path: window.location.pathname,
      lang: 'fr',
      dark: 'auto',
      emoji: [
        '//unpkg.com/@waline/emojis@latest/weibo',
        '//unpkg.com/@waline/emojis@latest/bilibili'
      ],
      meta: ['nick', 'mail'],
      requiredMeta: ['nick'],
      pageSize: 10,
    });
    return walineInstance;
  }

  let walineInstance = null;

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      walineInstance = loadWaline();
    });
  } else {
    walineInstance = loadWaline();
  }

  document.addEventListener('astro:page-load', () => {
    if (walineInstance && walineInstance.destroy) {
      walineInstance.destroy();
    }
    walineInstance = loadWaline();
  });
</script>

<style>
  #waline {
    margin-top: 2rem;
  }
</style>

Importez <Waline /> dans le template article.

Alibaba Cloud - Choix n°1 des développeurs, 15 % de réduction exclusive sur Lighthouse

Obtenir -15 % →Pub

Compte administrateur

https://waline.yourdomain.com/ui/register — le premier compte est admin. Tableau de bord : /ui (modération, export).

Tutoriel Twikoo : léger et épuré

Twikoo se déploie sur Tencent Cloud, Vercel, Cloudflare Workers, etc. Interface sobre ; moins d’admin que Waline.

Fonction cloud (Cloudflare Workers)

npm install twikoo

1. Compte Cloudflare → Workers & Pages → Create Worker
2. Nom (my-twikoo), Deploy
3. Quick Edit : coller le code fonction Twikoo (https://twikoo.js.org/)
4. Noter le domaine Worker

Intégration Astro

src/components/Twikoo.astro :

---
// src/components/Twikoo.astro
---

<div id="twikoo"></div>

<script>
  function loadTwikoo() {
    import('twikoo').then((twikoo) => {
      twikoo.init({
        envId: 'https://my-twikoo.your-subdomain.workers.dev',
        el: '#twikoo',
        path: window.location.pathname,
        lang: 'fr',
      });
    });
  }

  loadTwikoo();

  document.addEventListener('astro:page-load', () => {
    const container = document.getElementById('twikoo');
    if (container) {
      container.innerHTML = '';
      loadTwikoo();
    }
  });
</script>

<style>
  #twikoo {
    margin-top: 2rem;
  }
</style>

Importez <Twikoo /> sur la page article.

Compatibilité Astro : le piège View Transitions

Dans les trois intégrations :

document.addEventListener('astro:page-load', loadComment);

Sans cela, les commentaires ne se chargent qu’à la première visite.

Pourquoi ?

View Transitions remplace le contenu sans recharger la page (comportement proche d’une SPA). Les scripts commentaires ne se réexécutent pas → disparition apparente.

Solution

astro:page-load se déclenche à chaque chargement (première visite et navigation) :

document.addEventListener('astro:page-load', () => {
  loadComment();
});

Autres approches (déconseillées)

transition:persist — conserve le bloc entre pages : risque d’afficher les commentaires de l’article A sur l’article B.

<!-- Déconseillé -->
<div id="comments" transition:persist>
  <Giscus />
</div>

Désactiver View Transitions — rechargement complet, perte des animations fluides.

Thème clair / sombre

Exemple Giscus :

document.addEventListener('theme-change', (e) => {
  const theme = e.detail.theme;
  const iframe = document.querySelector('iframe.giscus-frame');
  if (iframe) {
    iframe.contentWindow.postMessage(
      { giscus: { setConfig: { theme } } },
      'https://giscus.app'
    );
  }
});

Waline et Twikoo proposent des API similaires (voir la documentation officielle).

KiloClaw - OpenClaw managé pour l’entreprise : orchestration d’agents IA et routage intelligent

Commencer →Pub

FAQ

Q1 : Vercel inaccessible ?

Le domaine .vercel.app peut être bloqué en Chine. Liez un domaine personnalisé (CNAME → cname.vercel-dns.com, puis Domains dans Vercel).

Q2 : Migration des données ?

• Giscus : export JSON via API GitHub
• Waline : CSV/JSON depuis l’admin
• Twikoo : sauvegarde locale

Entre systèmes : script de conversion de format.

Q3 : Anti-spam ?

• Giscus : anti-spam GitHub
• Waline : Akismet + modération
• Twikoo : mots-clés, captcha, IP

Activez la modération avant publication.

Q4 : Plusieurs systèmes en parallèle ?

Possible techniquement, mais inutile (performance, dispersion). Exportez avant de changer.

Q5 : Chargement lent ?

• Lazy load à l’entrée dans le viewport
• CDN pour Waline/Twikoo
• Réduire les packs d’emojis Waline

Résumé

Giscus — blog technique ou zéro maintenance : ~5 minutes, GitHub natif.

Waline — admin riche, commentaires anonymes, gros volume.

Twikoo — léger, interface soignée, sans admin complexe.

Mon blog technique utilise Giscus : GitHub n’est pas un frein pour mes lecteurs, et c’est gratuit.

Suivez le tutoriel choisi : environ 10 minutes. Les commentaires apportent l’interaction — messages, suggestions et retours motivent à continuer d’écrire.

Des questions ? Laissez un commentaire (une fois le système en place). Bonne configuration !