Costruisci un blog reattivo veloce con Svelte e Saudper

Sapper è un quadro costruito in cima a Svelte. Si concentra sulla velocità della scatola con il rendering del server, il precaricamento del collegamento e la capacità di creare i lavoratori dei servizi. Combinato con Svelte, il risultato finale è un sito altamente personalizzabile e fulmine veloce con un piccolo ingombro.

In questo tutorial, utilizzeremo Sapper per costruire un sito di blog leggero usando componenti Svelte (vedi il nostro Come iniziare un blog Post per alcuni suggerimenti meno tecnici sul blogging). Svelte è un quadro con la differenza. Analizza il codice in tempo di compilazione e crea un insieme di moduli in vaniglia JavaScript, che evita la necessità di un runtime. Se hai bisogno di ulteriore aiuto con i layout, controlla il nostro post su come ottenere il perfetto Layout del sito web . O per altre opzioni, vedere questi Top costruttori di siti Web E ricorda, dovrai anche ottenere il tuo web hosting servizio sul punto.

Scarica i file tutorial su Filesolo qui

01. Installa dipendenze

Innanzitutto, dobbiamo scaricare e installare dipendenze. Si affida a Svelte per lavorare e richiede un'altra struttura per creare il server, ma il resto dipende dall'applicazione in costruzione. In questo caso, abbiamo bisogno di alcuni pacchetti per aiutare a estrarre i file di markdown in seguito.

Scarica i file tutorial (sopra), trovali sulla riga di comando e installare le dipendenze.

> npm install

02. Build Out Server

SAPPER è costruito in due parti - il quadro lato client e il rendering del lato server di tale struttura. Questo aiuta a ottenere quella spinta di velocità extra per chi su reti più lente. È costruito utilizzando il nodo, che consente al middleware SAPPER di fare tutto il sollevamento pesante per noi.

Apri Server.js e crea il server con Express. Usando le loro raccomandazioni, includiamo compressione Per ridurre i file che inviamo e Sirv. per servire i file statici.

 Express ()
  .uso(
    Compressione ({soglia: 0}),
    Sirv ("statico", {dev}),
    sapper.middleware ()
  )
  .listen (porto); 

03. Montare l'applicazione

Sul lato client, dobbiamo dire a Sapper dove montare l'applicazione. Questo è simile a reagire DOM rendering o Vue's. $ Monte. Metodi. Inside Client.js, avvia Sapper e montarlo nella radice & lt; div & gt; elemento. Quell'elemento è incluso nel file del modello, che arriveremo in seguito.

 Importa * come Sapper da "@ sapper / app";
sapper.start ({
  Target: document.getElementbyID (
   "radice")
}); 

04. Avvia il server di sviluppo

Con il server di base e i file client configurati, possiamo avviare il server di sviluppo. Questo calcia una build dei file del server, del client e del servizio di servizio e si avvierà a porta 3000 per impostazione predefinita. Ogni volta che un file cambia, ricostruirà la parte dell'applicazione che è cambiata.

Eseguire il server sulla riga di comando. Tieni aperta questa finestra mentre si sviluppa il sito.

 & GT; NPM Run Dev 

05. Creare un percorso del server

Qualsiasi cosa all'interno delle "rotte" la directory si trasformerà in un percorso per l'applicazione. File con The. .js. L'estensione diventerà ciò che sono chiamate percorsi del server. Queste rotte non hanno UI, ma invece sono richieste dall'applicazione per recuperare i dati. Nel nostro caso, li useremo per caricare post sul blog.

Il Percorsi / Blog / Index.json.js il file creerà il /blog.json. Endpoint sul nostro server. Importa i post del blog e crea alcuni json da loro.

 Importa messaggi da "./_Posts.js";
Content Const = JSON.Stringify (
  post.map (post = & gt; ({
    Autore: Post.Author,
    Immagine: post.image,
    Titolo: post.title,
    Slug: post.slug.
  })))
); 

06. Ritorna i post del blog

I percorsi del server sono le funzioni di esportazione che corrispondono ai metodi HTTP. Ad esempio, per rispondere a una richiesta di ricezione, esporteremmo una funzione chiamata ottenere dal file del percorso del server. Creare un ottenere Funzione che risponde con i dati che abbiamo raccolto nel passaggio precedente in un formato JSON. Aperto http: // localhost: 3000 / blog.json Nel browser e controllare i post che stanno arrivando.

 Funzione di esportazione Get (req, res) {
  res.writehead (200, {
    "Tipo di contenuto": "Applicazione / JSON"
  }););

  res.ed (contenuti);
} 

07. Creare la pagina dell'indice

Le pagine in Sapper sono componenti di Svelte regolari. Ogni componente è un singolo file con a .svelte. estensione e contenere tutta la logica e lo styling per la gestione stessa. Qualsiasi JavaScript Questo componente deve essere eseguito viverà all'interno di un & lt; script & gt; Tag - Proprio come qualsiasi pagina HTML.

