Construiți un blog reactiv rapid cu Svelte și Sapper

Sapper este un cadru construit pe partea de sus a lui Svelte. Se concentrează pe viteza din cutie cu randarea serverului, preîncărcarea legăturii și capacitatea de a crea lucrători de servicii. Combinat cu Svelte, rezultatul final este un site rapid personalizabil, ușor de fulger, cu o amprentă mică.

În acest tutorial, vom folosi Sapper pentru a construi un site de bloguri ușoare folosind componente Svelte (vezi noastre Cum să începeți un blog post pentru câteva sfaturi tehnice mai puțin pe blogging). Svelte este un cadru cu o diferență. Analizează codul la compilarea timpului și creează un set de module în Vanilla JavaScript, ceea ce evită necesitatea unui runtime. Dacă aveți nevoie de ajutor suplimentar cu layout-urile, verificați postul nostru despre cum să obțineți perfect Layout-ul site-ului . Sau pentru alte opțiuni, consultați aceste top Constructori de site-uri web și amintiți-vă, va trebui, de asemenea, să obțineți dvs. web hosting service la punct.

Descărcați fișierele Tutorial pe Filesilo aici

01. Instalați dependențele

În primul rând, trebuie să descărcați și să instalăm dependențe. Se bazează pe Svelte pentru a lucra și necesită un alt cadru pentru a construi serverul, dar restul depinde de aplicația construită. În acest caz, avem nevoie de câteva pachete pentru a ajuta la extragerea fișierelor Markdown mai târziu.

Descărcați fișierele Tutorial (de mai sus), găsiți-le pe linia de comandă și instalați dependențele.

> npm install

02. Creșteți serverul

Sapper este construit în două părți - cadrul client-lateral și randarea serverului din acest cadru. Acest lucru ajută la obținerea acelei creșteri de viteză suplimentară pentru cei din rețele mai lente. Este construit folosind nodul, care permite middleware-ului sapper să facă toată ridicarea greu pentru noi.

Deschideți server.js și creați serverul cu Express. Folosind recomandările lor, includem comprimare Pentru a micșora fișierele pe care le trimitem și Sirv. pentru a servi fișiere statice.

 Express ()
  .utilizare(
    compresie ({prag: 0}),
    SIRV ("static", {dev}),
    sapper.middleware ()
  )
  .Liste (port); 

03. Montați aplicația

Pe partea clientului, trebuie să spunem Sapper unde să montăm aplicația. Acest lucru este similar cu React Dom face sau Vue's $ montare. Metode. În interiorul clientului.js, începeți Sapper și montați-o la rădăcină & Lt; div & gt; element. Acest element este inclus în fișierul șablon, pe care vom veni mai târziu.

 Import * ca Sapper de la "@ Sapper / App";
