Gyors reaktív blog létrehozása Svelte és Sapper

A Sapper az Svelte tetején épült keret. A kiszolgálói rendereléssel a kiszolgálói rendereléssel, az előfeszítéssel és a szolgáltató munkavállalók létrehozásának képességével összpontosít. Az Svelte-vel kombinálva a végeredmény egy nagyon testreszabható, villámgyors hely, kis lábnyom.

Ebben a bemutatóban Sapper-t fogunk használni, hogy könnyű blogolási helyet építsen Svelte komponensekkel (lásd A blog elindítása néhány kevésbé technikai tippet a blogoláshoz). Az Svelte különbséggel rendelkezik. Elemzi a kódot fordítási időben, és létrehoz egy modulkészletet a vanília JavaScript-ben, amely elkerüli a futási idő szükségességét. Ha további segítségre van szüksége az elrendezésekkel, akkor nézze meg a postunkat, hogyan lehet a tökéletes honlap elrendezés . Vagy más lehetőségekért lásd ezeket a tetejét Website Builders És ne feledje, akkor is meg kell kapnia web hosting szolgáltatás a ponton.

Töltse le a fileilo bemutató fájljait

01. Telepítse a függőséget

Először is letölteni és telepíteni a függőségeket. Az Svelte-re támaszkodik, és egy másik keretet igényel a kiszolgáló felépítéséhez, de a többiek a beépített alkalmazástól függenek. Ebben az esetben szükségünk van néhány csomagra, hogy később segítsen a jeldáblák kivonása.

Töltse le a bemutató fájlokat (fent), keresse meg őket a parancssorba, és telepítse a függőséget.

> npm install

02. Építsen ki a kiszolgálót

A sapper két részből áll - az ügyféloldali kerete és a keretrendszer kiszolgálóoldali renderelése. Ez segít abban, hogy az extra fordulatszám-fellendítést a lassabb hálózatokon. A csomópont segítségével épült, amely lehetővé teszi, hogy a Sapper Middleware minden nehéz emelést tegyen számunkra.

Open Server.js és létrehozza a kiszolgálót Express segítségével. Ajánlásaik felhasználásával magukban foglaljuk tömörítés A küldött fájlok csökkentése és sirv statikus fájlok kiszolgálása.

 Express ()
  .használat(
    tömörítés ({küszöb: 0}),
    sirv ("statikus", {dev}),
    sapper.midderware ()
  )
  .listen (port); 

03. Szerelje fel az alkalmazást

Az ügyféloldalon meg kell mondanunk a Sapper-t, ahol az alkalmazást fel kell szerelni. Ez hasonló a DOM-k reagálásához Vakol vagy VUE $ Mount mód. A kliensen belül.js, indítsa el a sapperet, és szerelje fel a gyökérhöz & lt; div & gt; elem. Ez az elem a sablonfájlban szerepel, amelyet később fogunk elérni.

 Import * mint Sapper a "@ Sapper / App";
sapper.start ({
  Cél: Document.getElementbyid (
   "gyökér")
}); 

04. Indítsa el a fejlesztési kiszolgálót

Az alapkiszolgáló és az ügyfélfájlok beállításával elindíthatjuk a fejlesztési kiszolgálót. Ez kiindul a szerver, az ügyfél és a szolgáltató munkavállalói fájlok építéséből, és alapértelmezés szerint elindul a 3000 porton. Ha egy fájl változik, akkor újraépíti az alkalmazás részét, amely megváltozott.

Futtassa a kiszolgálót a parancssorban. Tartsa nyitva ezt az ablakot a webhely fejlesztése közben.

 & gt; NPM RUN DEV 

05. Kiszolgáló útvonal létrehozása

Az "Útvonalak" címtár belsejében az alkalmazás útvonalává válik. Fájlok a .js A kiterjesztés lesz, amit a kiszolgálói útvonalaknak neveznek. Ezek az útvonalak nem rendelkeznek UI-vel, hanem inkább az alkalmazás kéri az adatok lekérését. A mi esetünkben használjuk őket, hogy betöltsük a blogbejegyzéseket.

A Útvonalak / blog / index.json.js A fájl létrehozza a /blog.json végpont a szerveren. Importálja a blogbejegyzéseket, és hozzon létre néhány JSON-t tőlük.

 Behozatali hozzászólások "./_posts.js";
