Byg en hurtig reaktiv blog med svelte og sorte

Sapper er en ramme bygget oven på Svelte. Det fokuserer på hastighed ud af boksen med servergengivelse, link preloading og evnen til at skabe servicearbejdere. Kombineret med Svelte er slutresultatet et meget tilpasset, lynhurtigt sted med et lille fodspor.

I denne tutorial vil vi bruge sorte til at opbygge et letvægts blogging site ved hjælp af SVELTE-komponenter (se vores Sådan starter du en blog post for nogle mindre tekniske tips om blogging). Svelte er en ramme med en forskel. Det analyserer koden på kompileringstid og skaber et sæt moduler i Vanille JavaScript, som undgår behovet for en runtime. Hvis du har brug for yderligere hjælp til layouts, så tjek vores indlæg på, hvordan du får den perfekte Website Layout. . Eller for andre muligheder, se disse top Website Builders. Og husk, du skal også få din Web Hosting. Service på punkt.

Download vejledningsfilerne på FileSilo her

01. Installer afhængigheder

For det første skal vi downloade og installere afhængigheder. Det er afhængig af Svelte til arbejde og kræver en anden ramme for at opbygge serveren, men resten afhænger af, at applikationen er bygget. I dette tilfælde har vi brug for et par pakker til at hjælpe med at udpakke markdown-filer senere.

Download vejledningsfilerne (ovenfor), find dem på kommandolinjen og installer afhængighederne.

> npm install

02. Build Out server

Sapper er bygget i to dele - klient-side-rammen og server-sidegengivelsen af ​​denne ramme. Dette hjælper med at få det ekstra hastighed boost for dem på langsommere netværk. Det er bygget ved hjælp af node, som gør det muligt for sorte middleware at gøre alt den tunge løft for os.

Åbn Server.js og opret serveren med Express. Ved hjælp af deres anbefalinger omfatter vi Kompression at krympe de filer, vi sender og SIRV. at tjene statiske filer.

 Udtryk ()
  .brug(
    kompression ({tærskel: 0}),
    sirv ("statisk", {dev}),
    sapper.middleware ()
  )
  .Liste (port); 

03. Monter ansøgningen

På klientsiden skal vi fortælle sorte, hvor vi skal montere applikationen. Dette svarer til at reagere DOM'S render. eller vue's. $ mount. metoder. Inde i klient.js, start sapper og monter den til roden & lt; div & gt; element. Dette element er inkluderet i skabelonfilen, som vi vil komme til senere.

 Import * som sapper fra "@ sapper / app";
sapper.start ({
  Mål: Document.GetelementById (
   "rod")
}); 

04. Start udviklingsserveren

Med de grundlæggende server og klientfiler oprettet, kan vi starte udviklingsserveren. Dette starter en bygning af server-, klient- og servicearbejderfilerne, og det starter som standard på port 3000. Når en fil ændres, vil den genopbygge den del af den ansøgning, der ændrede sig.

Kør serveren på kommandolinjen. Hold dette vindue åbent, mens du udvikler webstedet.

 & GT; NPM Run Dev 

05. Opret en serverrute

Alt i kataloget "ruter" vil blive til en rute til applikationen. Filer med .js. Udvidelsen bliver, hvad der hedder serverruter. Disse ruter har ingen brugergrænseflade, men i stedet bliver bedt om at hente data. I vores tilfælde vil vi bruge dem til at indlæse blogindlæg.

Det ruter / blog / index.json.js filen vil oprette /blog.json. endepunkt på vores server. Importer bloggene og opret nogle JSON fra dem.

 Importposter fra "./_posts.js";
const indhold = json.stringfall (
  Posts.Map (POST = & GT; ({
    Forfatter: Post.Author,
    Billede: Post.Image,
    Titel: Post.Title,
    Slug: Post.slug.
  }))
); 

06. returner blogindlægene

Serverruter Eksporter funktioner, der svarer til HTTP-metoder. For eksempel at reagere på en få anmodning, ville vi eksportere en funktion kaldet få fra serverrutefilen. Lave en få Funktion, der reagerer med de data, vi har indsamlet i det foregående trin i et JSON-format. Åben http: // localhost: 3000 / blog.json I browseren og kontrollerer indlægene kommer igennem.

 Eksportfunktion Get (req, res) {
  res.writehead (200, {
    "Content-type": "applikation / json"
  });

  res.end (indhold);
} 

07. Opret indeksside

Sider i sorte er almindelige Svelte-komponenter. Hver komponent er en enkelt fil med a .svelte. udvidelse, og indeholder al logik og styling til styring af sig selv. Ethvert JavaScript Denne komponent skal løbe vil leve inde i en & lt; script & gt; Tag - ligesom enhver HTML-side.

