Statische websites leveren inhoud via een vooraf gedefinieerde verzameling HTML-, CSS- en JavaScript-bestanden, waardoor ze voor velen een eenvoudige en voordelige keuze zijn.

Ondanks hun vaste aard kunnen statische sites worden verrijkt met elementen van dynamische inhoud om gebruikersinteractie te stimuleren. Door een commentsectie te integreren kunnen bezoekers hun mening geven, feedback geven of vragen stellen over je content of diensten.

Deze toevoeging bevordert de betrokkenheid van de gemeenschap en stelt je in staat om in contact te komen met je publiek en je aanbod te verfijnen op basis van hun feedback. Deze tutorial demonstreert het toevoegen van een commentsectie aan een statische site die wordt gehost op Kinsta’s Statische Site Hosting.

Een statische basissite opzetten op Kinsta

Deze handleiding gebruikt de Docusaurus template die is gemaakt op het Kinsta GitHub account. Docusaurus is een populaire statische sitegenerator die React, een van de beste JavaScript bibliotheken, gebruikt als UI bibliotheek voor het maken van pagina’s.

Volg de onderstaande stappen om deze site in te stellen op Kinsta:

  1. Om de Docusaurus template te gebruiken, klik je op Use this template > Create a new repository.
  2. Kloon de repository naar je lokale machine door het volgende commando uit te voeren: 
    https://github.com/kinsta/hello-world-docusaurus.git

  3. Log in of maak een account aan om je MyKinsta dashboard te bekijken.
  4. Autoriseer Kinsta bij je Git provider.
  5. Klik op Statische sites op de linker zijbalk en klik dan op Site toevoegen.
  6. Selecteer de repository en de branch waarvan je wilt deployen.
  7. Geef je site een unieke naam.
  8. Voeg de build instellingen toe in de volgende format:
    • Build commando: npm run build
    • Node versie: 18.16.20
    • Publish directory: build
  9. Klik ten slotte op Site maken.

Nadat je je site met succes hebt gedeployd, kun je de URL bezoeken die als domein wordt vermeld op het tabblad Overzicht van je uitgerolde site.

Schermafbeelding van de statische site van Docusaurus, genaamd My Site
Succesvolle deployment van de statische site.

Een Disqus account maken

Disqus biedt hulpmiddelen om de betrokkenheid te vergroten via sociale integratie, moderatietools en analyses. Het ondersteunt online discussies via comments. Volg deze stappen om Disqus te gebruiken:

  1. Maak een Disqus account aan.
  2. Vul de vereiste informatie in voor het aanmeldingsproces.
  3. Selecteer na het aanmelden I want to install Disqus on my site.
  4. Registreer je site bij Disqus. Kies tijdens de registratie een korte naam en een categorie voor je site. Een organisatie genereert automatisch een lijst met je nieuwe site en eventuele extra sites die je in de toekomst aanmaakt.
  5. Kies een Disqus abonnement voor je organisatie. Disqus biedt verschillende abonnementen, waaronder Plus, Pro en Business. Voor deze demo kun je het Basic abonnement kiezen, dat kernfuncties bevat zoals de commentaarplugin, geavanceerde spamfiltering, moderatietools en basisanalyses.

Disqus integreren met je statische site op Kinsta

De volgende stap is het integreren van de Disqus code snippet in je statische site generator.

  1. Klik na het registreren van je site op I don’t see my platform listed, install manually with Universal Code.
    I don't see my platform listed, install manually with Universal Code optie in Disqus
    De Disqus code handmatig insluiten met Universal Code.

    De weergegeven pagina bevat een JavaScript codefragment in het gedeelte met het label Place the following code where you’d like Disqus to load. Omdat de statische site een React applicatieis, moet je dit codefragment aanpassen zodat het met React werkt.

  2. Maak een map met de naam Disqus in de map src/components .
  3. Gebruik de volgende code in je index.js bestand. Zorg ervoor dat je https://your_shortname_placeholder.disqus.com/embed.js vervangt door de URL die je hebt ontvangen in de Universal Code: 
    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;

    De functie disqus_config definieert twee variabelen:

    • this.page.url – Deze variabele is ingesteld op PAGE_URL, die je moet vervangen door de canonical URL van de pagina. Disqus gebruikt deze URL om de specifieke pagina te identificeren waar de comments thuishoren.
    • this.page.identifier – Deze variabele wordt ingesteld op PAGE_IDENTIFIER, die je moet vervangen door een unieke identifier voor de pagina. Met deze identificatie kan Disqus onderscheid maken tussen pagina’s met dezelfde URL en opmerkingen/comments koppelen aan de juiste pagina.
  4. Je kunt deze component importeren op de pagina waar je de Disqus commentaarsectie wilt weergeven. 
    import DisqusComments from '@site/src/components/Disqus';
  5. Voeg vervolgens de Disqus commentaarsectie toe aan de landingspagina, neem de volgende importverklaring op in index.js in de map src/pages en gebruik DisqusComments dienovereenkomstig: 
    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. Commit de wijzigingen in de repo zodat ze worden weergegeven op je statische site die door Kinsta wordt gehost: 
    git add .
git commit -m "Adding Disqus Comments"
git push -u origin master

Als je Automatische deployment bij commit hebt aangeklikt bij het deployen van je statische site, zal het vastleggen van nieuwe wijzigingen automatisch een deployment op MyKinsta starten. Anders moet je de wijzigingen handmatig deployen.

