Bauen Sie einen schnellen reaktiven Blog mit Svelte und Sapper

Sapper ist ein Rahmen, der auf Svelte aufgebaut ist. Es konzentriert sich auf die Geschwindigkeit aus der Box mit Server-Rendering, Link-Vorladung und der Fähigkeit, Service-Arbeiter zu erstellen. Das Endergebnis kombiniert mit Svelte ist ein hoch anpassbarer, blitzschneller Standort mit einem kleinen Fußabdruck.

In diesem Tutorial verwenden wir SAPPER, um eine leichte Blogging-Site mit SVELTE-Komponenten aufzubauen (siehe unsere So starten Sie einen Blog Post für einige weniger technische Tipps zum Bloggen). Svelte ist ein Rahmen mit einem Unterschied. Es analysiert den Code bei der Kompilierzeit und erstellt einen Satz von Modulen in Vanille JavaScript, das die Notwendigkeit einer Laufzeit vermeidet. Wenn Sie weitere Hilfe mit Layouts benötigen, schauen Sie sich unseren Beitrag an, wie Sie das perfekte bekommen Website-Layout. . Oder für andere Optionen sehen Sie diese Oberseite Website-Builders. Und denken Sie daran, Sie müssen auch Ihre bekommen Web-Hosting Service an Punkt.

Laden Sie die Tutorial-Dateien auf Dateisilo herunter

01. Installation von Abhängigkeiten

Erstens müssen wir Abhängigkeiten herunterladen und installieren. Es stützt sich auf SVELTE, um zu arbeiten, und erfordert einen anderen Framework, um den Server zu erstellen, der Rest hängt jedoch von der aufgebauten Anwendung ab. In diesem Fall benötigen wir ein paar Pakete, um den späteren Anschluss von Markdown-Dateien zu extrahieren.

Laden Sie die Tutorialialdateien (oben) herunter, finden Sie sie in der Befehlszeile und installieren Sie die Abhängigkeiten.

> npm install

02. Erstellen Sie den Server aus

Sapper ist in zwei Teilen gebaut - der kundenseitige Framework und die serverseitige Rendering dieses Rahmens. Dies hilft, diesen zusätzlichen Geschwindigkeitsschub für diejenigen auf langsameren Netzwerken zu erhalten. Es wird mit Knoten erstellt, wodurch die SAPPER-Middleware das gesamte heftige Anheben für uns ermöglicht.

Erstellen Sie server.js und erstellen Sie den Server mit Express. Mit ihren Empfehlungen beinhalten wir Kompression um die Dateien zu verkleinern, die wir senden und Sirv statische Dateien bedienen.

 express ()
  .benutzen(
    Komprimierung ({Schwellenwert: 0}),
    Sirv ("static", {dev}),
    sapper.middleware ()
  )
  .Listen (Port); 

03. Montieren Sie den Antrag

Auf der Clientseite müssen wir SAPPER sagen, wo er den Antrag montieren soll. Dies ist ähnlich der Reaktion von Doms machen oder VUE $ montieren. Methoden. Innerhalb von Client.js, starten Sie den SAPPER und montieren Sie es an der Wurzel & lt; div & gt; Element. Dieses Element ist in der Vorlagendatei enthalten, auf die wir später kommen werden.

 Import * als Sapper von "@ Sapper / App";
