Zbuduj szybki reaktywny blog z svelte i sapper

Sep 12, 2025
Jak
Svelte and Sapper
(Kredyt obrazu: Svelte)

Sapper jest ramami zbudowanymi na szczycie Svelte. Koncentruje się na przyspieszeniu z pudełka z renderowaniem serwera, link wstępnie ładowaniem i możliwością tworzenia pracowników serwisowych. W połączeniu z svelte, wynik końcowy jest wysoce konfigurowalny, błyskawiczny fast witryny z małym śladem.

W tym samouczku będziemy korzystać z Sapper, aby zbudować lekką witrynę blogowania za pomocą komponentów Svelte (patrz nasz Jak uruchomić blog post na mniejsze wskazówki techniczne na blogowaniu). Svelte to ramy z różnicą. Analizuje kod w czasie kompilacji i tworzy zestaw modułów w Vanilla JavaScript, który pozwala uniknąć potrzeby wykonawczego. Jeśli potrzebujesz dalszej pomocy w układach, sprawdź nasze post, jak uzyskać idealny Układ strony internetowej. . Lub na inne opcje, zobacz te najlepsze Budowniczowie stron internetowych. i pamiętaj, że będziesz musiał uzyskać twój hosting Serwis na punkcie.

Pobierz pliki samouczka na plikach

01. Zainstaluj zależności

Po pierwsze, musimy pobrać i zainstalować zależności. Opiera się na Svelte, aby pracować i wymaga kolejnych ram do budowania serwera, ale reszta zależy od zbudowanego wniosku. W takim przypadku potrzebujemy kilku pakietów, aby pomóc wyodrębnić pliki Markdown później.

Pobierz pliki samouczka (powyżej), znajdź je w wierszu poleceń i zainstaluj zależności. 

> npm install

02. Wybuduj serwer

Sapper jest zbudowany w dwóch częściach - ramie po stronie klienta i renderowania po stronie serwera tego struktury. Pomaga to uzyskać dodatkowe zwiększenie prędkości dla osób wolniejszych sieci. Jest zbudowany przy użyciu węzła, który umożliwia oprogramowanie pośrednie sapper, aby zrobić całą ciężką podnoszenie dla nas.

Otwórz serwer.js i utwórz serwer z Express. Korzystając z ich zaleceń, uwzględniamy kompresja Aby zmniejszyć pliki wysyłane i sirv. służyć plikom statyczne. 

 Express ()
  .posługiwać się(
    kompresja ({próg: 0}),
    SIRV ("statyczny", {dev}),
    sapper.middleweware ()
  )
  .listen (port);

03. Zamontuj aplikację

Po stronie klienta musimy powiedzieć sapper, gdzie zamontować aplikację. Jest podobny do reagowania Domu renderowanie lub Vue's. $ Mount. metody. Wewnątrz klienta.js, rozpocznij sapper i zamontuj go do korzenia & lt; div & gt; element. Ten element jest zawarty w pliku szablonu, który przyjdziemy później. 

 Importuj * jako saper z "@ sapper / app";
sapper.start ({
  Cel: Document.getElementByid (
   "korzeń")
});

04. Uruchom serwer rozwoju

Command line

Wszelkie błędy podczas procesu budowy rozwoju są oznaczone w wierszu poleceń. (Kredyt obrazu: Matt Crouch)

Z konfiguracją podstawowego serwera i plików klienta możemy uruchomić serwer rozwoju. Wyprowadza się z kompilacji plików serwera, klienta i serwisu, a domyślnie uruchomi się na porcie 3000. Za każdym razem, gdy zmienia się plik, odbuduje część zmienionej aplikacji.

Uruchom serwer w wierszu poleceń. Trzymaj to okno otwarte podczas opracowywania witryny. 

 & GT; NPM RUNV

05. Utwórz trasę serwera

Wszystko w katalogu "Trasy" zmieni się w trasę do aplikacji. Pliki z .js. Rozszerzenie stanie się nazywane trasami serwera. Trasy te nie mają ui, ale zamiast tego są wymagane przez aplikację do pobrania danych. W naszym przypadku użyjemy ich do załadowania postów blogowych.

The. Trasy / blog / index.json.js Plik utworzy /blog.json. punkt końcowy na naszym serwerze. Zaimportuj posty na blogu i utwórz od nich JSON. 

 Posty importowe z "./_posts.js";
Const Spis treści = JSON.Stringify (
  posts.map (post = & gt; ({
    Autor: Post.author,
    Obraz: post.image,
    Tytuł: post.title,
    Slug: Post.slug.
  })))
);

06. Zwróć posty na blogu

