Statische Websites liefern Inhalte über eine vordefinierte Sammlung von HTML-, CSS- und JavaScript-Dateien, was sie für viele zu einer unkomplizierten und kostengünstigen Wahl macht.

Trotz ihres starren Charakters können statische Websites mit dynamischen Inhalten angereichert werden, um die Interaktion der Nutzer/innen zu fördern. Durch die Einbindung eines Kommentarbereichs können Besucher/innen ihre Meinung äußern, Feedback geben oder Fragen zu deinen Inhalten oder Dienstleistungen stellen.

Dies fördert das Engagement der Gemeinschaft und ermöglicht es dir, mit deinem Publikum in Kontakt zu treten und deine Angebote auf der Grundlage ihres Feedbacks zu verbessern. Diese Anleitung zeigt, wie du einen Kommentarbereich in eine statische Website einfügst, die auf dem Statische-Seiten-Hosting von Kinsta gehostet wird.

Einrichten einer einfachen statischen Website auf Kinsta

In dieser Anleitung wird die Docusaurus-Vorlage verwendet, die auf dem Kinsta-GitHub-Konto erstellt wurde. Docusaurus ist ein beliebter Generator für statische Websites, der React, eine der führenden JavaScript-Bibliotheken, als UI-Bibliothek für die Seitenerstellung verwendet.

Befolge die folgenden Schritte, um diese Seite auf Kinsta einzurichten:

  1. Um die Docusaurus-Vorlage zu verwenden, klicke auf Diese Vorlage verwenden > Ein neues Repository erstellen.
  2. Klone das Repository auf deinen lokalen Rechner, indem du den folgenden Befehl ausführst: 
    https://github.com/kinsta/hello-world-docusaurus.git

  3. Logge dich ein oder erstelle ein Konto, um dein MyKinsta-Dashboard zu sehen.
  4. Autorisiere Kinsta bei deinem Git-Anbieter.
  5. Klicke in der linken Seitenleiste auf Statische Seiten und dann auf Website hinzufügen.
  6. Wähle das Repository und den Zweig aus, von dem aus du bereitstellen möchtest.
  7. Gib deiner Website einen eindeutigen Namen.
  8. Füge die Build-Einstellungen in folgendem Format hinzu:
    • Build-Befehl: npm run build
    • Node Version: 18.16.20
    • Veröffentlichungsverzeichnis: build
  9. Zum Schluss klickst du auf Website erstellen.

Nach der erfolgreichen Bereitstellung deiner Website kannst du die URL besuchen, die als Domain in der Registerkarte Übersicht deiner bereitgestellten Website aufgeführt ist.

Screenshot der statischen Website von Docusaurus mit dem Namen Meine Website
Erfolgreiche Bereitstellung der statischen Seite

Ein Disqus-Konto erstellen

Disqus bietet Tools zur Steigerung des Engagements durch soziale Integration, Moderationstools und Analysen. Es unterstützt Online-Diskussionen über Kommentare. Befolge diese Schritte, um Disqus zu nutzen:

  1. Erstelle ein Disqus-Konto.
  2. Fülle die erforderlichen Informationen für die Anmeldung aus.
  3. Wähle nach der Anmeldung Ich möchte Disqus auf meiner Seite installieren.
  4. Registriere deine Seite bei Disqus. Wähle bei der Registrierung einen Kurznamen und eine Kategorie für deine Seite. Eine Organisation erstellt automatisch eine Liste, die deine neue Seite und alle weiteren Seiten, die du in Zukunft erstellst, enthält.
  5. Wähle ein Disqus-Abo für deine Organisation. Disqus bietet verschiedene Abonnementpläne an, darunter Plus, Pro und Business. Für diese Demo kannst du das Basis-Abo wählen, das die wichtigsten Funktionen wie das Kommentar-Plugin, einen erweiterten Spamfilter, Moderationswerkzeuge und grundlegende Analysen enthält.

Disqus mit deiner statischen Website auf Kinsta integrieren

Der nächste Schritt ist die Integration des Disqus-Code-Snippets in deinen Statische-Seiten-Generator.

  1. Nachdem du deine Website registriert hast, klicke auf Ich sehe meine Plattform nicht aufgelistet, installiere manuell mit Universal Code.
    Ich sehe meine Plattform nicht aufgelistet, installiere manuell mit der Universal Code Option in Disqus
    Manuelles Einbinden des Disqus-Codes mit Universal Code

    Die angezeigte Seite enthält ein JavaScript-Codefragment im Abschnitt Place the following code where you’d like Disqus to load. Da es sich bei der statischen Seite um eine React-Anwendung handelt, musst du diesen Codeschnipsel anpassen, damit er mit React funktioniert.

  2. Erstelle einen Ordner namens Disqus im Ordner src/components .
  3. Verwende den folgenden Code in deiner index.js-Datei. Achte darauf, https://your_shortname_placeholder.disqus.com/embed.js durch die URL zu ersetzen, die du im Universal Code erhalten hast: 
    import React, { useEffect } from 'react';

