JAMstack Opmerkingen

0
23

JAMstack sites worden vaak gezien als statisch. Een meer accurate mentale model voor hen zou zijn dat ze zijn sites die de mogelijkheid hebben om te worden gehost statisch. Het verschil lijkt misschien semantische, maar dankzij de opkomst van de vele tools en diensten die vereenvoudiging van het runnen van een op te bouwen en implementeren van statische hosting infrastructuur, zoals sites voel me veel frisser en dynamischer dan je zou denken, terwijl nog steeds in staat wordt geserveerd van statische hosting infrastructuur, met alle voordelen van dien.

Een functie vaak gebruikt als een voorbeeld van waarom een site kan worden gehost statisch is commentaar. Een commentaar-engine moet verwerken inzendingen, kunnen modereren, en is door zijn aard, “dynamisch”.

Commentaar systemen worden over het algemeen gezien als een heel dynamische content

Dankzij de groeiende ecosysteem tools beschikbaar voor JAMstack sites, er zijn oplossingen voor dit. Laten we bekijkt u een voorbeeld die je kan gebruiken op je eigen site:

  • Niet afhankelijk van cleint-side JavaScript
  • Kunnen werken met een static site generator
  • Voorzien van moderatie
  • Krijgt u een melding wanneer er nieuwe reacties moeten modereren
  • Bakt de opmerkingen in uw site, zodat ze snel laden en verschijnen in zoekopdrachten

Dit voorbeeld maakt gebruik van enkele van de functies van Netlify, een platform voor het automatiseren, te implementeren en hosten van web projecten, maar veel van de principes kunnen worden gebruikt met andere platformen.

U kunt de voorbeeld site hier.

Stashing onze content

We maken 2 formulieren te ontvangen al onze opmerkingen in de verschillende fasen van hun reis van de reageerder aan de inhoud. Wanneer Netlify ziet een <form>, het creëert een unieke data op te slaan voor de gegevens van het formulier verzamelt. We maken veel gebruik van.

  • Vorm 1) Een wachtrij om alle nieuwe reactie inzendingen. In andere woorden, een winkel om alle reacties in afwachting van moderatie.
  • Formulier 2) Bevat alle goedgekeurde reacties.

De wet van matiging zal iemand zijn die op zoek bij elk nieuw indiening en beslissing, “yep!” of “nee!”. Degenen die krijgen nope-d zal worden verwijderd uit de wachtrij. Degenen die zijn goedgekeurd zal worden geplaatst over de goedgekeurde reacties vorm.

Alle opmerkingen in de opmerkingen goedgekeurd formulier worden gebruikt door onze static site generator in de daaropvolgende site bouwt dankzij de API-toegang Netlify geeft de inzendingen in onze formulieren.

De reactie formulier

Elke pagina bevat een HTML – <formulier>. Door het toevoegen van de boolean attribuut van netlify naar een HTML-formulier element in uw site, Netlify zal het automatisch genereren van een API voor het formulier in en verzamelt alle inzendingen voor u. U zult ook in staat zijn om toegang te krijgen tot de inzendingen via die API later. Handig!

De opmerkingen <form> op elke pagina ziet er een stuk als dit (sommige klassen en extra kopie weggelaten voor de duidelijkheid):

<form netlify name=”comments-wachtrij” action=”/bedankt”>
<input name=”path” type=”hidden” value=”{{ pagina.url }}”>
<p>
<label for=”naam”>naam</label>
<input type=”text” name=”naam” id=”naam”>
</p>
<p>
<label for=”email”>e-mail</label>
<input type=”email” name=”email” id=”email”>
</p>
<p>
<label for=”reactie”>reactie</label>
<textarea name=”opmerking” id=”comment”></textarea>
</p>
<p>
<button type=”submit”>plaats je reactie</button>
</p>
</form>

U zult merken dat het formulier bevat ook een type=”hidden” veld om ons te laten weten welke pagina op de site van dit commentaar. Onze static site generator vult dat voor ons wanneer de site wordt gegenereerd, en ook later te gebruiken bij het bepalen van welke opmerkingen moeten worden weergegeven op die pagina.

De mededelingen en kennisgevingen

Wanneer een nieuwe opmerking is geplaatst via het reactie formulier, Netlify niet alleen stashes die voor ons, maar kan ook het verzenden van een kennisgeving. Dat kan zijn:

  • een e-mail
  • een Slap melding
  • een web haak van onze keuze.