Funkcje eksportu tras serwerów, które odpowiadają metodom HTTP. Na przykład, aby odpowiedzieć na żądanie, wyeksportujemy funkcję otrzymać z pliku trasy serwera. Stwórz otrzymać Funkcja, która odpowiada dane, które zebraliśmy w poprzednim kroku w formacie JSON. otwarty http: // localhost: 3000 / blog.son W przeglądarce i sprawdź, czy słupki przechodzą. 

 Funkcja Eksportuj Get (REQ, RES) {
  res.writehead (200, {
    "Typ treści": "Aplikacja / JSON"
  });

  res.end (zawartość);
}

07. Utwórz stronę indeksu

Strony w Sapper są regularne komponenty Svelte. Każdy komponent jest jednym plikiem z a .smukły rozszerzenie i zawierają całą logikę i stylizacji do zarządzania. Każdy JavaScript ten składnik musi uruchomić, będzie żył wewnątrz & lt; script & gt; Tag - tak jak każda strona HTML.


Wewnątrz Trasy / index.svelte. , zaimportuj kilka innych komponentów Svelte, których możemy użyć do zbudowania tej strony. Eksportuj A. Posty. Zmienna, którą wypełnimy później. 

 Skrypt i GT;
  Importuj pojemnik z
   "../Components/container.svelte";
  Import Postadsummary z
   "../Components/postsummary.svelte";
  Eksport Pozwól stanowić posty;
& lt; / script & gt;

08. Fetch Blog Wpisz dane

Z konfigurowaniem strony możemy zacząć wprowadzać w blogu posty (możesz je poprzeć magazyn w chmurze ). Musimy to zrobić, gdy tylko zostanie załadowana strona. Aby serwer był świadomy tego, a następnie zażądać tych danych, gdy sprawia, że ​​strona, musi przejść do osobnego & lt; skrypt Context = "Module" & GT; etykietka.


Na serwerze Sapper będzie szukać Preload. Funkcja i poczekaj, aż zakończy się przed wyświetleniem strony. Tutaj wypełniamy Posty. zmienna z poprzedniego kroku. 

 Context Script = "Moduł" & GT;
  Eksportuj Async Funkcja Preload () {
    Const Res = Czeka
     to.fetch ("blog.json");
    CINST DATA = ACAIT RES.JSON ();
    powrót {posty: dane};
  }
& lt; / script & gt;

09. Wyświetl streszczenia postów

W Svelte, zmienne są domyślnie reaktywne. Oznacza to, że, gdy aktualizują nasze komponenty również aktualizują również. Jako Posty. Zmienna teraz ma teraz tablicę postów blogowych, możemy je przepętlić i wyświetlać je.

