JAMstack Kommentarer

0
52

JAMstack nettsteder er ofte sett på som å være statisk. En mer nøyaktig mental modell for dem ville være at de er nettsteder som har evnen til å være vert for statisk. Forskjellen kan virke semantisk, men takket være økningen av mange verktøy og tjenester som forenkler kjører en bygge og distribuere til statisk hosting infrastruktur, slike områder kan føle deg friskere og dynamisk enn du kan forestille deg, mens du fremdeles er i stand til å bli servert fra statisk hosting infrastruktur, med alle de fordelene det bringer med seg.

En har ofte brukt som et eksempel på hvorfor et område kan ikke være vert for statisk er kommentarer. En kommentarer-motoren trenger for å håndtere påmeldinger, tillate for moderasjon, og er med sin natur, “dynamisk”.

Kommentar systemer er vanligvis tenkt som en ganske dynamisk innhold

Takket være voksende økosystem av verktøyene som er tilgjengelige for JAMstack nettsteder, det finnes løsninger på dette. La oss ser på et eksempel som du kan bruke på ditt eget nettsted, som:

  • Er ikke avhengig av cleint-side JavaScript
  • Kunne arbeide med en statisk side generator
  • Inkluderer moderering
  • Sender varslinger når nye kommentarer må moderere
  • Bakes kommentarer til nettstedet ditt, slik at de raskt kan lastes inn og vises i søk

Dette eksempelet gjør bruk av noen av funksjonene i Netlify, en plattform for å automatisere, distribusjon og hosting web-prosjekter, men mange av prinsippene kan brukes med andre plattformer.

Du kan se eksempel på stedet her.

Stashing vårt innhold

Vi skal lage 2 skjemaer for å motta alle våre kommentarer på de ulike stadier av deres reise fra commenter til innhold. Når Netlify ser en <form>, det skaper en unik datalageret for data form samler inn. Vi vil gjøre god bruk av det.

  • Skjema 1) En kø for å holde alle av ny kommentar bidrag. Med andre ord, en butikk for å holde alle kommentarer, og venter på moderering.
  • Skjema 2) Inneholder alle godkjente kommentarer.

Lov av moderasjon vil være noen som ser på hver ny innlevering, og du bestemmer deg, “jepp!” eller “nei!”. De som får nope-d vil bli slettet fra køen. De som er godkjent, vil bli lagt ut over den godkjente kommentarer form.

Alle kommentarer i det godkjente kommentarer form er brukt av våre statisk side generator i påfølgende nettsted bygger takk til API-tilgang Netlify gir til materialet i våre skjemaer.

Kommentar form

Hver side inneholder en HTML <form>. Ved å legge til den boolske egenskap av netlify til alle HTML-element på nettstedet ditt, Netlify vil automatisk generere en API for skjemaet, og samler alle bidrag til det for deg. Vil du også være i stand til å få tilgang til materialet som via API senere. Praktisk!

Kommentarer <form> på hver side vil du se mye som dette (noen klasser og ekstra kopi utelatt for klarhet):

<form netlify name=”kommentarer-queue”, action=”/takk”>
<input name=”banen” type=”hidden” value=”{{ side.url }}”>
<p>
<label for=”navn”>navn</label>
<input type=”text” name=”navn” id=”navn”>
</p>
<p>
<label for=”e-post”>e</label>
<input type=”e-post” name=”e-post” id=”e-post”>
</p>
<p>
<label for=”comment”>kommentar</label>
<textarea name=”kommentar” id=”comment”></textarea>
</p>
<p>
<- knappen type=”submit”>legg inn din kommentar</button>
</p>
</form>

Du vil kanskje legge merke til at skjemaet inneholder også en type=”hidden” – feltet for å la oss vite hvilken side på nettstedet denne kommentaren er for. Vår statisk nettsted generator fyller at for oss når området er generert, og vel bruke den senere når du skal avgjøre hvilke kommentarer som skal vises på hvilken side.

Innlegg og varsler

Når en ny kommentar er lagt ut via kommentar form, Netlify ikke bare stashes som for oss, men kan også sende en melding. Det kan være:

  • en e-post
  • en Slakk varsling
  • en web-krok av våre valg.

