JAMstack Kommentarer

0
36

JAMstack platser ofta ses som statisk. En mer korrekt mental modell för dem skulle vara att de platser som har förmåga att vara värd för statiskt. Skillnaden kan kanske tyckas vara semantisk, men tack vare uppkomsten av många verktyg och tjänster som förenklar kör en bygga och driftsätta till statiska hosting infrastruktur, sådana områden kan känna sig mycket fräschare och dynamisk än du kan föreställa dig, medan du fortfarande kan bli serveras från statisk hosting infrastruktur, med alla de fördelar det för med sig.

En funktion som ofta används som ett exempel på varför en sida kan vara värd statiskt är kommentarer. En kommentarer motorn behöver för att hantera synpunkter, tillåta för moderering, och är till sin natur, “dynamic”.

Kommentar system är i allmänhet betraktas som ganska dynamiskt innehåll

Tack vare den växande ekosystem av verktyg som finns tillgängliga för JAMstack platser, det finns lösningar på detta. Låt oss tittar på ett exempel som du kan använda på din egen webbplats, som:

  • Beror inte på JavaScript på klientsidan
  • Kan arbeta med någon statisk webbplats generator
  • Har måtta
  • Skickar meddelanden när nya kommentarer måste modererar
  • Bakar kommentarer på din webbplats, så att de laddas snabbt och visas i sökningar

Detta exempel använder sig av några av funktionerna i Netlify, en plattform för att automatisera, distribuera och webbhotell projekt, men många av de principer som kan användas tillsammans med andra plattformar.

Du kan se exempel här webbplatsen.

Gömma undan vårt innehåll

Vi kommer att skapa 2 formulär för att ta emot alla våra synpunkter på de olika stadierna av sin resa från att kommentera innehållet. När Netlify ser ett <form> skapar en unik data lagra den data de samlar in. Vi kommer att göra stor nytta av det.

  • Blankett 1) En kö för att hålla alla nya kommentar inlagor. Med andra ord, en butik för att hålla alla kommentarer som väntar på moderering.
  • Blankett 2) Innehåller alla godkända kommentarer.

Lagen av den måtta att någon tittar på varje ny ansökan och beslutar, “japp!” eller “nej!”. De som får nej-d kommer raderas från kön. De som är godkända kommer att läggas över till den godkända kommentarer form.

Alla kommentarer i godkända kommentarer form används av våra statisk webbplats generator i efterföljande webbplats bygger tack till API-åtkomst Netlify ger till inlagor i våra formulär.

Kommentar formulär

Varje sida innehåller ett HTML <form>. Genom att lägga till den booleska attribut av netlify att alla HTML-formulär element på din webbplats, Netlify kommer automatiskt att generera ett API för din form, och samlar alla inlagor till det för dig. Du kommer också att kunna komma åt de inlägg via API senare. Praktiskt!

Kommentarer <form> på varje sida kommer att se en hel del som detta (vissa klasser och extra kopia utelämnas för tydlighetens skull):

<formen netlify name=”kommentar-kö” action=”/tack”>
<input name=”sökväg” type=”hidden” value=”{{ sida.url }}”>
<p>
<label for=”namn”>namn</label>
<input type=”text” name=”namn” id=”namn”>
</p>
<p>
<label for=”e-post”>Din e-post</label>
<input type=”e-post” name=”email” id=”e-post”>
</p>
<p>
<label for=”comment”>Din kommentar</label>
<textarea name=”kommentar” id=”comment”></textarea>
</p>
<p>
<button type=”submit”>lägga till din kommentar</button>
</p>
</form>

Du kanske märker att formuläret innehåller också en type=”hidden” – fältet för att låta oss veta vilken sida på webbplatsen denna kommentar är för. Våra statisk webbplats generator fyller det för oss när sajten är som genereras, och använda den senare när du bestämmer vilka kommentarer som ska visas på vilken sida.

Ansökningar och anmälningar