const DisqusComments = () => {
    useEffect(() => {

    const disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's 
canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with   
your page's unique identifier variable
    };

    // Load Disqus script dynamically
    (function () {
        const d = document;
        const s = d.createElement('script');
        s.src = 'https://your_shortname_placeholder.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();

    // Cleanup Disqus on component unmount
    return () => {
        const disqusThread = document.getElementById('disqus_thread');
        if (disqusThread) {
        disqusThread.innerHTML = ''; // Clear the Disqus thread to avoid  
interference with other components
        }
    };
    }, []); // Run this effect only once on component mount

    return (
    <div>
        <div> id="disqus_thread"></div>
        <noscript>Please enable JavaScript to view the <a>  
href="https://disqus.com/?ref_noscript">comments powered by  
Disqus.</a></noscript>
    </div>
    );
};

export default DisqusComments;

    Die Funktion disqus_config definiert zwei Variablen:

    • this.page.url – Diese Variable ist auf PAGE_URL gesetzt, die du durch die kanonische URL der Seite ersetzen solltest. Disqus verwendet diese URL, um die Seite zu identifizieren, zu der die Kommentare gehören.
    • this.page.identifier – Diese Variable wird auf PAGE_IDENTIFIER gesetzt, die du durch einen eindeutigen Bezeichner für die Seite ersetzen solltest. Diese Kennung ermöglicht es Disqus, zwischen Seiten mit derselben URL zu unterscheiden und die Kommentare der richtigen Seite zuzuordnen.
  4. Du kannst diese Komponente in die Seite importieren, auf der du den Disqus-Kommentarbereich anzeigen möchtest. 
    import DisqusComments from '@site/src/components/Disqus';
  5. Füge dann den Disqus-Kommentarbereich zur Landing Page hinzu, füge die folgende Importanweisung in die index.js im Verzeichnis src/pages ein und verwende DisqusComments entsprechend: 
    export default function Home() {
    const {siteConfig} = useDocusaurusContext();
    return (
    <Layout
        title={`Hello from ${siteConfig.title}`}
        description="Description will go into a meta tag in <head />">
        <HomepageHeader />
        <main>
        <HomepageFeatures />
        <DisqusComments/>
        </main>
    </Layout>
    );
}
  6. Übertrage diese Änderungen in dein Repository, damit sie auf deiner von Kinsta gehosteten statischen Website sichtbar werden: 
    git add .
git commit -m "Adding Disqus Comments"
git push -u origin master

Wenn du bei der Bereitstellung deiner statischen Website die automatische Bereitstellung beim Commit aktiviert hast, wird beim Commit neuer Änderungen automatisch eine Bereitstellung auf MyKinsta initiiert. Andernfalls musst du die Änderungen manuell bereitstellen.

Screenshot der statischen Website mit einem Kommentarbereich über Disqus unten
Die statische Website mit integrierten Disqus-Kommentaren

Glückwunsch – du hast eine statische Website mit Kinstas Statische-Seiten-Hosting erstellt und einen Kommentarbereich mit Disqus integriert!

Vielleicht möchtest du die Komponente DisqusComments anpassen, um sicherzustellen, dass der Kommentarbereich wie vorgesehen geladen wird.

Wie du den Kommentarbereich anpasst

Du kannst den Kommentarbereich auf deiner statischen Website anpassen, indem du sein Aussehen veränderst, Reaktionen implementierst, die Moderation von Kommentaren durchführst und vieles mehr. Bei Disqus gibt es unter anderem folgende Anpassungsmöglichkeiten.

Anpassen des Themes

Um das Design deiner Disqus-Kommentare anzupassen, navigiere zum Disqus-Dashboard, klicke auf der Registerkarte Einstellungen auf Allgemein und wähle die passenden Optionen aus den Dropdowns Farbschema und Schriftart.

Screenshot der Seite zum Anpassen des Themes
Passe das Design deiner Disqus-Kommentare an

Aktiviere Reaktionen auf deiner Seite

Du kannst das Engagement deines Publikums erhöhen, indem du Reactions auf deiner Seite aktivierst. Passe diese Reactions nach deinen Wünschen an.

Um diese Funktion zu aktivieren, gehst du im Disqus-Dashboard auf die Registerkarte Einstellungen. Wähle Reactions. Klicke dann auf Reactions auf deiner Seite aktivieren.

Screenshot der Seite zum Konfigurieren und Aktivieren von Reaktionen auf dem Disqus-Dashboard
Konfigurieren und Aktivieren von Reactions über das Disqus-Dashboard

Aktualisiere deine Seite. Die Option für Reactions erscheint.

Statische Seite mit Kommentarbereich mit Reaktionen
Die statische Seite zeigt die Integration von Reactions an

Kommentar-Avatare

Du kannst einen Standard-Kommentar-Avatar für die Nutzer hochladen, damit sie sich als Teil der Community fühlen.

Um diese Funktion zu aktivieren, navigierst du zum Disqus-Dashboard, klickst auf der Registerkarte Einstellungen auf Allgemein und lädst ein Bild aus Standard-Kommentar-Avatar hoch.

Hochladen eines Standard-Avatars für Kommentatoren
Die Funktion Standard-Kommentator-Avatar

Kommentare sortieren

Füge Anpassungen hinzu, damit die Nutzer/innen die Kommentare nach Älteste zuerst, Neueste zuerst oder Beste zuerst sortieren können . Klicke auf der Registerkarte Einstellungen im Disqus-Dashboard auf Community und wähle die Reihenfolge aus dem Dropdown-Menü Standard-Sortierung.

Sortieren von Kommentaren mit Disqus
Sortieren von Kommentaren nach der vorgegebenen Reihenfolge

Wie man Kommentare moderiert

Um Kommentare auf Disqus zu moderieren, verwende das Disqus-Moderationspanel in der oberen Navigationsleiste in deinem Disqus-Dashboard. Dieses Tool bietet einen schnellen Überblick über die Kommentare in deinem Forum und ihren Status (genehmigt, ausstehend usw.).

Du kannst die Moderationsregeln auch über das Menü Moderation konfigurieren, das du in der linken Navigationsleiste unter dem Reiter Einstellungen im Disqus-Dashboard findest.

Seite mit den Einstellungen für Kommentare und Moderation im Disqus-Dashboard
Zugriff auf das Moderationspanel vom Disqus-Dashboard aus

Als Nächstes findest du in der Dokumentation die wichtigsten Schritte und Funktionen, die dir bei der Verwaltung und Moderation von Kommentaren auf Disqus helfen.

Erlaube Besuchern zu kommentieren

Um Gastnutzern zu erlauben, auf deiner Seite zu kommentieren, aktiviere das Kontrollkästchen Gastkommentare und klicke dann auf Speichern. Diese Kommentare bleiben in der Schwebe, bis ein Moderator sie im Disqus-Moderations-Dashboard freigibt.

Erlaube Gästen, auf deiner Seite zu kommentieren
Erlaube Gästen, auf deiner Seite zu kommentieren

Kommentare genehmigen, löschen und als Spam markieren

Im Moderationspanel kannst du Massenaktionen durchführen (Kommentare genehmigen, löschen und als Spam markieren), indem du mehrere Kommentare kontrollierst. Alternativ kannst du sie auch einzeln in der erweiterten Kommentaransicht moderieren.

Sobald du diese Einstellung aktivierst, muss ein Moderator die Kommentare genehmigen, bevor sie angezeigt werden.

Screenshot des Kommentarbereichs aus der Perspektive des Moderators
Moderation deiner Disqus-Kommentare mit Massenaktionen.

Zusammenfassung

In diesem Tutorial hast du gelernt, wie du einen Kommentarbereich zu deiner statischen Website hinzufügst. Abgesehen von Docusaurus kannst du Disqus auch in jedes andere SSG wie VuePress, Gatsby und andere einbinden.

Mit dem Statische-Seiten-Hosting von Kinsta kannst du deine vorgefertigten nicht-dynamischen Dateien ganz einfach bereitstellen. Wenn du wissen willst, welche Vorteile es hat, deine statische Website bei Kinsta zu hosten und Funktionen wie einen Kommentarbereich zu integrieren, schau dir Kinstas Statische-Seiten-Hosting an.

Hast du Disqus oder einen anderen Kommentardienst auf deiner statischen Website eingesetzt? Teile deine Erfahrungen unten in den Kommentaren mit.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).