JAMstack Kommentare

0
43

JAMstack-Seiten werden oft als statisch. Ein genaueres mentales Modell für Sie wäre, dass Sie Websites, die die Fähigkeit haben, gehostet werden statisch. Der Unterschied mag semantischen, aber Dank des Aufstiegs der viele tools und Dienste, die Vereinfachung der Laufenden ein erstellen und implementieren statische hosting-Infrastruktur, können solche Seiten fühlen sich viel frischer und dynamischer, als Sie sich vorstellen können, während noch in der Lage, serviert von statischen hosting-Infrastruktur, mit allen Vorteilen, die das bringt.

Ein feature Häufig verwendet, als ein Beispiel, warum eine Webseite nicht gehostet werden statisch ist Kommentare. Kommentare engine benötigt, behandeln die Beiträge, die erlauben, für eine moderation und ist durch seine Natur, “dynamic”.

Kommentar-Systeme sind in der Regel gedacht als eine Recht dynamische Inhalte

Dank der wachsenden ökosystem von tools zur Verfügung, die für JAMstack Websites, es gibt Lösungen. Let ‘ s aussieht, an ein Beispiel, das könnten Sie auf Ihrer eigenen Website, die:

  • Hängt nicht von cleint-Seite JavaScript
  • Könnte arbeiten mit einem statischen Website-generator
  • Enthält moderation
  • Sendet Benachrichtigungen, wenn neue Kommentare moderieren müssen
  • Backt die Kommentare in Ihre Website, so dass Sie schnell geladen werden und erscheinen in der Suche

Dieses Beispiel macht die Nutzung einiger Funktionen von Netlify, eine Plattform für die Automatisierung, Bereitstellung und hosting von web-Projekten, aber viele der Prinzipien, die verwendet werden könnten, mit anderen Plattformen.

Sehen Sie die Beispiel-Website hier.

Aufhänger für unsere Inhalte

Wir werden 2-Formen erhalten alle unsere Kommentare bei den verschiedenen Etappen Ihrer Reise vom Kommentator zum Inhalt. Wenn Netlify sieht ein <form>, es schafft eine einzigartige Daten-Speicher für die Daten des Formulars speichert. Wir machen große Nutzung.

  • Form 1) Eine Warteschlange, in der alle von der neuen Kommentar-Beiträge. In anderen Worten, ein Geschäft zu halten und alle Kommentare warten auf moderation.
  • Form 2) Enthält alle genehmigten Kommentare.

Der Akt der moderation wird jemand sein, der auf der Suche bei jeder neuen Vorlage und der Entscheidung, “ja!” oder “NÖ!”. Diejenigen, die bekommen, Nein, d wird aus der Warteschlange gelöscht. Diejenigen, die zugelassen sind, veröffentlicht werden, über die zugelassenen Kommentare bilden.

Alle Kommentare aus dem genehmigten Kommentare bilden unsere statische Website-generator in nachfolgenden Seite baut Dank der API-Zugriff Netlify gibt, um die Eingaben in unsere Formulare.

Das Kommentar-Formular

Jede Seite enthält ein HTML – <form>. Durch das hinzufügen der boolean-Attribut netlify beliebigen HTML-Formular-element in Ihre Website, Netlify wird automatisch generiert eine API für Ihre form, und sammelt alle Veröffentlichungen, um es für Sie. Sie werden auch in der Lage sein, um Zugriff auf die Veröffentlichungen über die API später. Praktisch!

Die Kommentare <form> auf jeder Seite sieht viel wie diese (einige Klassen und zusätzliche Kopie der Deutlichkeit halber weggelassen):

<form netlify name=”comments-queue” action=”/danke”>
<input name=”Pfad” type=”hidden” value=”{{ page.- url }}”>
<p>
<label for=”name”>Ihr name</label>
<input type=”text” name=”name” id=”name”>
</p>
<p>
<label for=”email”>Ihre E-Mail</label>
<input type=”email” name=”email” id=”email”>
</p>
<p>
<label for=”Kommentar”>Ihr Kommentar</label>
<textarea name=”Kommentar” id=”Kommentar”></textarea>
</p>
<p>
<button type=”submit”>Post your comment</button>
</p>
</form>

Sie werden möglicherweise feststellen, dass das Formular enthält auch einen type=”hidden” – Feld, lassen Sie uns wissen, welche Seite auf der Website dieser Kommentar ist für. Unsere statische Website-generator füllt, die für uns, wenn die Seite generiert wird, und auch später bei der Entscheidung, welche Kommentare angezeigt werden sollen, auf die Seite.

Einreichungen und Benachrichtigungen

Wenn ein neuer Kommentar gepostet wird, über das Kommentar-Formular, Netlify nicht nur Verstecke, die für uns, sondern kann auch eine Benachrichtigung senden. Das könnte sein:

  • eine E-Mail
  • ein Locker-Benachrichtigung
  • ein web-hook unserer Wahl.