Deze geven ons de kans om het automatiseren van dingen een beetje.

Nieuwe inzendingen resulteren in een mededeling geplaatst te Slabakken. We krijgen te zien wat werd ingediend en op welke pagina er in onze Slappe opdrachtgever.

Om dingen extra glad, kunnen we de massage van de kennisgeving een beetje aan zijn actie knoppen. Een knop om de reactie te verwijderen, een goed te keuren. De goedkeuring van een nieuwe opmerking van een Olierijke melding op uw telefoon tijdens het rijden van de bus voelt goed.

We kunnen het niet maken van deze knoppen werken zonder een beetje van de logica die we kunnen doen in een Lambda functie. Netlify onlangs toegevoegde ondersteuning voor Lambda functies, waardoor het proces van het schrijven en implementeren van Lambdas deel van dezelfde implementatie proces. U zult geen behoefte om te gaan snuffelen rond op Amazon AWS configuratie-instellingen.

We gebruiken een Lambda functie voor het toevoegen van sommige knoppen om onze Slappe kennisgeving, en nog een Lambda functie voor het verwerken van de acties van het klikken op één van deze knoppen.

Breng de reacties op de site

Met een vers goedgekeurd reactie wordt geplaatst op onze goedgekeurde reacties vorm, we zijn weer met behulp van de indiening event triggers die Netlify biedt. Elke keer als er iets wordt gepost naar de goedgekeurde reacties vorm, we willen opnemen in de site, dus we hebben Netlify automatisch bouwen en implementeren van onze site.

De meeste static site generators hebben een idee van gegevens in bestanden. Jekyll maakt gebruik van de bestanden in een [_data] directory, Hugo heeft een vergelijkbare gegevens-map. In dit voorbeeld is het gebruik van Eleventy als de static site generator, die heeft een vergelijkbaar concept. We maken er gebruik van.

Elke keer dat wij onze site bouwen, of in onze lokale ontwikkeling, milieu of binnen Netlify door hun geautomatiseerde builds, de eerste stap is dan om al onze externe gegevens in de lokale data bestanden te gebruiken die onze ESG dan kunt gebruiken. We doen dat met een Slok taak.

Gewapend met een `opmerkingen.json` bestand die we hebben samengesteld op basis van een oproep tot Netlify de verzending van het formulier API die pakte al onze goedgekeurd commentaar, onze ESG kunt nu bouwen aan de site als normaal en bak de juiste opmerkingen rechts in de HTML-code van onze pagina ‘ s.

Enkele voordelen

Nou dat was leuk, maar waarom al die moeite?

Ja, je zou kunnen gebruiken iets van Disqus opmerkingen toevoegen aan een statisch gehoste site via een paar regels JavaScript. Maar dat voegt een extern JavaScript-afhankelijkheid en de resultaten in de opmerkingen over uw content woon ver weg van de inhoud zelf. En het is alleen beschikbaar, wanneer de JavaScript is geladen, trok in de gegevens en vervolgens geïnjecteerd in uw site.

Overwegende dat deze methode resulteert in reacties die worden gebakken recht in de inhoud van uw site. Ze worden in zoekopdrachten op Google en ze laden als onderdeel van uw site, zonder de noodzaak voor een client-side JavaScript.

Nog beter, ze zullen beschikbaar voor u om te plegen recht in je code-archief met de rest van je content, waardoor je meer rust en draagbaarheid in de toekomst.

De voorbeeld site en alle van de code zijn beschikbaar om te verkennen. U kunt proberen het indienen van opmerkingen als je wilt (hoewel arme, oude Phil moet matige eventuele opmerkingen over deze voorbeeld site voordat ze worden weergegeven, maar dat zal alleen maken hem geliefd voelen).

Beter nog, u kunt een kopie van dit voorbeeld en implementeren van uw eigen versie te Netlify met slechts een paar klikken. De voorbeeld site legt uit hoe.

Toon me achter de schermen nu!

Als je zou willen om een kijkje te nemen hoe de dingen zich gedragen voor de moderator van een website met behulp van dit systeem zonder het grijpen van een kopie van uw eigen, deze korte video zal lopen door middel van een opmerking worden gemaakt, beheerd en verwerkt in de site.