Dentro Percorsi / Index.svelte. , Importa un paio di altri componenti Svelte che possiamo usare per costruire questa pagina. Esportare A. post Variabile che poporeremo più tardi.

 & lt; script & gt;
  importare il contenitore da.
   "../Components/container.svelte";
  Importa postsummary da.
   "../Components/poststsummary.svelte";
  esportazione consente ai post;
& lt; / script & gt; 

08. Fetch Blog Post Data

Con la pagina impostata, possiamo iniziare a portare in post Blog (potresti volerporta in deposito cloud. ). Dobbiamo farlo non appena la pagina è caricata. Affinché il server sia consapevole di questo e quindi richiedere questi dati quando rende la pagina, ha bisogno di andare in un separato & lt; script context = "Module" & GT; etichetta.

Sul server, Sapper cercherà a precarico funzione e attendere che si completa prima di mostrare la pagina. Qui, stiamo popolando il post variabile dal passaggio precedente.

 & lt; script context = "Module" & GT;
  Export Async Function Preload () {
    cost res = attendi
     questo.Fetch ("Blog.json");
    Const Data = AWait res.json ();
    ritorno {post: dati};
  }
& lt; / script & gt; 

09. Visualizza i riassunti del post

In Svelte, le variabili sono reattive per impostazione predefinita. Ciò significa che, come si aggiornano, i nostri componenti si aggiornano anche. Come il post La variabile ora tiene una serie di post sul blog, possiamo loop su questi e visualizzarli.

Possiamo farlo usando un #ogni bloccare. Questi ripeterà ciò che è all'interno delle parentesi per ogni elemento in un array. Nella parte inferiore del componente, al di fuori di qualsiasi tag, aggiungere l'HTML per visualizzare i messaggi.

 & lt; contenitore e GT;
  & lt; UL & GT;
    {# post post come post}
      & lt; li & gt;
        & lt; poststsummary {... post} / & gt;
      & lt; / li & gt;
    {/ogni}
  & lt; / UL & GT;
& lt; / contenitore e GT; 

10. Stile il contenitore

Possiamo utilizzare componenti per contenere alcuna logica ripetuta e usarle ovunque siano necessari - stili inclusi. Il & lt; container & gt; Il componente attualmente non fa nulla, ma possiamo usarlo per dare una larghezza massima al contenuto al suo interno.

Aprire Componenti / contenitore.svelte. e aggiungi alcuni stili all'interno di a & lt; style & gt; etichetta. Tutti gli stili che applichiamo all'interno di un componente sono ammessi a quel componente, il che significa che possiamo usare un selettore generico.

 & lt; Style & GT;
  div {
    Margine: 0 Auto;
    Imbottitura: 0 1Rem;
    larghezza massima: 50rem;
  }
& lt; / style & gt; 

11. Definisci A & Lt; Slot & GT;

Se un componente è progettato per essere il genitore ad altri componenti, abbiamo bisogno di un modo per passare tali componenti. Il & lt; slot & gt; L'elemento fa proprio questo, e può essere posizionato ovunque, ha senso all'interno del markup di un componente.

Con & lt; container & gt; , stiamo avvolgendo il contenuto in un stile & lt; div & gt; . Uso & lt; slot & gt; dentro il & lt; div & gt; per lasciare tutto il resto.

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

12. Esporre i puntelli PostSummary

Non tutti i componenti recuperano alcuni dati. Come stiamo caricando i post dal componente della pagina principale, può essere trasmesso ai componenti che rendono attraverso i suoi attributi.

Aperto Componenti / PostSummary.Svelte. e definisci alcuni attributi nella parte superiore del file. Questi vengono compilati dall'operatore diffuso che abbiamo aggiunto al punto 09.

 & lt; script & gt;
  esportazione consente all'autore;
  Esportazione Lascia l'immagine;
  Esporta lascia la lumaca;
  Esporta Let Titolo;
& lt; / script & gt; 

13. Visualizza il riassunto del post sul blog

Quando gli attributi sono popolati, vengono quindi raggiunti come qualsiasi altra variabile. Avere attributi separati per ogni parte del riassunto del post, rendiamo più facile il markup da leggere.

Nella parte inferiore del componente, aggiungi un po 'di html per creare il riepilogo. Le classi si riferiscono agli stili predefiniti.

 & lt; Articolo e GT;
& lt; div class = "post-immagine" style = "
 Immagine di sfondo: URL ({Image}) "/ & GT;
& lt; div class = "body" & gt;
  & lt; div class = "autore-image" & gt;
    & lt; img src = {autor.image}
     alt = {autor.name} / & gt;
  & lt; / div & gt;
  & lt; div class = "About" & gt;
    & lt; h1 & gt; {title} & lt; / h1 & gt;
    & lt; span class = "byline" e gt; di
     {Autore.name} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / Articolo e GT; 

14. Link al post del blog

A differenza di quadri simili come next.js, Sapper funziona con collegamenti di ancoraggio regolari. A tempo di costruzione, è in grado di rilevare i collegamenti interni e anche per fare le proprie ottimizzazioni.

Aggiorna il markup dal passaggio precedente avvolgendolo in un collegamento. Non è necessario creare stringhe del modello per comporre l'URL a Slegged.

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

15. Recupera un post da slug

Sapper è in grado di creare pagine in base ai parametri dell'URL. Nel nostro caso, colleghiamo a / Blog / Slug, Il che significa che rende il componente a /Routes/blog/[Sslug].svelte. .

All'interno di quel componente, recupera i dati del blog come abbiamo fatto per la pagina dell'indice. Il parametri L'oggetto contiene i parametri dall'URL, che in questo caso è la lumaca.

 & lt; script context = "Module" & GT;
  Esporta la funzione Async.
   precarico ({params}) {
    Cost res = attendi questo.
     `Blog / $ {params.slug} .json`);
    Const Data = AWait res.json ();
  }