Screenshot van de statische site met een commentaarsectie door Disqus hieronder
De statische site met geïntegreerde Disqus reacties.

Gefeliciteerd – je hebt een statische site gemaakt met Kinsta Statische Site Hosting en een commentaarsectie geïntegreerd met Disqus!

Je wilt misschien de DisqusComments component aanpassen om ervoor te zorgen dat de commentaarsectie laadt zoals bedoeld.

De commentsectie aanpassen

Je kunt de commentsectie op je statische site aanpassen door het uiterlijk aan te passen, reacties te implementeren, commentaarmoderatie uit te voeren en meer. Enkele aanpassingsopties die beschikbaar zijn op Disqus zijn de volgende.

Thema aanpassen

Om het thema van je Disqus opmerkingen aan te passen, navigeer je naar het Disqus dashboard, klik je op General op het tabblad Settings en selecteer je geschikte opties in de vervolgkeuzelijsten Color scheme en Typeface.

Schermafbeelding van de pagina voor het aanpassen van het thema
Het thema van je Disqus reacties aanpassen.

Reacties inschakelen op je site

Je kunt de betrokkenheid van je publiek vergroten door Reacties in te schakelen op je site. Pas deze reacties aan volgens je eigen voorkeuren.

Om deze functie in te schakelen, navigeer je naar het tabblad Settings op het Disqus dashboard. Selecteer Reactions. Klik vervolgens op Enable Reactions on your site.

Schermafbeelding van de pagina Reacties configureren en inschakelen van het Disqus dashboard
Reacties configureren en inschakelen via het Disqus dashboard.

Vernieuw je site. De optie voor reacties verschijnt.

Statische site met commentaarsectie met reacties
De statische site toont de integratie van reacties.

Avatars voor comments

Je kunt een standaard avatar voor gebruikers uploaden, zodat ze zich onderdeel voelen van de community.

Om deze functie in te schakelen, navigeer je naar het Disqus dashboard, klik je op General op het tabblad Settings en upload je een afbeelding via Default Commenter Avatar.

Een standaard Avatar voor de commentator uploaden
De functie Default Commentor Avatar.

Reacties sorteren

Voeg aanpassingen toe om gebruikers reacties te laten sorteren op Oldest First, Newest First of Best first. Klik op Community op het tabblad Settings op het Disqus dashboard en selecteer de volgorde in de vervolgkeuzelijst Default Sorting.

Reacties sorteren op basis van de opgegeven volgorde.
Reacties sorteren op basis van de opgegeven volgorde.

Commentaren modereren

Om reacties op Disqus te modereren, gebruik je het Disqus moderatiepaneel op de bovenste navigatiebalk in je Disqus dashboard. Deze tool geeft een snel overzicht van de opmerkingen op je forum en hun status (goedgekeurd, in behandeling, enzovoort).

Je kunt ook moderatieregels configureren via het Moderatiemenu, dat beschikbaar is in het linker navigatiedeelvenster onder het tabblad Instellingen van het Disqus dashboard.

Commentaar en moderatie instellingen pagina in het Disqus dashboard
Toegang tot het moderatiepaneel vanuit het Disqus dashboard.

Bekijk vervolgens hun documentatie voor de belangrijkste stappen en functies om je te helpen bij het beheren en modereren van reacties op Disqus.

Gasten toestaan reacties te geven

Om gastgebruikers toe te staan commentaar te geven op je site, schakel je het selectievakje Allow guests to comment in en klik je vervolgens op Save. Deze opmerkingen blijven in afwachting totdat een moderator ze goedkeurt vanuit het Disqus moderatiedashboard.

Schermafbeelding van het selectievakje voor commentaar van gasten
Gasten toestaan commentaar te geven op je site.

Commentaar goedkeuren, verwijderen en markeren als spam

Met het moderatiepaneel kun je bulkacties uitvoeren (opmerkingen goedkeuren, verwijderen en markeren als spam) door meerdere opmerkingen te controleren. Je kunt ze ook afzonderlijk modereren in de uitgebreide commentaarweergave.

Zodra je deze instelling inschakelt, moet een moderator opmerkingen goedkeuren voordat ze worden weergegeven.

Screenshot van het commentaargedeelte vanuit het perspectief van de moderator
Je Disqus opmerkingen modereren met bulkacties.

Samenvatting

In deze tutorial heb je geleerd hoe je een commentaarsectie kunt toevoegen aan je statische site. Naast Docusaurus kun je Disqus implementeren in elke andere SSG zoals VuePress, Gatsby en meer.

Met Kinsta’s Statische Site Hosting kun je je vooraf gebouwde niet-dynamische bestanden eenvoudig implementeren. Om de voordelen te ontdekken van het hosten van je statische site op Kinsta en het integreren van features zoals een commentaarsectie, bekijk je Kinsta’s Statische Site Hosting.

Heb je ooit Disqus of een andere commentaarservice geïmplementeerd op je statische site? Deel je ervaringen in de…, jawel… commentsectie hieronder!

Jeremy Holcombe Kinsta

Content & Marketing Editor bij Kinsta, WordPress Web Developer en Content Writer. Buiten alles wat met WordPress te maken heeft, geniet ik van het strand, golf en films. En verder heb ik last van alle problemen waar andere lange mensen ook tegenaan lopen ;).