Sestavte rychlý reaktivní blog se SVELTEM a SAPPER

SAPPER je rámec postavený na vrcholu SVELTE. Zaměřuje se na rychlost z krabice s vykreslováním serveru, předpětí propojení a schopnost vytvářet pracovníky služeb. V kombinaci se Svelte, konečný výsledek je vysoce přizpůsobitelný, bleskový rychlý materiál s malou stopou.

V tomto tutoriálu budeme používat SAPPER vybudovat lehké blogové místo pomocí komponenty Svelte (viz naše Jak začít blog Příspěvek pro některé méně technické tipy na blogování). Svelte je rámec s rozdílem. Analyzuje kód při kompilaci čas a vytváří sadu modulů v vanilkové JavaScriptu, který se vyhýbá potřebě runtime. Pokud potřebujete další pomoc s rozvrženími, pak se podívejte na náš příspěvek na tom, jak získat perfektní rozložení webových stránek . Nebo pro další možnosti, viz Stavitelé webových stránek A pamatujte si, že budete také muset dostat své web hosting Služba na místě.

Stáhněte si tutoriálové soubory na FileSilo

01. Instalovat závislosti

Za prvé, musíme stáhnout a nainstalovat závislosti. Opíruje se na SVELTE, aby pracoval a vyžaduje další rámec pro sestavení serveru, ale zbytek závisí na vybudované aplikaci. V tomto případě potřebujeme několik balíčků, které pomáhají extrahovat zástupné soubory později.

Stáhněte si tutoriálové soubory (výše), najít je na příkazovém řádku a nainstalovat závislosti.

> npm install

02. Vybudujte server

SAPPER je postaven ve dvou částech - rámec na straně klienta a vykreslování na straně serveru tohoto rámce. To pomáhá získat další zvýšení rychlosti pro ty na pomalejších sítích. Je postaven pomocí uzlu, který umožňuje midderware Sapper dělat pro nás všechny těžké zvedání.

Otevřete server.js a vytvořte server s expresním. Použití jejich doporučení, zahrnujeme komprese Zmenšit soubory, které posíláme a Sirv. sloužit statické soubory.

 Express ()
  .použití(
    komprese ({prahová hodnota: 0}),
    sirv ("statický", {dev}),
    sapper.middleware ()
  )
  .Listen (port); 

03. Namontujte aplikaci

Na straně klienta musíme říct SAPPER, kde pro připojení aplikace. To je podobné reagovat Domů poskytnout nebo VUE $ Mount. metody. Uvnitř klienta.js, start Sapper a připojit jej do kořene & lt, div a gt; živel. Tento prvek je součástí souboru šablony, který přijdeme později.

 Import * jako SAPPER z "@ SAPPER / APP";
sapper.start ({
  Cíl: Document.getElementbyid (
   "vykořenit")
}); 

04. Spusťte vývojový server

S základním serverem a klientskými soubory nastavenými, můžeme spustit vývojový server. To vykopne sestavení serverových, klientských a servisních pracovníků souborů a ve výchozím nastavení se spustí na port 3000. Kdykoliv se změní soubor, znovu se změní část aplikace, která se změnila.

Spusťte server na příkazovém řádku. Udržujte toto okno otevřené při vývoji stránek.

 & gt; NPM běh dev 

05. Vytvořte trasu serveru

Cokoliv uvnitř adresáře "Trasy" se změní na trasu pro aplikaci. Soubory s. .js. Rozšíření se stane tím, co se nazývají serverové trasy. Tyto trasy nemají UI, ale místo toho jsou požadovány aplikací načíst data. V našem případě je použijeme k načtení blogových příspěvků.

. \ T Trasy / blog / index.json.js soubor vytvoří /blog.json. Koncový bod na našem serveru. Importujte příspěvky blogu a vytvořte z nich někteří JSON.

 Dovozní příspěvky z "./_posts.js";
CONST obsah = json.stringify (
  posts.map (post = & gt; ({
    Autor: post.Author,
    Obrázek: Post.Image,
    Název: post.title,
    Slug: post.slug.
  }))
); 

06. Vraťte blogové příspěvky

Server Trasy Export funkce, které odpovídají metodám HTTP. Chcete-li například reagovat na požadavek, kdy bychom exportovali funkci dostat ze souboru trasy serveru. Vytvořit dostat Funkce, která reaguje s daty, které jsme shromáždili v předchozím kroku ve formátu JSON. Otevřeno http: // localhost: 3000 / blog.json V prohlížeči a zkontrolujte příspěvky.

 Exportní funkce (req, res) {
  res.writead (200, {
    "Obsah typu": "Aplikace / JSON"
  });

  res.end (obsah);
} 

07. Vytvořit indexovou stránku

Stránky v SAPPER jsou pravidelné komponenty Svelte. Každá komponenta je jeden soubor s a .štíhlý rozšíření a obsahovat všechny logiky a styl pro správu. Jakýkoliv JavaScript Tato komponenta musí běžet bude žít uvnitř & lt; scénář a gt; Tag - stejně jako libovolná stránka HTML.