Inde ruter / index.svelte. , Importer et par andre Svelte-komponenter, som vi kan bruge til at opbygge denne side. Eksporter A. stillinger. Variabel, som vi vil fylde senere.

 & lt; script & gt;
  Import container fra
   "../Components/container.svelte";
  Import postsummary fra.
   "../Components/postsummary.svelte";
  eksport lader stillinger;
& lt; / script & gt; 

08. Hent blog postdata

Med siden oprettet, kan vi begynde at bringe blogindlæg (du måske vil gerne bakke dem op i Sky lagring ). Vi skal gøre dette, så snart siden er indlæst. For at serveren skal være opmærksom på dette og derefter anmode om disse data, når det gør siden, skal den gå i en separat & lt; script context = "modul" & gt; tag.

På serveren vil sorte søger en preload. funktion, og vent på, at den gennemføres, før du viser siden. Her vælger vi stillinger. variabel fra det foregående trin.

 & lt; script context = "modul" & gt;
  Eksporter ASync Funktion Preload () {
    const res = afventer
     this.fetch ("blog.json");
    const data = await res.s.jon ();
    Returner {Indlæg: Data};
  }
& lt; / script & gt; 

09. Display Post Summaries

I Svelte er variabler reaktive som standard. Det betyder, at som de opdaterer, vil vores komponenter også opdatere også. Som stillinger. Variablen indeholder nu en vifte af blogindlæg, vi kan løbe over disse og vise dem.