& lt; / script & gt; 

16. ERRORE Se il post non viene trovato

A differenza della pagina dell'indice, c'è una possibilità che non ci sia un post sul blog all'URL. In tal caso, dovremmo visualizzare un errore. Insieme a recupero , il precarico Il metodo include anche errore che modifica invece la risposta a una pagina di errore.

Alla fine del metodo di precarico, mostra un errore se non è presente alcun posto. Altrimenti, imposta il inviare variabile per la pagina.

 IF (RES.STATO === 200) {
  ritorno {post: dati};
} altro {
  This.Error (Res.Status,
    dati.Messaggio);
} 

17. Visualizza il post del blog

Con i dati recuperati, ora possiamo mostrare il post sulla pagina. Simile alla componente PostSummary, mostriamo ogni parte del contenuto del post all'interno delle staffe ricci. Nella parte inferiore del componente, aggiungere un po 'di markup da visualizzare sulla pagina.

 & lt; Articolo e GT;
  & lt; container & gt;
    & lt; div class = "title" & gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; div class = "byline" e gt; di
       {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; / Articolo e GT; 

18. Visualizza invece HTML

Guardando la pagina ora, tutto viene visualizzato correttamente a parte il contenuto post effettivo. La conversione di markdown genera HTML, ma vediamo che stampato come testo sul post stesso. Sapper ha un parser HTML integrato per questo caso. Posizionamento @html. Di fronte, userà questo parser.

 {@ html post.html} 

19. Imposta pagina & lt; Titolo & GT; valore

Il nostro blog funziona correttamente, ma ci sono un paio di modifiche necessarie per finirlo. Uno di quelli è di aggiornare il & lt; Titolo & GT; Nella pagina per il relable la scheda è visualizzata in.

Svelte supporta A. & lt; svelte: head & gt; elemento, che inietta qualcosa dentro di esso nel & lt; head & gt; della pagina. Utilizzare questo per impostare il titolo del post come & lt; Titolo & GT; .

 & lt; Svelte: testa e GT;
  & lt; title & gt; {post.title} |
   Sapper Blog & Lt; / Titolo & GT;
& lt; / svelte: head & gt; 

20. Aggiornamento del & lt; Titolo & GT;

Ogni pagina passa attraverso un modello per spegnere l'HTML per il resto della pagina. Questo è il punto in cui qualsiasi configurazione come le importazioni di font e i meta tag verranno inseriti. Aprire modelli.html e aggiungere un gancio per il contenuto del & lt; svelte: head & gt; elemento dal passaggio precedente. Aggiungi questo in poco prima della chiusura & lt; / head & gt; etichetta.

 & lt; head & gt;
  [...]
  % sapper.head%
& lt; / head & gt; la cosa finale che dobbiamo aggiungere è un layout per il blog. Invece di avvolgere ogni pagina in un componente, Sapper cercherà un file "_Layout.svelte" per fare questo lavoro per noi.
Dentro _layout.svelte, import the & lt; header & gt; componente e mostrare che nella parte superiore di ogni pagina. Fornisce un vantaggio conveniente alla homepage. 

21. Aggiungi intestazione permanente

La cosa finale che dobbiamo aggiungere è un layout per il blog. Invece di avvolgere ogni pagina in un componente, Sapper cercherà a _Layout.svelte. file per fare questo lavoro per noi. Dentro _Layout.svelte. , importare il & lt; header & gt; componente e mostrare che nella parte superiore di ogni pagina. Fornisce un collegamento conveniente alla homepage.

 & lt; script & gt;
  importazione intestazione da.
   "../Components/header.svelte";
& lt; / script & gt;
& lt; main & gt;
  & lt; header / & gt;
  & lt; slot / & gt;
& lt; / main & gt; 

Questo contenuto è stato originariamente apparso nel web designer.

• Componenti Web: la guida definitiva
• 30 estensioni cromate per web designer e devs
• 52 strumenti di web design per aiutarti a lavorare in modo più intelligente nel 2019