Uvnitř Trasy / index.SVelte , importovat několik dalších komponent Svelte, které můžeme použít k vybudování této stránky. Export A. příspěvky Proměnná, kterou budeme osídlovat později.

 & lt; scénář a gt;
  Dovozní kontejner z
   "../Components/container.svelte";
  Import PostSummary z
   "../Components/postsummary.svelte";
  export nechat příspěvky;
& lt; / script & gt; 

08. Fetch Blog Post Data

S nastavenou stránkou můžeme začít podat do blogových příspěvků (možná je chcete zpátky cloudové úložiště ). Musíme to udělat, jakmile je stránka načtena. Aby byl server informován o tom, a pak požádat tato data, když tuto stránku vykreslí, musí jít v samostatném & lt; kontext skriptu = "modul" & gt; štítek.

Na serveru bude SAPPER hledat preload Funkce a čekat, až bude dokončena před zobrazením stránky. Zde jsme naplněni příspěvky Proměnná z předchozího kroku.

 & lt; skriptový kontext = "modul" & gt;
  Export ASync Funkce Preload () {
    CONST RES = čeká
     this.fetch ("blog.json");
    CONST data = čeká res.json ();
    návrat {Příspěvky: Data};
  }
& lt; / script & gt; 

09. Zobrazit přehledy příspěvků

Ve Svelte jsou proměnné standardně reaktivní. To znamená, že jak oni aktualizují, budou také naše komponenty také aktualizovat. Jako. příspěvky Proměnná nyní drží řadu blogových příspěvků, můžeme se na ně smyčky a zobrazit je.

Můžeme to udělat pomocí #každý blok. Ty budou opakovat, co je uvnitř závorek pro každou položku v poli. V dolní části komponenty, mimo všechny značky přidejte HTML pro zobrazení příspěvků.

10. Styl kontejneru

Můžeme použít komponenty, které obsahují jakoukoliv opakovanou logiku a používat je kdekoli, kde jsou potřebné - styly zahrnuty. . \ T & lt; kontejner & gt; Komponenta v současné době nedělá nic, ale můžeme ji použít k tomu, aby bylo možné maximální šířku obsahu uvnitř.

Otevřít Komponenty / kontejner.SVelte a přidejte některé styly uvnitř a & lt; styl & gt; štítek. Veškeré styly, které aplikujeme uvnitř komponenty, jsou obviňovány do této komponenty, což znamená, že můžeme použít obecný volič.

 & lt; styl & gt;
  div {
    marže: 0 auto;
    Polstrování: 0 1rem;
    Max-šířka: 50Rem;
  }
& lt; / styl & gt; 

11. Definujte & lt; slot & gt;

Pokud je komponenta navržena tak, aby byla rodič k jiným komponentům, potřebujeme způsob, jak projít ty komponenty. . \ T & lt; slot & gt; Prvek dělá právě to, a může být umístěn kdekoli, který dává smysl uvnitř značky komponenty.

S & lt; kontejner & gt; , balijeme obsah ve stylu & lt, div a gt; . Použití & lt; slot & gt; uvnitř & lt, div a gt; nechat všechno ostatní.

 & lt, div a gt;
  & lt; slot / gt;
& lt; / div & gt; 

12. Vystavte postSummary rekvizity

Ne každá komponenta nebude mít načíst některá data. Když načítáme příspěvky z hlavní stránky komponenty, může být prošla komponentem, které vykresluje svým atributům.

Otevřeno Komponenty / postssummary.Svelte a definujte některé atributy v horní části souboru. Ty se dostávají do rozpětí operátora, který jsme přidali v kroku 09.

 & lt; scénář a gt;
  export nechat autor;
  export nechat obrázek;
  Export LET SLUG;
  export nechat titul;
& lt; / script & gt; 

13. Zobrazit účetní souhrn blogu

Když jsou atributy naplněny, jsou pak přistupovány jako jakákoli jiná proměnná. Tím, že máte oddělené atributy pro každou část souhrnu příspěvku, usnadňujeme číst značku.

V dolní části komponenty přidejte HTML pro vytvoření souhrnu. Třídy se týkají předem definovaných stylů.

& lt; článek & gt;
& lt; dig class = "post-image" styl = "
 Obrázek na pozadí: URL ({image}) "/ & gt;
& lt, divové třídy = "tělo" & gt;
  & lt; dig class = "autor-image" & gt;
    & lt, img src = {autor.Image}
     alt = {autor.name} / & gt;
  & lt; / div & gt;
  & lt; divové třídy = "o" & gt;
    & lt; h1 & gt; {titul} & lt; / h1 & gt;
    & lt, span třída = "vedlejší" & gt;
     {autor.name} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / článek & gt; 

14. Odkaz na blog Post

Na rozdíl od podobných rámců, jako jsou další.js, SAPPER pracuje s pravidelnými kotevními odkazy. V době sestavení je schopen detekovat interní odkazy, a také vytvořit vlastní optimalizace.

