Development

Kommentare mit Disqus in Astro hinzufügen

Die Kommentarfunktion ermöglicht es Ihren Nutzern, ihre Gedanken zu Ihren Seiten, Produkten oder Themen zu teilen, und kann der schöne Beginn einer engagierten Community rund um Ihre Website sein.

1) So fügen Sie Disqus zu Ihrer Website hinzu

  1. Gehen Sie auf Disqus.com und erstellen Sie ein Konto
  2. Klicken Sie auf „Ich möchte Disqus auf meiner Website installieren“
  3. Geben Sie den Namen Ihres Unternehmens und die Kategorie ein, die es am besten beschreibt
  4. Wählen Sie Ihr bevorzugtes Paket aus. Das Basis-Paket ist kostenlos.
  5. Klicken Sie, um den Universal Code für die Installation zu verwenden
  6. Kopieren Sie den Pfad zu embed.js aus Schritt 1 in Ihre Zwischenablage.


2) Erstellen einer Kommentar-Komponente

Wir erstellen eine Astro-Komponente namens disqus.astro mit folgendem Inhalt:

<div id="disqus_thread"></div>

<script is:inline>
    if (!window.DisqusWidget) {
        window.DisqusWidget = {
            overwriteGlobalSelectors: function () {
                window.$disqus = document.querySelector('#disqus_thread')
            },
            init: function () {
                this.overwriteGlobalSelectors()
                this.addListeners()
                this.initDisqus()
            },
            addListeners: function () {
                // Nach Sprachwechsel
                document.addEventListener('astro:after-swap', () => {
                    this.overwriteGlobalSelectors()
                    this.initDisqus()
                })
            },
            initDisqus: () => {
                // Früher Abbruch, falls $disqus nicht existiert
                if (window.$disqus === null) {
                    return
                }

                // DISQUS zurücksetzen, anstatt neues embed.js zu laden
                if (window.DISQUS) {
                    window.DISQUS.reset({
                        reload: true
                    })
                    return
                }

                (function () { // NICHT UNTERHALB DIESER ZEILE BEARBEITEN
                    const d = document, s = d.createElement('script');
                    s.src = '[PATH_TO_EMBED_JS]';
                    s.setAttribute('data-timestamp', String(+new Date()));
                    (d.head || d.body).appendChild(s);
                })();
            }
        }

        window.DisqusWidget.init()
    }
</script>

<noscript>Bitte aktivieren Sie JavaScript, um die <a href="https://disqus.com/?ref_noscript">Kommentare powered by
    Disqus</a> anzuzeigen.</noscript>

Bitte ersetzen Sie PATH_TO_EMBED_JS durch Ihren Pfad zu embed.js. Falls keine Übergangseffekte in Ihrem Projekt verwendet werden, entfernen Sie bitte den Listener astro:after-swap oben und verwenden Sie den Code direkt.

addListeners: function () {
    // Nach Sprachwechsel
  this.overwriteGlobalSelectors()
  this.initDisqus()
},
Nach oben scrollen