sapper.start ({{
  țintă: document.getelementbyid (
   "rădăcină")
}); 

04. Porniți serverul de dezvoltare

Cu serverul de bază și fișierele client configurate, putem începe serverul de dezvoltare. Aceasta lansează o construcție a fișierelor serverului, a clientului și a serviciilor și va începe implicit portul 3000. Ori de câte ori se schimbă un fișier, acesta va reconstrui partea din aplicația care sa schimbat.

Rulați serverul de pe linia de comandă. Păstrați această fereastră deschisă în timp ce dezvoltați site-ul.

 & gt; NPM Run Dev 

05. Creați un traseu de server

Orice în directorul "rute" se va transforma într-un traseu pentru aplicație. Fișiere cu. .Js. Extensia va deveni ceea ce se numește rute de servere. Aceste rute nu au UI, ci sunt solicitate de aplicație pentru a prelua date. În cazul nostru, le vom folosi pentru a încărca posturi de blog.

rute / blog / index.json.js Fișierul va crea /blog.json. punct final de pe serverul nostru. Importați postările pe blog și creați un json de la ei.

 posturi de import de la "./_posts.js";
const conținut = json.Stringfy (
  posts.map (post = & gt; ({{
    Autor: Post.Author,
    Imagine: Post.Image,
    Titlu: Post.title,
    Slug: Post.slug.
  }))
); 

06. Returnați postările blogului

Funcțiile de export care corespund metodelor HTTP. De exemplu, pentru a răspunde la o cerere de obținere, vom exporta o funcție numită obține din fișierul rutei serverului. Creeaza o obține Funcție care răspunde cu datele pe care le-am colectat în pasul anterior într-un format JSON. Deschis http: // localhost: 3000 / blog.json În browser și verificați mesajele viitoare.

 Funcția de export Obțineți (REQ, RES) {
  res.writehead (200, {
    "Tip de conținut": "Aplicație / JSON"
  });

  res.end (conținut);
} 

07. Creați pagina indexului

Paginile din Sapper sunt componente regulate din Svelte. Fiecare componentă este un singur fișier cu a .Svelte. extensie și conține toată logica și stilul pentru gestionarea însăși. Orice component JavaScript trebuie să ruleze va trăi în interiorul a & lt; script & gt; Etichetă - la fel ca orice pagină HTML.

Interior rute / index.svelte. , importați câteva alte componente Svelte pe care le putem folosi pentru a construi această pagină. Export A. Posturi Variabila pe care o vom popula mai târziu.

 & lt; script & gt;
  Import container de la
   "../Components/container.svelte";
  Import postsummary de la
   "../Components/postsummary.svelte";
  exportul informează posturile;
& lt; / script & gt; 

08. Fetch Blog Publicați datele

Cu setarea paginii, putem începe să aducem mesaje de blog (poate doriți să le sprijiniți Stocare in cloud ). Trebuie să facem acest lucru de îndată ce pagina este încărcată. Pentru ca serverul să fie conștient de acest lucru și apoi să solicitați aceste date atunci când aceasta face ca pagina, trebuie să meargă într-un separat & lt; script context = "modul" & gt; etichetă.

Pe server, Sapper va căuta a Preîncărcați Funcția și așteptați să completeze înainte de a afișa pagina. Aici, populare Posturi variabilă din etapa anterioară.

 & lt; script context = "modul" & gt;
  Export Async Function Preload () {
    const res = așteaptă
     acest lucru.fetch ("blog.json");
    CONST DATA = AWAIT RES.JON ();
    RETURN {Mesaje: date};
  }
& lt; / script & gt; 

09. Afișați rezumatele Post

În Svelte, variabilele sunt reactive în mod implicit. Aceasta înseamnă că, pe măsură ce se actualizează, componentele noastre se vor actualiza, de asemenea. Dupa cum Posturi Variabia deține acum o gamă de postări de blog, putem bucura peste acestea și le putem afișa.

Putem face acest lucru folosind un #fiecare bloc. Acestea vor repeta ceea ce se află în interiorul parantezelor pentru fiecare element dintr-o matrice. În partea de jos a componentei, în afara oricăror etichete, adăugați HTML pentru a afișa posturile.

 & Lt; container & gt;
  & lt; ul & gt;
    {# Oach posts ca post}
      & Li & gt;
        & lt; postsummary {... post} / & gt;
      & lt; / li & gt;
    {/fiecare}
  & lt; / ul & gt;
& lt; / container & gt; 

10. Stilul recipientului

Putem folosi componente pentru a conține orice logică repetată și a le utiliza oriunde au nevoie de stiluri incluse. & Lt; container & gt; Componenta În prezent nu face nimic, dar îl putem folosi pentru a da o lățime maximă la conținutul din interiorul acestuia.

Deschide Componente / Container.Svelte. și adăugați niște stiluri în interiorul a & lt; stil & gt; etichetă. Orice stiluri pe care le aplicăm în interiorul unei componente sunt scopate la acea componentă, ceea ce înseamnă că putem folosi un selector generic.

 & stil & gt;
  div {
    Marja: 0 Auto;
    Padding: 0 1rem;
    Max-lățime: 50rem;
  }
& lt; / stil & gt; 

11. Definiți A & LT; slot & gt;

Dacă o componentă este concepută pentru a fi părintele la alte componente, avem nevoie de o modalitate de a trece aceste componente. & lt; slot & gt; Elementul face doar asta și poate fi plasat oriunde are sens în interiorul marcajului unei componente.

Cu & Lt; container & gt; , împachetăm conținutul într-un stil & Lt; div & gt; . Utilizare & lt; slot & gt; în interiorul & Lt; div & gt; pentru a lăsa orice altceva.

 și Lt; Div & Gt;
  & lt; slot / & gt;
& lt; / div & gt; 

12. Expuneți recuzită postsummary

Nu fiecare componentă va aduce unele date. Pe măsură ce încărcăm posturile din componenta principală a paginii, acesta poate fi trecut prin componentele pe care le face prin atributele sale.

Deschis Componente / Postsummary.Svelte. și definiți câteva atribute în partea de sus a fișierului. Acestea sunt completate de operatorul răspândit pe care l-am adăugat la pasul 09.

 & lt; script & gt;
  exportul permite autorului;
  exportați imaginea;
  exportul lăsați sărite;
  exportul informativ;
& lt; / script & gt; 

13. Afișare Blog Post Rezumat

Când atributele sunt populate, acestea sunt accesate apoi ca orice altă variabilă. Având atribute separate pentru fiecare parte a rezumatului post, facem marcajul mai ușor de citit.

În partea de jos a componentei, adăugați unele HTML pentru a crea rezumatul. Clasele se referă la stilurile predefinite.

& articole & gt;
& lt; div clasa = "post-imagine" stil = "
 Imaginea de fundal: URL ({imagine}) "/ & gt;
& lt; div clasa = "corp" & gt;
  & lt; div clasa = "autor-imagine" & gt;
    & lt; img src = {autor.image}
     alt = {autor.name} / & gt;
  & lt; / div & gt;
  & Lt; div Clasa = "Despre" și GT;
    & lt; h1 & gt; {titlu} & lt; / h1 & gt;
    & lt; span clasa = "linie" & gt; de
     {autor.name} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / articol & gt; 

14. Legătura către postarea blogului

Spre deosebire de cadrele similare, cum ar fi următorul.js, Sapper funcționează cu legături de ancorare regulate. La momentul construirii, este capabil să detecteze legăturile interne și, de asemenea, să-și facă propriile optimizări.

Actualizați marcajul din pasul anterior, împachetați-l într-un link. Nu este nevoie să creați șiruri de șabloane pentru a compune URL-ul lansat.

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

15. Fiți un post de către Slug

Sapperul este capabil să creeze pagini bazate pe parametrii URL. În cazul nostru, ne legăm / blog / slug, ceea ce înseamnă că face componenta la /routes/blog/[slug].Svelte. .

În interiorul acelei componente, aduceți datele de bloguri, așa cum am făcut pentru pagina index. Paramale Obiectul conține parametrii de pe adresa URL, care în acest caz este Slugul.

 & lt; script context = "modul" & gt;
  Exportați funcția Async
   Preîncărcați ({PARAMS}) {
    const res = așteaptă acest lucru.efetch (
     `blog / $ {params.slug} .json`);
    CONST DATA = AWAIT RES.JON ();
  }
& lt; / script & gt; 

16. Eroare dacă postarea nu este găsită

Spre deosebire de pagina index, există o șansă că nu există un post de blog la adresa URL. În acest caz, ar trebui să afișăm o eroare. Impreuna cu Fetch. ,. Preîncărcați Metoda include, de asemenea eroare care modifică răspunsul la o pagină de eroare în schimb.

La sfârșitul metodei de preîncărcare, arată o eroare dacă nu există nici un post. În caz contrar, setați post variabilă pentru pagină.

 Dacă (res.Status === 200) {
  RETURN {POST: DATE};
} altfel {
  acest.Error (res.Status,
    date.message);
} 

17. Afișați postul de blog

Cu datele primite, putem afișa acum postarea pe pagină. Similar cu componenta postsummarară, afișăm fiecare parte a conținutului postului în interiorul parantezelor curbate. În partea de jos a componentei, adăugați unele marcaje pentru a fi afișate pe pagină.

 & articole & gt;
  & Lt; container & gt;
    & lt; div clasa = "titlu" & gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; div clasa = "linie" & gt; de către
       {post.author.name} & lt; / div & gt;
    & lt; / div & gt;
    & lt; img clasa = "post-imagine" src = {post.image} alt = "" / & gt;
     {post.html}
  & lt; / container & gt;
& lt; / articol & gt; 

18. Afișați în schimb HTML

Privind la pagină acum, totul afișează corect cu privire la conținutul actual al postului. Conversia Markdown generează HTML, dar vedem că tipărirea ca text pe postul propriu-zis. Sapper are un parser HTML construit în acest caz. Plasarea @thml. În fața lui va folosi acest parser.

 {@ html post.html} 

19. Set Page & Lt; title & gt; valoare

Blogul nostru funcționează corect, dar există câteva schimbări necesare pentru ao termina. Una dintre acestea este de a actualiza & title & gt; Pe pagina pentru a vă relaxa fila, este afișată în.

Svelte acceptă A. & lt; Svelte: Head & Gt; element, care injectează ceva în interiorul acesteia în & lt; head & gt; a paginii. Utilizați acest lucru pentru a seta titlul postului ca & title & gt; .

 & lt; Svelte: Head & Gt;
  & lt; title & gt; {post.title} |
   Sapper Blog & Lt; / title & gt;
& lt; / svelte: head & gt; 

20. Actualizarea titlurilor & GT;

Fiecare pagină trece printr-un șablon pentru a elimina HTML pentru restul paginii. Aici ar fi introdus orice configurație, cum ar fi importurile de fonturi și etichetele meta. Deschideți template.html și adăugați într-un cârlig pentru conținutul & lt; Svelte: Head & Gt; element din pasul anterior. Adăugați acest lucru chiar înainte de închidere & lt; / head & gt; etichetă.

 head & gt;
  [...]% Sapper.Head%
& lt; / head & gt; ultimul lucru de care avem nevoie pentru a adăuga este un aspect pentru blog. În loc să înfășurați fiecare pagină într-o componentă, Sapper va căuta un fișier "_layout.svelte" pentru a face acest lucru pentru noi.
În interiorul _Layout.Svelte, importați Header & GT; componentă și arată că în partea de sus a fiecărei pagini. Acesta oferă o legătură convenabilă înapoi la pagina de pornire. 

21. Adăugați antet permanent

Lucrul final de care trebuie să adăugăm este un aspect pentru blog. În loc să înveliți fiecare pagină într-o componentă, Sapper va căuta a _Layout.svelte. Fișier pentru a face acest lucru pentru noi. Interior _Layout.svelte. , importați Header & GT; componentă și arată că în partea de sus a fiecărei pagini. Acesta oferă o legătură convenabilă înapoi la pagina de pornire.

 & lt; script & gt;
  Importați antetul de la
   "../Components/header.svelte";
& lt; / script & gt;
& lt; principal & gt;
  & lt; antet / & gt;
  & lt; slot / & gt;
& lt; / principal & gt; 

Acest conținut a apărut inițial în Web Designer.

• Componente Web: Ghidul Ultimate
• 30 de extensii cromate pentru designeri de web și devs
• 52 Instrumente de design web pentru a vă ajuta să lucrați mai inteligent în 2019