Aktualizujte značku z předchozího kroku tím, že jej zabalíte v odkazu. Není třeba, abyste vytvořili šablony řetězce, abyste vytvořili slugged URL.

15. Navrhněte příspěvek sl.

SAPPER je schopen vytvářet stránky založené na parametrech URL. V našem případě odkazujeme / Blog / Slug, což znamená, že je součástí komponenty /Routes/blog/[slug].Svelte. .

Uvnitř této komponenty, načíst data blogu, jako jsme provedli pro indexovou stránku. . \ T Params. Objekt obsahuje parametry z adresy URL, které v tomto případě je slug.

 & lt; skriptový kontext = "modul" & gt;
  Export ASync funkce
   Preload ({params}) {
    const res = čeká na tohle.fetch (
     `blog / $ {params.slug} .json`);
    CONST data = čeká res.json ();
  }
& lt; / script & gt; 

16. Chyba, pokud není nalezen příspěvek

Na rozdíl od indexové stránky je šance na adrese URL není příspěvek blogu. V takovém případě bychom měli zobrazit chybu. Spolu s vynést ,.. preload Způsob také zahrnuje chyba Místo toho mění odpověď na chybovou stránku.

Na konci metody Preload zobrazte chybu, pokud není nalezen žádný příspěvek. Jinak nastavte pošta Proměnná pro stránku.

 Pokud (res.status === 200) {
  vrátit {post: data};
} else {
  This.Error (res.status,
    Data.Message);
} 

17. Zobrazte blogu

S přičtením dat nyní můžeme zobrazit příspěvek na stránce. Podobně jako postsSummary komponenty zobrazujeme každou část obsahu příspěvku uvnitř kudrnatých závorek. V dolní části komponenty přidejte na stránce několik značek.

 & lt; článek & gt;
  & lt; kontejner & gt;
    & lt; divové třídy = "titul" & gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; divové třídy = "vedlejší" & gt;
       {post.Author.name} & lt; / div & gt;
    & lt; / div & gt;
    & lt, img třída = "post-image" src = {post.Image} alt = "" / & gt;
     {post.html}
  & lt; / kontejner & gt;
& lt; / článek & gt; 

18. Místo toho zobrazte HTML

Při pohledu na stránku nyní se vše zobrazuje správně od skutečného příspěvku. Konverze značení generuje HTML, ale vidíme, že vytištěno jako text na samotném příspěvku. SAPPER má pro tento případ vybudovaný html parser. Umístění @html. Před ním bude používat tento farser.

 {@ html post.html} 

19. Nastavte stránku & lt; titul & gt; hodnota

Naše blog funguje správně, ale existuje několik změn potřebných k jeho dokončení. Jedním z nich je aktualizovat & lt; titul & gt; Na stránce chcete záložku, ve které se zobrazí.

Svelte podporuje A. & lt; svelte: hlava & gt; prvek, který injuje něco dovnitř do něj & lt; hlava & gt; stránky. Použijte k nastavení názvu příspěvku jako & lt; titul & gt; .

 & lt; svelte: hlava & gt;
  & lt, titul & gt; {post.title} |
   Sapper Blog & Lt; / Název & GT;
& lt; / svelte: hlava & gt; 

20. Aktualizace titulu & gt;

Každá stránka prochází šablonou, aby se vynořil HTML po zbytek stránky. To je místo, kde by bylo zadáno jakékoli nastavení, jako je import fontů a meta značky. Otevřete template.html a přidejte háček pro obsah & lt; svelte: hlava & gt; prvek z předchozího kroku. Přidejte to těsně před uzavřením & lt; / hlava & gt; štítek.

 & lt; hlava & gt;
  [...]% sapper.head%
& lt; / hlava & gt; poslední věc, kterou musíme přidat, je rozložení blogu. Místo balení každé stránky ve složce, SAPPER bude hledat soubor "_layout.svelte", který pro nás udělat.
Uvnitř _layout.svelte, importovat header & gt; a ukázat, že v horní části každé stránky. Poskytuje pohodlný odkaz zpět na domovskou stránku. 

21. Přidejte trvalý záhlaví

Konečná věc, kterou musíme přidat, je rozložení pro blog. Místo zabalení každé stránky ve složce, SAPPER bude hledat _layout.svelte. soubor pro nás. Uvnitř _layout.svelte. , importovat header & gt; a ukázat, že v horní části každé stránky. Poskytuje pohodlný odkaz zpět na domovskou stránku.

 & lt; scénář a gt;
  Importovat záhlaví
   "../Components/header.svelte";
& lt; / script & gt;
& lt; hlavní & gt;
  & lt; záhlaví / gt;
  & lt; slot / gt;
& lt; / Hlavní & gt; 

Tento obsah se původně objevil ve Web Designer.

• Webové komponenty: Ultimate Guide
• 30 Chrome rozšíření pro web designéry a devs
• 52 Web Design Tools, které vám pomohou pracovat chytřejší v roce 2019