Możemy to zrobić za pomocą #każdy blok. Powtarzają to, co znajduje się w nawiasach dla każdego elementu w tablicy. Na dole komponentu, poza dowolnymi tagami, dodaj HTML, aby wyświetlić posty. 

 Container & GT;
  & lt; Ul & GT;
    {#each postów jako post}
      & lt; li & gt;
        & LT; Postadsummary {... Post} / & GT;
      & lt; / li & gt;
    {/każdy}
  & lt; / ul & gt;
& LT; / Container & GT;

10. Styl pojemnik

Możemy używać komponentów, aby zawierać wielokrotną logikę i używać ich, gdziekolwiek są potrzebne - wliczone style. The. & lt; kontener & gt; Komponent nie robi niczego, ale możemy go użyć, aby uzyskać maksymalną szerokość zawartości w niej.

Otworzyć Komponenty / kontener.svelt. i dodaj kilka stylów wewnątrz & lt; style & gt; etykietka. Wszelkie style, które stosujemy w środku komponentu, są łączone do tego składnika, co oznacza, że ​​możemy użyć selektora ogólnego. 

 Styl & GT;
  div {
    Margines: 0 Auto;
    Wyściółka: 0 1Rem;
    Max-szerokość: 50Rem;
  }
& LT; / Style & GT;

11. Zdefiniuj Slot & GT;

Jeśli komponent jest zaprojektowany tak, aby był rodzicem do innych elementów, potrzebujemy sposobu, aby przejść te składniki. The. & LT; Slot & GT; Element robi to po prostu i może być umieszczony wszędzie, który ma sens wewnątrz znacznika komponentu.

Z & lt; kontener & gt; , owijamy zawartość w stylu & lt; div & gt; . Posługiwać się & LT; Slot & GT; w środku & lt; div & gt; przekazać wszystko inne. 

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

12. ujawnij rekwizyty postasowe

Nie każdy komponent będzie pobierać niektórych danych. Ponieważ ładujemy posty z komponentu strony głównej, można go przekazać do elementów, które sprawiają, że za pośrednictwem atrybutów.

otwarty komponenty / postsummary.svelte. i zdefiniuj niektóre atrybuty na górze pliku. Są one wypełnione przez operatora rozprzestrzeniania dodaliśmy w etapie 09. 

 Skrypt i GT;
  Eksport Pozwól autorze;
  Eksport Let Image;
  Eksport Niech Silug;
  Eksport niech tytuł;
& lt; / script & gt;

13. Wyświetl Podsumowanie Post Blog

Gdy atrybuty są zaludnione, są one następnie dostępne, jak każda inna zmienna. Mając oddzielne atrybuty dla każdej części podsumowania poczty, ułatwiamy odczytanie znacznika.

Na dole komponentu dodaj trochę HTML, aby utworzyć podsumowanie. Klasy odnoszą się do wstępnie zdefiniowanych stylów. 

& LT; Artykuł & GT;
& lt; div class = "post-image" style = "
 Background-Image: URL ({Image}) "/ & GT;
& lt; div class = "ciało" & gt;
  & lt; div class = "autor-obraz" & gt;
    & lt; img src = {autor.Image}
     alt = {author.name} / & gt;
  & lt; / div & gt;
  & lt; div Class = "O" & GT;
    & lt; h1 & gt; {tytuł} & lt; / h1 & gt;
    & lt; span class = "byline" & gt; przez
     {author.name} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& LT; / Article & GT;

14. Link do Post Blog

Sapper blog

Sapper może pobrać informacje o link, ponieważ użytkownik unosi się nad nim dla postrzeganej korzyści (Kredyt obrazu: Matt Crouch)

W przeciwieństwie do podobnych ram, takich jak Next.js, Sapper współpracuje z regularnymi linkami kotwicowymi. W czasie kompilacji jest w stanie wykryć wewnętrzne linki, a także w celu dokonania własnych optymalizacji.

Zaktualizuj znacznik z poprzedniego kroku, owijając go w linku. Nie ma potrzeby tworzenia łańcuchów szablonów, aby skomponować Usuny URL. 

 A Rel = "Prefetlet" href = "/ blog / {slug}" & gt;
  & lt; artykuł / artykuł / artykuł / artykuł;
& lt; / a & gt;

15. Przynieś post za pomocą ślimaka

Sapper jest w stanie tworzyć strony na podstawie parametrów URL. W naszym przypadku odwołujemy się do / blog / ślimak, co oznacza, że ​​czyni komponent w /Routes/blog/[SLUG].svelte. .

Wewnątrz tego komponentu pobieraj dane blogu, takie jak dla strony indeksu. The. params. Obiekt zawiera parametry z adresu URL, które w tym przypadku jest ślimak. 

 Context Script = "Moduł" & GT;
  Eksportuj funkcję Async.
   Preload ({params}) {
    Const Res = Czeka na to.
     `Blog / $ {params.slug} .json`);
    CINST DATA = ACAIT RES.JSON ();
  }
& lt; / script & gt;

16. Błąd, jeśli nie zostanie znaleziony

W przeciwieństwie do strony indeksu istnieje szansa, że ​​nie ma miejsca na blogu w adresie URL. W takim przypadku powinniśmy wyświetlić błąd. Wraz z sprowadzać , The.. Preload. Metoda obejmuje również metodę błąd Zamiast tego zmienia odpowiedź na stronę błędu.

Na końcu metody wstępnej, pokaż błąd, jeśli nie ma postu. W przeciwnym razie ustaw Poczta zmienna dla strony. 

 IF (res.status === 200) {
  powrót {post: dane};
} else {
  Ten.Error (res.status,
    dane.message);
}

17. Wyświetl pocztę na blogu

Internal links

Wszelkie linki wewnętrzne można załadować asynchronicznie. Obejmuje to te napisane w Markdown. (Kredyt obrazu: Matt Crouch)