Vi kan gøre dette ved hjælp af en #hver blok. Disse vil gentage, hvad der er inde i parenteserne for hvert element i en matrix. I bunden af ​​komponenten, uden for eventuelle tags, tilføj HTML'en for at vise indlæg.

 & LT; Container & GT;
  & lt; ul & gt;
    {#each indlæg som post}
      & lt; li & gt;
        & lt; postsummary {... post} / & gt;
      & lt; / li & gt;
    {/hver}
  & lt; / ul & gt;
& lt; / beholder & gt; 

10. Stil beholderen

Vi kan bruge komponenter til at indeholde en gentagen logik og bruge dem, hvor de er nødvendige - Styles inkluderet. Det & lt; beholder & gt; Komponent gør i øjeblikket ikke noget, men vi kan bruge det til at give en maksimal bredde til indholdet inde i det.

Åben op komponenter / container.svelte. , og tilføj nogle stilarter inde i a & lt; stil & gt; tag. Eventuelle stilarter, som vi gælder inde i en komponent, scoped til den komponent, hvilket betyder, at vi kan bruge en generisk vælger.

 & lt; stil & gt;
  div {
    Margin: 0 Auto;
    Padding: 0 1rem;
    Max-bredde: 50rem;
  }
& lt; / Style & GT; 

11. Definer A & LT; slot & gt;

Hvis en komponent er designet til at være forælder til andre komponenter, har vi brug for en måde at passere disse komponenter gennem. Det & lt; slot & gt; Element gør det, og kan placeres overalt, der giver mening inde i en komponents markering.

Med & lt; beholder & gt; , Vi indpakker indholdet i en stylet & lt; div & gt; . Brug & lt; slot & gt; inde i & lt; div & gt; at lade alt andet igennem.

 & DIV & GT;
  & lt; slot / & gt;
& lt; / div & gt; 

12. Udsæt Postsummary rekvisitter

Ikke alle komponenter vil hente nogle data. Da vi lægger stillingerne fra hovedsidekomponenten, kan den overføres til de komponenter, det gør det gennem sine attributter.

Åben komponenter / postsummary.svelte. og definere nogle attributter øverst på filen. Disse bliver udfyldt af den spreadoperatør, vi tilføjede i trin 09.

 & lt; script & gt;
  eksport lader forfatter;
  eksport lad billede;
  eksport lad slug;
  eksport lader titel;
& lt; / script & gt; 

13. Display Blog Post Resumé

Når attributterne er befolket, er de så fået adgang til som enhver anden variabel. Ved at have separate attributter for hver del af postoversigten gør vi Markup lettere at læse.

I bunden af ​​komponenten skal du tilføje nogle HTML'er for at oprette resuméet. Klasserne vedrører de foruddefinerede stilarter.

& lt; artikel & GT;
& lt; div class = "post-image" stil = "
 BAGGRUND-billede: URL ({Image}) "/ & GT;
& lt; div class = "krop" & gt;
  & lt; div class = "Author-image" & GT;
    & lt; img src = {forfatter.image}
     alt = {forfatter.name} / & gt;
  & lt; / div & gt;
  & lt; div class = "om" & gt;
    & lt; h1 & gt; {titel} & lt; / h1 & gt;
    & lt; span class = "byline" & gt; by
     {Author.Name} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / Article & GT; 

14. Link til blogindlæg

I modsætning til lignende rammer som Next.js arbejder safer med regelmæssige ankerforbindelser. Ved opbygningstid er det i stand til at opdage interne links, og også at lave egne optimeringer.

Opdater markeringen fra det forrige trin ved at indpakke den i et link. Der er ikke behov for at oprette skabelonstrenge for at komponere den slugged url.

 & lt; a rel = "prefetch" href = "/ blog / {slug}" & gt;
  & lt; Artikel & GT; ... & LT; / Article & GT;
& lt; / A & GT; 

15. Hent et indlæg med slug

Sapper er i stand til at oprette sider baseret på URL-parametre. I vores tilfælde linker vi til / blog / slug, hvilket betyder at det gør komponenten på /ROUTES/BLOG/[slug].svelte. .

Inde i den komponent, hent blogdataene som vi gjorde for indekssiden. Det params. Objekt indeholder parametrene fra URL'en, som i dette tilfælde er sluggen.

 & lt; script context = "modul" & gt;
  Eksporter ASync-funktion
   preload ({params}) {
    const res = afventer denne.fetch (
     `blog / $ {params.slug} .json`);
    const data = await res.s.jon ();
  }
& lt; / script & gt; 

16. FEJL Hvis POST ikke findes

I modsætning til indekssiden er der en chance, der er ikke et blogindlæg på webadressen. I så fald skal vi vise en fejl. Sammen med Fetch. , det preload. Metoden omfatter også fejl der ændrer svaret på en fejlside i stedet.

I slutningen af ​​preloadmetoden, vis en fejl, hvis der ikke er nogen post fundet. Ellers skal du sætte stolpe variabel til siden.

 IF (RES.STATUS === 200) {
  returnere {post: data};
} ellers {
  denne.Error (res.status,
    data.message);
} 

17. Vis blogindlægget

Med de hentede data kan vi nu vise posten på siden. Ligesom Postsummary-komponenten viser vi hver del af postens indhold inde i krøllede parenteser. I bunden af ​​komponenten skal du tilføje noget Markup for at vise på siden.

 & lt; Artikel & GT;
  & lt; beholder & gt;
    & lt; div class = "titel" & gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; div class = "byline" & gt; by
       {post.author.name} & lt; / div & gt;
    & lt; / div & gt;
    & lt; img class = "post-image" src = {post.image} alt = "" / & gt;
     {post.html}
  & lt; / beholder & gt;
& lt; / Article & GT; 

18. Vis HTML i stedet

Ser på siden Nu viser alt korrekt adskilt fra det faktiske postindhold. Markdown-konvertering genererer HTML, men vi ser det, der er trykt som tekst på selve posten. Sapper har en HTML-parser indbygget i denne sag. Placering @html. Foran den vil bruge denne parser.

 {@ html post.html} 

19. Indstil side & lt; Titel & GT; værdi

Vores blog fungerer korrekt, men der er et par ændringer, der er nødvendige for at afslutte det. En af dem er at opdatere & lt; titel & gt; På siden for at relaBel den fane vises den i.

Svelte understøtter A. & lt; Svelte: Head & GT; element, som injicerer noget inde i det i & lt; hoved & gt; af siden. Brug dette til at indstille titlen på posten som & lt; titel & gt; .

 & LT; SVELTE: Head & GT;
  & lt; titel & gt; {post.title} |
   Sapper blog & lt; / titel & gt;
& lt; / svelte: Head & GT; 

20. Opdatering af & lt; titel & gt;

Hver side går gennem en skabelon for at stemple HTML'en for resten af ​​siden. Det er her, hvor enhver installation som f.eks. Font import og meta tags ville blive indtastet. Åbn Template.html, og tilføj i en krog for indholdet af & lt; Svelte: Head & GT; element fra det foregående trin. Tilføj dette lige før lukningen & lt; / Head & GT; tag.

 & LT; Head & GT;
  [...]% sorte. Head%
& lt; / Head & GT; Den sidste ting, vi skal tilføje, er et layout til bloggen. I stedet for at indpakke hver side i en komponent, vil søren se efter en "_layout.svelte" -fil til at gøre dette job for os.
Inside _layout.svelte, importere & lt; header & gt; komponent og vise det øverst på hver side. Det giver et bekvemt link tilbage til hjemmesiden. 

21. Tilføj permanent header

Den endelige ting, vi skal tilføje, er et layout til bloggen. I stedet for at indpakke hver side i en komponent, vil sorte søger en _layout.svelte. Fil til at gøre dette job for os. Inde _layout.svelte. , importerer & lt; header & gt; komponent og vise det øverst på hver side. Det giver et praktisk link tilbage til hjemmesiden.

 & lt; script & gt;
  Import header fra
   "../Components/header.svelte";
& lt; / script & gt;
& lt; Main & GT;
  & lt; header / & gt;
  & lt; slot / & gt;
& lt; / Main & GT; 

Dette indhold optrådte oprindeligt på webdesigneren.

• Webkomponenter: The Ultimate Guide
• 30 kromforlængelser til webdesignere og devs
• 52 Web Design Tools til at hjælpe dig med at arbejde smartere i 2019