CONST TARTALOM = JSON.Stringify (
  post.map (Post = & gt; ({
    Szerző: Post.Author,
    Image: Post.Image,
    Cím: Post.Title,
    Slug: post.slug
  })
); 

06. Visszaadja a blogbejegyzéseket

A Server útvonalak exportfunkciókat tartalmaznak, amelyek megfelelnek a HTTP-módszereknek. Például, hogy válaszoljon a Get kérésre, exportálnánk egy hívott funkciót kap a kiszolgáló útvonalfájlból. Hozzon létre egy kap Funkció, amely az előző lépésben összegyűjtött adatokkal válaszol egy JSON formátumban. Nyisd ki http: // localhost: 3000 / blog.json A böngészőben és ellenőrizze, hogy a hozzászólások jönnek keresztül.

 Export funkció GET (REQ, RES) {
  Res.Writehead (200, {
    "Tartalom típus": "Alkalmazás / JSON"
  });

  res.end (tartalom);
} 

07. Index oldal létrehozása

Az SAPPER-ben lévő oldalak rendszeres Svelte komponensek. Minden komponens egyetlen fájl, amely a .karcsú kiterjesztés, és tartalmazza az összes logikát és stílust, hogy kezelje magát. Bármely JavaScript-nek ezt az összetevőt kell futtatnia a belsejében & lt; script & gt; Tag -, mint bármely HTML oldal.

Belül Útvonalak / index.svelte , Importáljon néhány más Svelte komponenst, amelyet használhatunk az oldal építéséhez. Export a hozzászólás változó, amelyet később fogunk feltölteni.

 & lt; script & gt;
  Importálja a tartályt
   "../Components/container.svelte";
  Postsamany importálása
   "../Components/postsummary.svelte";
  exportálási üzenetek;
& lt; / script & gt; 

08. Fetch blog adatait

Az oldal beállítása, elkezdhetjük a blogbejegyzések behozatalát (lehet, hogy vissza akarjuk adni őket felhő tároló ). Ezt kell tennünk, amint az oldal betöltődik. Annak érdekében, hogy a kiszolgáló tisztában legyen ezzel, majd kérje ezt az adatokat, amikor az oldalt rendezi, külön kell mennie & lt; script kontextus = "modul" & gt; címke.

A szerveren a sapper keres egy előtöltés funkció, és várja meg, hogy befejezze az oldal megjelenítését. Itt lakjuk a hozzászólás változó az előző lépésből.

 & lt; script kontextus = "modul" & gt;
  Export Async Function Preload () {
    konstr res = vár
     ez.fetch ("blog.json");
    CONST DATA = AWAIT RES.JON ();
    Visszatérés {hozzászólások: adatok};
  }
& lt; / script & gt; 

09. Kijelző utáni összefoglalók

Az Svelte-ben a változók alapértelmezés szerint reaktívak. Ez azt jelenti, hogy amint frissítik, összetevőink is frissülnek. Mint a hozzászólás A változó most egy sor blogbejegyzéssel rendelkezik, ezek át tudjuk hurokozni és megjeleníteni őket.

Ezt megtehetjük egy #minden egyes Blokk. Ezek megismétlik, hogy mi van a záróelemek belsejében minden egyes tételhez egy tömbben. Az összetevő alján, bármely címkéken kívül, adja hozzá a HTML-t a bejegyzések megjelenítéséhez.

 & lt; konténer & gt;
  & lt; ul & gt;
    {# ismételt bejegyzésekként}
      & lt; li & gt;
        & lt; posztsummary {... post} / & gt;
      & lt; / li & gt;
    {/minden egyes}
  & lt; / ul & gt;
& lt; / konténer & gt; 

10. Stílus a tartályt

Használhatjuk az összetevőket, hogy tartalmazzon bármilyen ismételt logikát, és használja őket, bárhol is szükséges - Stílusok. A & lt; konténer & gt; A komponens jelenleg nem tesz semmit, de használhatjuk, hogy maximális szélességet adjon a tartalom belsejében.

Nyit Alkatrészek / konténer.svelte , és adjunk hozzá néhány stílus belsejében a & lt; style & gt; címke. Bármely olyan stílus, amelyet egy komponensen belül alkalmazunk, átkapcsolják az adott komponenshez, ami azt jelenti, hogy generikus választost használhatunk.

 & Lt; Style & Gt;
  div {
    Margó: 0 Auto;
    Padding: 0 1REM;
    Max-szélesség: 50REM;
  }
& lt; / style & gt; 

11. Határozza meg a & lt; slot & gt;

Ha egy alkatrészt úgy tervezték, hogy a többi alkatrészhez tartozik, szükségünk van arra, hogy átadjuk ezeket az összetevőket. A & lt; slot & gt; Az elem csak ezt teszi, és bárhol elhelyezhető, ami értelme van egy komponens jelölésében.

Val vel & lt; konténer & gt; , a tartalmat egy stílusban csomagoljuk & lt; div & gt; . Használat & lt; slot & gt; benne & lt; div & gt; minden mást.

 & lt; div & gt;
  & lt; slot / & gt;
& lt; / div & gt; 

12. Tegye ki a posztkori kellékeket

Nem minden komponens lesz néhány adat. Ahogy betölti az üzenete a főoldalról komponens, akkor ér el a komponenseket is teszi keresztül attribútumokat.

Nyisd ki alkatrészek / postsamary.svelte és határozza meg néhány attribútumot a fájl tetején. Ezek a 09. lépésben hozzáadott terjedt operátor által kitöltöttek.

 & lt; script & gt;
  exportengedély;
  exportálási kép;
  exportálás Legyen Slug;
  exportengedély;
& lt; / script & gt; 

13. A blog megjelenítése utáni összefoglaló

Ha az attribútumok lakhatók, akkor ezeket bármely más változóhoz hozzák. Az utólagos összefoglaló minden egyes részének különálló attribútumaival könnyebbé tesszük a jelölést.

Az összetevő alján adjon hozzá néhány HTML-t az összefoglaló létrehozásához. Az osztályok az előre meghatározott stílusokhoz kapcsolódnak.

& lt; Cikk & gt;
& lt; div osztály = "Post-image" style = "
 Háttérkép: URL ({image}) "/ & gt;
& lt; div osztály = "test" & gt;
  & lt; div osztály = "szerző-kép" & gt;
    & lt; img src = {szerző.image}
     alt = {szerző.name} / & gt;
  & lt; / div & gt;
  & lt; div osztály = "körülbelül" & gt;
    & lt; h1 & gt; {cím} & lt; / h1 & gt;
    & lt; span class = "byline" & gt; by
     {usert.name} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / cikk & gt; 

14. Link a blogbejegyzéshez

Ellentétben hasonló kerettel, mint például a Next.js, a Sapper rendszeres horgony linkekkel működik. Építési idő alatt képes a belső linkek kimutatására, valamint saját optimalizálására.

Frissítse a jelölést az előző lépésből, ha egy linkre csomagolva. Nincs szükség sablonszalagok létrehozására a slugged URL összeállításához.

 & lt; a rel = "prefetch" href = "/ blog / {slug}" & gt;
  & lt; cikk & gt; ... & lt; / cikk & gt;
& lt; / a & gt; 

15. Fogadjon egy hozzászólást Slug segítségével

A Sapper az URL paramétereken alapuló oldalakat hozhat létre. A mi esetünkben összekapcsoljuk / blog / slug, ami azt jelenti, hogy az összetevőt rendezi /routes/blog/[slug].svelte .

E komponensen belül letöltött blogadatokat, mint például az indexoldalt. A paramentumok Az objektum tartalmazza az URL paramétereit, amely ebben az esetben a slug.

 & lt; script kontextus = "modul" & gt;
  Aszinkron működés exportálása
   preload ({params}) {
    CONSTR RES = várja ezt.
     `blog / $ {params.slug} .json`);
    CONST DATA = AWAIT RES.JON ();
  }
& lt; / script & gt; 

16. Hiba, ha a bejegyzés nem található

Az indexoldaltól eltérően lehetőség van, nincs blogbejegyzés az URL-en. Ebben az esetben hibát kell mutatnunk. Együtt lekez , a előtöltés A módszer magában foglalja azt is hiba amely megváltoztatja a válasz egy hibaoldalra.

Az előfeszítési mód végén hibaüzenet jelenjen meg, ha nincs bejegyzés. Ellenkező esetben állítsa be a posta változó az oldalra.

 ha (res.status === 200) {
  Visszatérés {Post: Data};
} más {
  ez.Error (Res.Status,
    data.message);
} 

17. Jelenítse meg a blogbejegyzést

Az adatok lekérve, most megmutathatjuk a bejegyzést az oldalon. A Postsummery komponenshez hasonlóan megjelenítjük a posta tartalmának minden részét a göndör zárójelben. Az összetevő alján adjon hozzá néhány jelölést az oldal megjelenítéséhez.

 & lt; cikk & gt;
  & lt; konténer & gt;
    & lt; div osztály = "cím" & gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; div osztály = "byline" & gt; by
       {Post.Author.name} & lt; / div & gt;
    & lt; / div & gt;
    & lt; img osztály = "Post-image" src = {post.image} alt = "" / & gt;
     {post.html}
  & lt; / konténer & gt;
& lt; / cikk & gt; 

18. A HTML megjelenítése helyett

Az oldalra nézve mindenki helyesen jelenik meg a tényleges utáni tartalomtól. A Markdown konverzió HTML-t generál, de azt látjuk, hogy a szöveg szövegként nyomtatva van. A SAPPER HTML-elemzője van ebben az esetben. Elhelyezés @html Előtte ezt az elemzőt fogja használni.

 {@ html post.html} 

19. Állítsa az oldalt & lt; cím & gt; érték

A blogunk helyesen működik, de van néhány változás szükséges ahhoz, hogy befejezze. Az egyik az, hogy frissítse a & lt; title & gt; az oldalon, hogy relabelje a lapot megjelenik.

Az Svelte támogatja a & lt; svelte: fej & gt; elem, amely injekciót benne belsejében a & lt; head & gt; az oldal. Használja ezt a hozzászólás címének beállításához & lt; title & gt; .

 & Svelte: fej & gt;
  & lt; Cím & gt; {post.title} |
   SAPPER BLOG & LT; / CITY & GT;
& lt; / svelte: fej & gt; 

20. A & lt; cím & gt frissítése;

Minden oldal átmegy egy sablonon annak érdekében, hogy a HTML-t az oldal többi részéhez bélyegezze. Ez az, ahol bármilyen beállítást, például betűtípus-importot és meta címkéket adnak be. Nyissa meg a template.html-t, és adjon hozzá egy horogot a tartalmakhoz & lt; svelte: fej & gt; elem az előző lépésből. Add hozzá ezt a zárás előtt & lt; / head & gt; címke.

 & lt; fej & gt;
  [...]% sapper.head%
& Lt; / head & gt; a végső dolog, amit hozzá kell adnunk, a blog elrendezése. Ahelyett, hogy minden egyes oldalt csomagolna egy komponensben, a Sapper egy "_layout.svelte" fájlt keres, hogy ezt a munkát tegye számunkra.
Inside _Layout.svelte, importálja a & lt; fejléc & gt; és azt mutatja, hogy minden oldal tetején. Kényelmes linket biztosít a honlaphoz. 

21. Adjon meg állandó fejlécet

A végső dolog, amit hozzá kell adnunk, a blog elrendezése. Ahelyett, hogy minden egyes oldalt csomagolna egy komponensben, a sapper keres egy _layout.svelte Fájl, hogy ezt a munkát tegye számunkra. Belül _layout.svelte , importálja a & lt; fejléc & gt; és azt mutatja, hogy minden oldal tetején. Kényelmes linket biztosít a honlaphoz.

 & lt; script & gt;
  Importáld a fejlécet
   "../Components/header.svelte";
& lt; / script & gt;
& lt; fő & gt;
  & lt; fejléc / & gt;
  & lt; slot / & gt;
& Lt; / Main & Gt; 

Ez a tartalom eredetileg a webtervezőben jelent meg.

• Webes összetevők: A végső útmutató
• 30 króm kiterjesztésű webes tervezők és devs
• 52 Webes design eszközök, amelyek segítenek abban, hogy 2019-ben okosabbak legyenek