Diese geben uns die chance zu automatisieren, die Dinge ein wenig.

Neue Beiträge Ergebnis in einer Meldung veröffentlicht, zu Slack. Wir werden zu sehen bekommen, was eingereicht wurde und auf die Rechte Seite gibt es in unserer Slack-client.

Um Dinge zu machen, extra glatt, wir können die massage, die Meldung ein wenig, um einige action-buttons. Eine Schaltfläche zum löschen des Kommentars, eines zu genehmigen. Die Genehmigung einen neuen Kommentar von einem Slack-Benachrichtigung auf Ihrem Telefon während der Fahrt mit dem bus fühlt sich gut an.

Wir können nicht mit diesen Schaltflächen arbeiten, ohne ein bisschen Logik, die wir tun können, in eine Lambda-Funktion. Netlify kürzlich hinzugefügte Unterstützung für Lambda-Funktionen zu, so dass der Prozess des Schreibens und die Bereitstellung von Lambdas Teil der gleichen deployment-Prozess. Sie werden nicht müssen gehen stöbern in Amazon ‘ s AWS-Konfiguration-Einstellungen.

Wir verwenden eine Lambda-Funktion, fügen Sie einige Schaltflächen, um unsere Slack-Benachrichtigung, und ein weiteres Lambda-Funktion behandeln Sie die Aktionen durch klicken auf diese Schaltflächen.

Bringen Sie die Kommentare in die Seite

Mit einem frisch zugelassenen Kommentar geschrieben zu unserem genehmigte Kommentare-Formular, wir werden wieder auf die Verwendung der Vorlage-Ereignis-Trigger haben, dass Netlify bietet. Jedes mal, wenn etwas gepostet wird, die zugelassenen Kommentare bilden, wir wollen Sie in die Seite, so haben wir Netlify automatisch neu erstellen und bereitstellen von unserer Website.

Die meisten statischen Website-Generatoren haben manche Vorstellung von Daten-Dateien. Jekyll verwendet Dateien in ein [_data] Verzeichnis, Hugo hat eine ähnliche Daten-Verzeichnis. Dieses Beispiel ist mit Eleventy als seine statische Website-generator, der hat ein ähnliches Konzept. Wir werden dies nutzen.

Jedes mal, wenn wir unsere Website zu erstellen, ob in unseren lokalen Entwicklungsumgebung oder innerhalb Netlify durch Ihre automatisierte builds, der erste Schritt ist, ziehen alle unsere externe Daten in lokalen Daten-Dateien, die unsere SSG-dann nutzen kann. Wir tun dies mit einem Schluck Aufgabe.

Bewaffnet mit einem `Kommentare.json` – Datei, die wir aufgefüllt haben, von einem call-zu Netlify die Formular-API, die packte alle unsere zugelassenen Kommentare, unsere SSG kann jetzt bauen Sie die Website als normal, und Backen Sie den richtigen Anmerkungen direkt in den HTML-Code von unseren Seiten.

Einige Vorteile

Nun, das war Spaß, aber warum die Mühe?

Ja, man könnte so etwas wie Disqus Kommentare auf eine statisch gehostete Website über ein paar Zeilen JavaScript. Aber fügt hinzu, dass eine externe JavaScript-Abhängigkeit und der Ergebnisse in den Kommentaren über Ihre Inhalte Leben Sie weit entfernt von dem Inhalt selbst. Und es ist nur verfügbar, wenn das JavaScript geladen wurde, zog in die Daten und dann injiziert es in Ihre Website.

In der Erwägung, dass diese Methode Ergebnisse in den Kommentaren, die gebacken werden direkt in den Inhalt Ihrer Website. Sie werden zeigen, bis bei der Suche auf Google und Sie werden laden Sie als Teil der Website ohne die Notwendigkeit für jede client-side JavaScript.

Noch besser, Sie werden für Sie zu Begehen, direkt in das code-repository mit dem rest Ihrer Inhalte, geben Ihnen mehr Frieden des Geistes und Mobilität in der Zukunft.

Die Beispiel Website und alle Ihre code gibt es zu entdecken. Sie können versuchen, Kommentaren, wenn Sie mögen (obwohl der Arme alte Phil müssen moderate alle Kommentare, die auf dieser Beispiel-Website, bevor Sie erscheinen, aber das wird nur machen Sie ihm das Gefühl, geliebt).

Besser noch, Sie können Klon diesem Beispiel und implementieren Ihre eigene version zu Netlify mit nur wenigen Klicks. Die Beispiel-Website erklärt, wie.

Nur zeigen Sie mir hinter den kulissen jetzt!

Wenn Sie wollen, um zu schauen, wie sich die Dinge Verhalten sich für den moderator einer Website, die mit diesem system ohne greifen Sie eine Kopie Ihrer eigenen, in diesem kurzen video wird der Spaziergang durch einen Kommentar gemacht, moderiert und integriert in die Website.