Dzięki pobraniu danych możemy teraz pokazać post na stronie. Podobnie jak komponent Postachary, wyświetlamy każdą część zawartości postu wewnątrz wsporników kręconymi. Na dole komponentu dodaj trochę znacznika, aby wyświetlić na stronie. 

 Artykuł;
  & lt; kontener & gt;
    & lt; div class = "tytuł" & gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; div class = "Byline" & gt; przez
       {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; / Article & GT;

18. Zamiast tego wyświetl HTML

Patrząc na stronę teraz, wszystko jest poprawnie opróżnione z rzeczywistej zawartości pocztowej. Konwersja Markdown generuje HTML, ale widzimy, że drukowane jako tekst na samym postie. Sapper ma wbudowany parser HTML w tym przypadku. Umieszczać @html. Przed nim będzie używać tego parsera. 

 {{@ html post.html}

19. Ustaw stronę "Tytuł i GT; wartość

Nasze blog działa poprawnie, ale konieczne jest kilka zmian. Jednym z nich jest zaktualizowanie & lt; title & gt; Na stronie, aby relabel zakładka jest wyświetlana.

Svelate obsługuje A. & lt; svelte: Head & GT; element, który wstrzykuje wszystko w nim do & lt; Head & GT; na stronie. Użyj tego, aby ustawić tytuł poczty jako & lt; title & gt; . 

 Svelte: Head & GT;
  & lt; tytuł i gt; {post.title} |
   Sapper Blog & LT; / Title & GT;
& lt; / svelte: Head & GT;

20. Aktualizowanie tytułu't & GT;

Każda strona przechodzi przez szablon, aby stemplować HTML na resztę strony. W tym miejscu zostanie wprowadzona jakakolwiek konfiguracja, jak import czcionek i metad. Otwórz szablon.html i dodaj haka do zawartości & lt; svelte: Head & GT; element z poprzedniego kroku. Dodaj to tuż przed zamknięciem & LT; / Head & GT; etykietka. 

 Head & GT;
  [...]% sapper.head%
& LT; / Head & GT; ostatnia rzecz musimy dodać, jest układ na blogu. Zamiast owijać każdą stronę w komponencie, Sapper będzie szukał pliku "_layout.svelte", aby wykonać tę pracę dla nas.
Wewnątrz _LAYOUT.SVELTE, importuj header & gt; komponent i pokaż, że na górze każdej strony. Zapewnia wygodne link do strony głównej.

21. Dodaj stały nagłówek

Ostatnią rzeczą, jaką musimy dodać, jest układ na blogu. Zamiast owijać każdą stronę w komponencie, Sapper będzie szukać _layout.svelt. Plik, aby wykonać tę pracę dla nas. Wewnątrz _layout.svelt. , importuj nagłówek i GT; komponent i pokaż, że na górze każdej strony. Zapewnia wygodne link do strony głównej. 

 Skrypt i GT;
  Nagłówek importowy z
   "../Components/header.svelte";
& lt; / script & gt;
& lt; main & gt;
  & LT; Header / & GT;
  & lt; slot / & gt;
& lt; / main & gt;

Ta treść pierwotnie pojawiła się w projektancie internetowym.

  • Komponenty internetowe: Najlepszy przewodnik
  • 30 rozszerzeń chromowanych dla projektantów stron internetowych i devs
  • 52 narzędzia do projektowania stron internetowych, aby pomóc Ci pracować mądrzej w 2019 roku

Jak - Najpopularniejsze artykuły

Samouczek Adobe Fresco: Utwórz portret w aplikacji do malowania

Jak Sep 12, 2025

(Kredyt obrazu: Phil Galloway) W tym samouczku Adobe Fresco będę tworzący tętniący życiem i emocjonalny portret..

Zacznij od Grav CMS

Jak Sep 12, 2025

(Kredyt obrazu: przyszłość) Grava jest systemem zarządzania treścią (CMS) z różnicą. Systemy zarządzania tr..

Jak malować Elven Maiden

Jak Sep 12, 2025

W tym samouczku będę cię prowadzić przez mój proces stworzenia urzekającego fantazji portret Elven Maiden. Jej historia jes..

Speed ​​scenituje istotę w Zbrush

Jak Sep 12, 2025

Podczas koncepcji stworzeń w Zbrush, prezentując swój pomysł jako szarości, nieznany kawałek 3d art. może u..

Utwórz efekty marszczenia Pixijs

Jak Sep 12, 2025

Istnieje wiele ciekawych efektów, które można dodać do strony, aby zwiększyć zaangażowanie, ale ważne jest, aby wybrać e..

Jak zbudować interfejs Chatbot

Jak Sep 12, 2025

W połowie 2000 r. Wirtualni agenci i obsługa klienta Chatbots otrzymali dużo wspólnego, mimo że nie były bardzo konwersacyj..

Jak wpływać na rankingi Google za pomocą treści

Jak Sep 12, 2025

Twoja treść przechodzi nigdzie, chyba że ludzie mogą go wyszukać i znaleźć, więc treści należy napisać ze zrozumieniem..

Master The Bridge Tool

Jak Sep 12, 2025

Jakie jest narzędzie mostowe? Jeśli jesteś nowy w CGI, istnieje zbyt wiele narzędzi do wyboru w zawrotnej tabli..

Kategorie