När en ny kommentar bokförs via kommentar-form, Netlify inte bara stashes som för oss, men kan också skicka en anmälan. Det kan vara:

  • ett e-postmeddelande
  • en Slack anmälan
  • en webb-krok för vårt val.

Dessa ger oss möjlighet att automatisera saker och ting lite.

Nya ansökningar resulterar i en anmälan att skickas till Slack. Vi får se vad som var fram och vilken sida mitt i vår Slack-klienten.

För att göra saker och ting extra slick, vi kan massera att anmälan har lite till att omfatta några åtgärder knapparna. En knapp för att ta bort kommentaren, att godkänna det. Om godkännande av ett nytt kommentar från en Slack meddelande på din telefon medan du kör bussen känns bra.

Vi kan inte göra dessa knappar fungerar utan att köra en liten bit av logik som vi kan göra i en Lambda-funktion. Netlify nyligen har lagt till stöd för Lambda-funktioner för att göra processen för att skriva och distribuera Lambdas del av samma spridning processen. Du behöver inte gå rotade runt i Amazon AWS konfigurationsinställningar.

Vi kommer att använda en Lambda funktion för att lägga på några knappar för att våra Slack anmälan, och en annan Lambda-funktion för att hantera åtgärder för att klicka på någon av dessa knappar.

Ta med kommentarerna i webbplatsen

Med en nyligen godkänd kommentar för att föras till vår godkända kommentarer form, vi är tillbaka till att använda inlämning händelse utlöser att Netlify erbjuder. Varje gång något publiceras på den godkända kommentarer form, vi vill inkludera det i området, så vi har Netlify automatiskt bygga om och sätta vår webbplats.

De flesta statisk webbplats generatorer har en del begrepp av datafiler. Jekyll använder filer i en [_data] katalog, Hugo har en liknande uppgifter katalog. Detta exempel är att använda Eleventy som statisk webbplats generator som har ett liknande koncept. Vi kommer att göra bruk av detta.

Varje gång vi kör vår webbplats bygga, oavsett om det är i vår lokal utveckling, miljö eller inom Netlify genom deras automatiserade versioner, det första steget är att dra alla våra externa data till lokala datafiler som våra SSG sedan kan använda. Vi gör det med en Klunk uppgift.

Beväpnad med en ” kommentarer.json-filen som vi har befolkat från ett samtal till Netlify s formulär API som tog alla våra godkända kommentarer, SSG kan nu bygga den webbplats som normal och grädda den korrekta kommentarer direkt i HTML-koden på våra sidor.

Några fördelar

Ja, det var kul, men varför bry sig?

Ja, du kan använda något som Disqus för att lägga till kommentarer till ett statiskt värd webbplats via ett par rader JavaScript. Men som lägger till en extern JavaScript beroende och resultat i kommentarerna om ditt innehåll som lever långt bort från själva innehållet. Och det är endast tillgängliga när JavaScript har lästs in, drog i data och sedan sprutas det på din webbplats.

Denna metod resulterar i kommentarer som är bakade rätt till innehåll på din webbplats. De kommer att visa upp i sökningar på Google och de kommer att läsas in som en del av din webbplats, utan att det behövs någon JavaScript på klientsidan.

Ännu bättre, kommer de att vara tillgängliga för dig att begå rätt in din kod förrådet med resten av ditt innehåll, vilket ger dig mer sinnesfrid och portabilitet i framtiden.

Exemplet webbplats och alla dess kod finns att utforska. Du kan prova att skicka in kommentarer om du vill (även om stackars gamla Phil kommer behovet av att dämpa eventuella synpunkter på detta exempel plats innan de visas, men det kommer bara få honom att känna sig älskad).

Ännu bättre, du kan klona detta exempel och distribuera dina egna version till Netlify med bara ett par klick. Exemplet webbplats som förklarar hur man gör.

Visa mig bara bakom kulisserna just nu!

Om du vill ta en titt på hur saker och ting beter sig för moderator för en webbplats med hjälp av detta system utan att ta tag i en kopia av din egen, den här korta videon kommer att gå genom en kommentar görs, modererade och integreras i webbplatsen.