Disse gir oss muligheten til å automatisere ting litt.

Nye innleveringer resultere i en melding som legges ut til å Slakk. Vi vil få se hva som ble sendt inn, og som siden akkurat det i vår Slakk klient.

For å gjøre ting ekstra glatt, vi kan massasje at varsling litt å inkludere noen av knappene. En knapp for å slette en kommentar, en til å godkjenne det. Godkjenne en ny kommentar fra en Slakk melding på telefonen, mens jeg kjørte bussen føles godt.

Vi kan ikke gjøre disse knappene fungerer uten å kjøre en liten bit av logikk som vi kan gjøre i en Lambda-funksjonen. Netlify nylig lagt til støtte for Lambda funksjoner også, noe som gjør prosessen med å skrive og distribuere Lambdaer en del av den samme implementeringsprosessen. Du trenger ikke å gå og rotet rundt i Amazon AWS konfigureringsinnstillingene.

Vi vil bruke en Lambda-funksjonen til å legge til noen av knappene til vår Slakk varsling, og en annen Lambda-funksjonen til å håndtere handlinger av å klikke på en av disse knappene.

Få kommentarer til nettstedet

Med en nylig godkjent kommentar blir lagt ut til våre godkjente kommentarer form, vi er tilbake til å bruke innsending hendelse som utløser Netlify gir. Hver gang noe blir lagt ut til den godkjente kommentarer form, vi ønsker å inkludere den i området, så vi har Netlify automatisk bygge og distribuere nettstedet vårt.

De fleste statisk side generatorer har noen oppfatning av data-filer. Jekyll bruker filer i en [_data] katalog, Hugo har en lignende data-katalogen. Dette eksemplet bruker Eleventy som sin statisk side generator som har et lignende konsept. Vi vil gjøre bruk av dette.

Hver gang vi kjører vårt nettsted bygge, enten det er i våre lokal utvikling miljø eller innenfor Netlify gjennom sine automatiserte bygger, er det første trinnet er å trekke alle våre eksterne data til lokale data filer som våre SSGS kan bruke. Vi gjør det med en Jafs oppgave.

Bevæpnet med en `kommentarer.json` fil som vi har befolket fra en samtale til Netlify form innsending API som tok alle våre godkjente kommentarer, vår SSGS kan nå bygge nettstedet som normalt og bake riktig kommentarer rett inn i HTML-koden på våre sider.

Noen fordeler

Vel, det var moro, men hvorfor bry seg?

Ja, du kan bruke noe sånt som Disqus å legge til kommentarer til et statisk vert for nettstedet ditt via noen få linjer med JavaScript. Men det legger til en ekstern JavaScript avhengighet og resultater i kommentarer om innholdet bor langt bort fra selve innholdet. Og det er bare tilgjengelige når JavaScript er lastet inn, trakk i dataene, og deretter sprøytet det inn på nettstedet.

Mens denne metoden resulterer i kommentarer som er bakt rett inn i innholdet på nettstedet ditt. De vil dukke opp i søk på Google og de vil laste inn som en del av nettstedet ditt uten behov for noen klientsiden JavaScript.

Enda bedre, de vil være tilgjengelige for deg å forplikte seg rett inn koden din depotet med resten av innholdet ditt, og gir deg mer trygghet og mobilitet i fremtiden.

Eksempel på stedet, og alle av koden er tilgjengelig for å utforske. Du kan prøve å sende inn kommentarer hvis du liker (selv om stakkars gamle Phil trenger å moderere kommentarer eksempel på dette nettstedet før de vises, men det vil bare gjøre ham føle seg elsket).

Enda bedre, du kan klone dette eksemplet og distribuere din egen versjon til Netlify med bare noen få klikk. Eksemplet nettstedet forklarer hvordan.

Bare vis meg bak kulissene akkurat nå!

Hvis du ønsker å ta en titt på hvordan ting oppfører seg for moderator av et område ved hjelp av dette systemet uten å ta en kopi av din egen, denne korte videoen vil gå gjennom en kommentar blir gjort, moderert og innlemmet i området.