sapper.start ({{
  Ziel: document.getelementbyId (
   "Wurzel")
}); 

04. Starten Sie den Entwicklungsserver

Mit den grundlegenden Server- und Client-Dateien können wir den Entwicklungsserver starten. Dies beginnt einen Build von Server-, Client- und Service Worker-Dateien, und es startet standardmäßig mit Port 3000. Immer wenn eine Datei ändert, wird der Teil der geänderten Anwendung umgebaut.

Führen Sie den Server auf der Befehlszeile aus. Halten Sie dieses Fenster während der Entwicklung der Website offen.

 & gt; NPM Run dev 

05. Erstellen Sie eine Serverroute

Alles im Verzeichnis "Routen" wird in eine Route für die Anwendung verwandelt. Dateien mit dem. .js. Erweiterung wird, was als Serverrouten bezeichnet wird. Diese Routen haben keine UI-Benutzeroberfläche, sondern werden von der Anwendung, um Daten abzurufen. In unserem Fall verwenden wir sie, um Blogbeiträge zu laden.

Das Routen / Blog / index.json.js Die Datei erstellt das /blog.json. Endpunkt auf unserem Server. Importieren Sie die Blog-Beiträge und erstellen Sie einige JSON von ihnen.

 Importieren von Beiträgen von "./_posts.js";
const Inhalt = JSON.Stringify (
  posts.map (post = & gt; ({{
    Autor: post.author,
    Bild: post.image,
    Titel: post.title,
    Slug: post.slug.
  }))
); 

06. Bringen Sie die Blogbeiträge zurück

Serverrouten Exportfunktionen, die mit HTTP-Methoden entsprechen. Um beispielsweise auf eine Get-Anfrage zu antworten, würden wir eine Funktion exportieren. erhalten von der Server-Routendatei. Ein ... kreieren erhalten Funktion, die mit den Daten reagiert, die wir im vorherigen Schritt in einem JSON-Format gesammelt haben. Öffnen http: // localhost: 3000 / blog.json Im Browser und überprüfen Sie die Beiträge.

 Exportfunktion GET (REQ, RES) {
  res.writehead (200, {
    "Content-Type": "Application / JSON"
  });

  res.end (Inhalt);
} 

07. Indexseite erstellen

Seiten in Sapper sind regelmäßige Svelte-Komponenten. Jede Komponente ist eine einzelne Datei mit a .svelte. Erweiterung und enthalten alle Logik und Styling, um sich selbst zu verwalten. Javascript, das diese Komponente ausführen muss, lebt in einem & lt; script & gt; Tag - wie jede HTML-Seite.

Innerhalb Routen / Index.svelte. , Importieren Sie ein paar andere SVELTE-Komponenten, mit denen wir diese Seite erstellen können. Export A. Beiträge Variable, dass wir später auffüllen werden.

 & lt; script & gt;
  Container von importieren
   "../Components/container.svelte";
  Postsummary von importieren
   "../Components/postsummary.svelte";
  Exportieren lassen Sie Pfosten;
& lt; / script & gt; 

08. Fetch Blog Postdaten

Mit der eingerichteten Seite können wir anfangen, Blog-Beiträge zu bringen (Möglicherweise möchten Sie sie wieder unterstützen Cloud-Speicherung. ). Wir müssen dies tun, sobald die Seite geladen ist. Damit der Server sich dessen bewusst ist, und diese Daten anfordern, wenn er die Seite erstellt, muss er in einem separaten fortfahren & lt; Skriptkontext = "Modul" & GT; Etikett.

Auf dem Server sucht Sapper nach einem Vorspannung Funktion, und warten Sie, bis es abgeschlossen ist, bevor Sie die Seite anzeigen. Hier füllen wir die Beiträge Variable aus dem vorherigen Schritt.

 & lt; Skriptkontext = "Modul" & GT;
  Async-Funktion exportieren () {) {
    const res = warten
     this.fetch ("blog.json");
    const data = warten res.json ();
    Rückgabe {Beiträge: Daten};
  }
& lt; / script & gt; 

09. POST-Zusammenfassungen anzeigen

In Svelte sind die Variablen standardmäßig reaktiv. Dies bedeutet, dass unsere Komponenten, wie sie aktualisieren, auch aktualisieren werden. Als die Beiträge Variable Hält jetzt ein Array von Blogbeiträgen, wir können diese einschließen und sie anzeigen.

Wir können dies mit einem tun #jeder Block. Diese werden wiederum wiederholen, was sich in den Klammern für jeden Artikel in einem Array befindet. Fügen Sie am unteren Rand der Komponente außerhalb jeder Tags den HTML hinzu, um die Beiträge anzuzeigen.

 & lt; container & gt;
  & lt; ul & gt;
    {#ach Beiträge als Post}
      & lt; li & gt;
        & lt; postsummary {... post} / & gt;
      & lt; / li & gt;
    {/jeder}
  & lt; / ul & gt;
& lt; / container & gt; 

10. Stil der Behälter

Wir können Komponenten verwenden, um wiederholte Logik zu enthalten, und verwenden Sie sie, wo immer sie benötigt werden. Das & lt; container & gt; Die Komponente macht derzeit nichts, aber wir können es verwenden, um den Inhalt der Inhalte eine maximale Breite zu ergeben.

Aufmachen Komponenten / Container.svelte. und fügen Sie ein paar Stilen in einem hinzu & lt; style & gt; Etikett. Alle Stile, die wir in einem Bauteil anwenden, werden an dieser Komponente abgebaut, was bedeutet, dass wir einen generischen Selektor verwenden können.

 & lt; style & gt;
  div {
    Marge: 0 Auto;
    Polsterung: 0 1REM;
    Max-Breite: 50REM;
  }
& lt; / style & gt; 

11. Definieren Sie A & lt; Slot & GT;

Wenn eine Komponente als Elternteil der anderen Komponenten ausgelegt ist, benötigen wir einen Weg, um diese Komponenten durchzugeben. Das & lt; Slot & GT; Das Element tut dies nur und kann überall aufgestellt werden, wodurch ein Sinn in der Markierung eines Bauteils ist.

Mit & lt; container & gt; , wickeln wir den Inhalt in einem gestalteten & lt; div & gt; . Benutzen & lt; Slot & GT; in der. & lt; div & gt; alles andere durchlassen.

 & lt; div & gt;
  & lt; Slot / & gt;
& lt; / div & gt; 

12. Nehmen Sie postsummarische Requisiten aus

Nicht jede Komponente wird einige Daten abrufen. Da wir die Beiträge von der Hauptseite des Hauptseitenkomponenten laden, kann er an die Komponenten übertragen werden, die sie über seine Attribute ergeben.

Öffnen Komponenten / postsummary.svelte. und definieren Sie einige Attribute oben in der Datei. Diese werden vom Spread-Betreiber ausgefüllt, den wir in Schritt 09 hinzugefügt haben.

 & lt; script & gt;
  Export Lassen Sie den Autor;
  Exportieren lassen Sie das Bild;
  Export Let Slug;
  Exportieren Sie Titel;
& lt; / script & gt; 

13. Zeigen Sie Blog-Post-Summary an

Wenn die Attribute aufgefüllt sind, werden sie dann auf jede andere Variable aufgerufen. Durch getrennte Attribute für jeden Teil der Pfostenzusammenfassung können wir das Markup leichter lesen.

Fügen Sie am unteren Rand der Komponente etwas HTML hinzu, um die Zusammenfassung zu erstellen. Die Klassen beziehen sich auf die vordefinierten Stile.

 & lt; Artikel & GT;
& lt; div class = "post-image" style = "
 Background-Image: URL ({Bild}) "/ & gt;
& lt; div class = "body" & gt;
  & lt; Div Class = "Autor-Image" & GT;
    & lt; img src = {author.image}
     alt = {autor.name} / & gt;
  & lt; / div & gt;
  & lt; div class = "Über" & gt;
    & lt; H1 & GT; {title} & lt; / h1 & gt;
    & lt; span class = "byline" & gt; von
     {author.name} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / article & gt; 

14. Link zum Blog-Beitrag

Im Gegensatz zu ähnlichen Rahmenbedingungen wie Next.js arbeitet Sapper mit regelmäßigen Ankerlinks. Bei der Bauzeit ist es in der Lage, interne Verbindungen zu erkennen und auch seine eigenen Optimierungen zu erstellen.

Aktualisieren Sie das Markup aus dem vorherigen Schritt, indem Sie ihn in einen Link einwickeln. Es ist nicht erforderlich, dass Sie Templat-Saiten erstellen, um die mitgeriebene URL komponieren zu können.

 & lt; ein rel = "Prefetch" href = "/ Blog / {Slug}" & gt;
  & lt; art art art; / art; / article & gt;
& lt; / a & gt; 

15. Holen Sie sich einen Beitrag von Slug

Sapper kann Seiten basierend auf URL-Parametern erstellen. In unserem Fall verlinken wir auf / Blog / Slug, was bedeutet, dass er die Komponente bei macht /Routes/blog/[lug.svelte. .

Holen Sie sich in dieser Komponente die Blog-Daten, wie wir für die Indexseite getan haben. Das Parameter Objekt enthält die Parameter der URL, die in diesem Fall der Slug ist.

 & lt; Skriptkontext = "Modul" & GT;
  Async-Funktion exportieren
   Preload ({Parameter}) {
    const RES = warten diese.Fetch (
     `Blog / $ {params.slug} .json`);
    const data = warten res.json ();
  }
& lt; / script & gt; 

16. Fehler, wenn der Beitrag nicht gefunden wird

Im Gegensatz zur Indexseite gibt es eine Chance, dass es keine Blog-Post in der URL gibt. In diesem Fall sollten wir einen Fehler anzeigt. Zusammen mit holen , das Vorspannung Methode umfasst auch Error Das ändert stattdessen die Antwort auf eine Fehlerseite.

Zeigen Sie am Ende der Preload-Methode einen Fehler auf, wenn kein Beitrag vorhanden ist. Ansonsten setzen Sie das Post Variable für die Seite.

 if (res.status === 200) {
  Rückgabe {Beitrag: Daten};
} else {
  diese.Error (res.Status,
    data.message);
} 

17. Zeigt den Blog-Beitrag an

Mit den abgerufenen Daten können wir jetzt den Beitrag auf der Seite anzeigen. Ähnlich wie bei der postsummarischen Komponente zeigen wir jedem Teil des Inhalts des Post in lockigen Klammern an. Fügen Sie am unteren Rand der Komponente etwas MarkUp hinzu, um auf der Seite anzuzeigen.

 & lt; Artikel & GT;
  & lt; container & gt;
    & lt; div class = "title" & gt;
      & lt; H1 & GT; {post.title} & lt; / h1 & gt;
      & lt; div class = "byline" & gt; von
       {post.Author.name} & lt; / div & gt;
    & lt; / div & gt;
    & lt; img class = "post-image" src = {post.image} alt = "" / & gt;
     {post.html}
  & lt; / container & gt;
& lt; / article & gt; 

18. Sehen Sie sich HTML an

Wenn Sie die Seite jetzt ansehen, zeigt alles außer dem eigentlichen Postinhalt korrekt angezeigt. Die Markdown-Konvertierung generiert HTML, aber wir sehen, dass er als Text auf der Post selbst gedruckt wird. Sapper hat einen HTML-Parser, der für diesen Fall eingebaut ist. Platzierung @HTML. Daneben wird dieses Parser verwendet.

 {@ html post.html} 

19. Set Page & lt; Titel & GT; Wert

Unser Blog funktioniert ordnungsgemäß, aber es sind ein paar Änderungen erforderlich, um es zu beenden. Eine davon ist, das zu aktualisieren & lt; Titel & GT; Auf der Seite, um die Registerkarte zu relabelisieren, in der es angezeigt wird.

Svelte unterstützt A. & lt; svelte: head & gt; Element, das etwas darin injiziert & lt; head & gt; der Seite. Verwenden Sie diese Option, um den Titel des Beitrags als einzustellen & lt; Titel & GT; .

 & lt; svelte: head & gt;
  & lt; titel & gt; {post.title} |
   Sapper Blog & lt; / title & gt;
& lt; / svelte: head & gt; 

20. Aktualisieren der & lt; Titel & GT;

Jede Seite geht über eine Vorlage, um das HTML für den Rest der Seite auszudrücken. Hier würden jedes Setup wie Schrift-Import- und Meta-Tags eingegeben. Öffnen Sie template.html und fügen Sie einen Haken für den Inhalt der & lt; svelte: head & gt; Element aus dem vorherigen Schritt. Füge das in kurz vor dem Schließen hinzu & lt; / head & gt; Etikett.

 & lt; head & gt;
  [...]
  % sapper.head%
& lt; / head & gt; das endgültige, was wir hinzuzufügen, ist ein Layout für den Blog. Anstatt jede Seite in einer Komponente zu wecken, sucht Sapper nach einer Datei "_layout.svelte", um diesen Job für uns zu erledigen.
Innen _layout.svelte, importieren Sie den & lt; header & gt; Komponente und zeigen Sie das oben auf jeder Seite. Es bietet eine komfortable Verbindung auf die Homepage zurück. 

21. Fügen Sie permanente Header hinzu

Die endgültige Sache, die wir hinzufügen müssen, ist ein Layout für den Blog. Anstatt jede Seite in einer Komponente zu wecken, sucht Sapper nach einem _LAYOUT.SVELTE. Datei, um diesen Job für uns zu erledigen. Innerhalb _LAYOUT.SVELTE. , importieren Sie den & lt; Header & GT; Komponente und zeigen Sie das oben auf jeder Seite. Es bietet einen komfortablen Link auf die Homepage zurück.

 & lt; script & gt;
  Header von importieren
   "../Components/header.svelte";
& lt; / script & gt;
& lt; main & gt;
  & lt; Header / & gt;
  & lt; Slot / & gt;
& lt; / main & gt; 

Dieser Inhalt erschien ursprünglich im Webdesigner.

• Webkomponenten: der ultimative Guide
• 30 Chrome-Erweiterungen für Webdesigner und Devs
• 52 Webdesign-Tools, mit denen Sie 2019 intelligenter arbeiten können