Svelte ve Sapper ile hızlı reaktif bir blog oluşturun

Sapper, Svelte'nin üstüne inşa edilmiş bir çerçevedir. Sunucu oluşturma, link ön yükleme ve servis çalışanları oluşturma yeteneğiyle kutunun hızına odaklanır. Svelte ile birlikte, sonucu oldukça özelleştirilebilir, küçük bir ayak izi ile bir yıldırım özelleştirilebilir.

Bu eğitimde, SVELTE bileşenlerini kullanarak hafif bir bloglama sitesi oluşturmak için Sapper kullanıyoruz (bkz. Bir blog nasıl başlatılır Bloglama için bazı daha az teknik ipuçları için gönderin). Svelte, farkı olan bir çerçevedir. Kodu derleme zamanında analiz eder ve bir çalışma zamanı ihtiyacını önleyen Vanilya Javascript'te bir dizi modül oluşturur. Düzenlerle ilgili daha fazla yardıma ihtiyacınız olursa, Mükemmelliği nasıl elde edeceğinize dair görevimizi inceleyin. Web Sitesi Düzeni . Veya diğer seçenekler için bu üstüne bakın Web Sitesi İnşaatçıları ve hatırla, ayrıca ağ sağlayıcısı HİZMET ON.

Filesilo'da öğretici dosyaları burada indirin

01. Bağımlılıkları kurun

İlk olarak, bağımlılıkları indirmemiz ve yüklememiz gerekir. Svelte'ye çalışmak için güveniyor ve sunucuyu oluşturmak için başka bir çerçeve gerektiriyor, ancak gerisi, uygulamaya dayanan uygulamaya bağlıdır. Bu durumda, markdown dosyalarını daha sonra çıkarmaya yardımcı olmak için birkaç pakete ihtiyacımız var.

Eğitim dosyalarını (yukarıda) indirin, komut satırında bulun ve bağımlılıkları yükleyin.

> npm install

02. Sunucu oluşturun

Sapper, iki bölümden oluşur - istemci tarafı çerçevesi ve bu çerçevenin sunucu tarafı oluşturulması. Bu, daha yavaş ağlarda olanlar için bu ekstra hız artışının elde edilmesine yardımcı olur. Sapper Middleware'in bizim için tüm ağır kaldırmayı yapmasına izin veren düğüm kullanılarak oluşturulmuştur.

Server.js'i açın ve ekspres ile sunucuyu oluşturun. Tavsiyelerini kullanarak, biz dahil sıkıştırma gönderdiğimiz dosyaları küçültmek ve sirv statik dosyalara hizmet etmek için.

 Express ()
  . (
    Sıkıştırma ({eşik: 0}),
    sirv ("statik", {dev}),
    sapper.middleware ()
  )
  .Listen (port); 

03. Uygulamayı takın

Müşteri tarafında, Sapper'in başvuruyu nereye monte edilmesini söylememiz gerekir. Bu, Dom'un tepkisine benzer kılmak ya da vue $ Mount Yöntemler. Client.js içinde, Sapper'i başlatın ve köke monte edin & lt; div & gt; eleman. Bu öğe, daha sonra geleceğimiz şablon dosyasına dahil edilmiştir.

 İthalat * "@ Sapper / App" dan Sapper olarak;
sapper.start ({
  Hedef: belge.getElementbyid (
   "kök")
}); 

04. Geliştirme sunucusunu başlatın

Temel Sunucu ve Müşteri Dosyaları Kurulumu ile geliştirme sunucusunu başlatabiliriz. Bu, sunucu, istemci ve servis işçi dosyalarının bir yapısını başlatır ve varsayılan olarak 3000 numaralı bağlantı noktasında başlayacaktır. Bir dosya değiştiğinde, değiştirilen uygulamanın bölümünü yeniden oluşturur.

Sunucuyu komut satırında çalıştırın. Siteyi geliştirirken bu pencereyi açık tutun.

 & gt; npm run dev 

05. Bir sunucu rotası oluşturun

"ROUTES" dizininin içindeki herhangi bir şey, uygulama için bir rotaya dönüşecektir. İle olan dosyalar .js Uzatma, sunucu rotaları olarak adlandırılır. Bu rotalarda UI yok, ancak bunun yerine başvuru tarafından veri almak için talep edilir. Bizim durumumuzda, blog yazılarını yüklemek için kullanacağız.

rotalar / blog / index.json.js Dosya oluşturacak /blog.json Sunucumuzda bitiş noktası. Blog yazılarını alın ve onlardan biraz json oluşturun.

 "./_posts.js" dan ithalat gönderileri;
Const içerikleri = json.Stringify (
  posts.map (post = & gt; ({)
    Yazar: Post.Author,
    Resim: Post.Image,
    Başlık: Post.Title,
    Slug: Post.slug.
  }))
); 

06. Blog yazılarını iade edin

Sunucu HTTP yöntemleriyle karşılık gelen dışa aktarma işlevlerini yönlendirir. Örneğin, bir GET isteğine cevap vermek için, denilen bir işlevi dışa aktarırız. almak Sunucu rotası dosyasından. Oluşturmak almak Bir JSON formatında önceki adımda topladığımız verilere cevap veren işlev. Açık http: // localhost: 3000 / blog.json Tarayıcıda ve mesajları kontrol edin.

 İhracat işlevi olsun (Req, Res) {
  res.writehead (200, {
    "İçerik tipi": "Uygulama / JSON"
  });

  res.end (içerik);
} 

07. Dizin sayfası oluştur

Sapper'deki sayfalar düzenli svelte bileşenleridir. Her bir bileşen, bir ile tek bir dosyadır. .svelte Uzatma ve kendisini yönetmek için tüm mantık ve stilleri içerir. Herhangi bir Javascript Bu bileşenin çalışması gereken bir yerde yaşayacak & lt; script & gt; TAG - Tıpkı herhangi bir HTML sayfası gibi.

İçeride rotaları / index.svelte , bu sayfayı oluşturmak için kullanabileceğimiz birkaç Svelte bileşenini içe aktarın. İhracat a gönderiler Daha sonra dolduracağımız değişken.

 & lt; script & gt;
  ithal konteyner
   "../Components/container.svelte";
  İthalat PostSummary'den
   "../Components/postsummary.svelte";
  İHRACAT GÖNDERİLMESİ;
& lt; / script & gt; 

08. Blog Gönderi Verilerini Alın

Sayfa kurulumuyla, blog yazılarını getirmeye başlayabiliriz (bunları yedeklemek isteyebilirsiniz. Bulut depolama ). Sayfa yüklenmez bunu yapmamız gerekiyor. Sunucunun bunun farkında olması ve ardından sayfayı telafi ettiğinde bu verileri isteyin, ayrı bir şekilde gitmek gerekir. & lt; script içeriği = "modül" & gt; etiket.

Sunucuda Sapper bir arayacak preload işlevi ve sayfayı göstermeden önce tamamlanmasını bekleyin. Burada, biz dolduruyoruz gönderiler önceki adımdan değişken.

 & lt; script içeriği = "modül" & gt;
  Async Function Preload () {İhracat
    Const Res = Bekliyor
     this.flet ("blog.json");
    Const Data = RES.JSON ();
    Return {Mesajlar: Veri};
  }
& lt; / script & gt; 

09. Mesaj Özetlerini Görüntüle

Svelte'de değişkenler varsayılan olarak reaktif. Bu, güncellendikleri gibi, bileşenlerimiz de güncellenecek. Olarak gönderiler Değişken şimdi bir dizi blog yazısı tutar, bunlar üzerinde döndürebilir ve onları görüntüleyebiliriz.

Bunu kullanarak bunu yapabiliriz #her biri blok. Bunlar, bir dizideki her bir öğe için parantez içinde olanı tekrarlayacaktır. Bileşenin dibinde, herhangi bir etiketin dışında, gönderileri görüntülemek için HTML'yi ekleyin.

 & lt; konteyner ve gt;
  & lt; ul & gt;
    {# sonrası olarak gönderiler}
      & l li & gt;
        & lt; postSummary {... Post} / & gt;
      & lt; / li & gt;
    {/her biri}
  & lt; / ul & gt;
& lt; / konteyner & gt; 

10. Konteyner stili

Tekrarlanan herhangi bir mantığı içerecek bileşenleri kullanabilir ve bunları gerektiğinde kullanırken kullanabiliriz - Stiller dahildir. & lt; konteyner ve gt; Bileşen şu anda hiçbir şey yapmaz, ancak içindeki içeriğe maksimum genişlik sağlamak için kullanabiliriz.

Açmak bileşenleri / konteyner.svelte ve içine bazı stiller ekleyin & lt; stil & gt; etiket. Bir bileşenin içine uyguladığımız herhangi bir stil, bu bileşene kapsanır, bu da genel bir seçici kullanabileceğimiz anlamına gelir.

 & lt; stil & gt;
  div {
    Marj: 0 Otomatik;
    Dolgu: 0 1rem;
    Maksimum genişlik: 50rem;
  }
& lt; / stil & gt; 

11. A & GT'yi tanımlayın;

Bir bileşen, diğer bileşenlere ebeveyn olmak için tasarlanmışsa, bu bileşenleri geçmenin bir yoluna ihtiyacımız var. & lt; slot & gt; Öğe, sadece bunu yapar ve bir bileşenin işaretlemesinde mantıklı olan herhangi bir yere yerleştirilebilir.

İle & lt; konteyner ve gt; , İçeriği tarzda sarıyoruz & lt; div & gt; . Kullanmak & lt; slot & gt; içinde & lt; div & gt; her şeyin yoluyla izin vermek için.

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

12. PostSummary Protları açığa çıkarın

Her bileşen bazı verileri almayacak. Gönderileri ana sayfa bileşeninden yüklerken, öznitelikleri boyunca yaptığı bileşenlere geçilebilir.

Açık Bileşenler / PostSummary.svelte ve dosyanın üstündeki bazı özellikleri tanımlayın. Bunlar 09. adımda eklediğimiz yayılan operatör tarafından dolduruluyor.

 & lt; script & gt;
  ihracat yazarın;
  İhracat imajını izin verin;
  İhracat sümüklüca izin verin;
  İHRACAT BELİRTİLMESİ;
& lt; / script & gt; 

13. Ekran Blog Gönderi Özeti

Nitelikler doldurulduğunda, daha sonra diğer herhangi bir değişken gibi erişilir. Posta özetinin her bir parçası için ayrı niteliklere sahip olarak, işaretlemenin okunmasını kolaylaştırır.

Bileşenin alt kısmında, özeti oluşturmak için bazı HTML ekleyin. Sınıflar önceden tanımlanmış stillerle ilgilidir.

& lt; makale ve gt;
& lt; div class = "görüntü sonrası" style = "
 Arka plan-resim: URL ({Image}) "/ & gt;
& lt; div sınıf = "vücut" & gt;
  & lt; div class = "Author-image" & gt;
    & lt; img src = {Author.Image}
     Alt = {Author.Name} / & gt;
  & lt; / div & gt;
  & lt; div class = "Hakkında" & gt;
    {başlık} & lt; / h1 & gt;
    & lt; span sınıfı = "byline" & gt; tarafından
     {Author.Name} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / makale & gt; 

14. Blog Yazılımına Bağlantı

Next.js gibi benzer çerçevelerin aksine, Sapper normal çapa bağlantılarıyla çalışır. Yapı zamanında, iç bağlantıları ve ayrıca kendi optimizasyonlarını yapabilmek için mümkündür.

İşaretlemeyi bir bağlantıya sararak önceki adımdan güncelleyin. Sümüklü URL'yi oluşturmak için şablon dizeleri oluşturmanıza gerek yoktur.

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

15. Bir mesajı sümüklü böcek getirin

Sapper, URL parametrelerine göre sayfalar oluşturabilir. Bizim durumumuzda, bağlanırız / Blog / Slug, Bu, bileşeni kullandığı anlamına gelir. /routes/blog/ lcslugx.svelte .

Bu bileşenin içinde, dizin sayfası için yaptığımız gibi blog verilerini alın. parametreler Nesne, bu durumda sümüklü böcek olan URL'den parametreleri içerir.

 & lt; script içeriği = "modül" & gt;
  Async işlevini dışa aktarın
   preload ({params}) {
    Const Res = bunu bekliyor.
     `blog / $ {params.slug} .json`);
    Const Data = RES.JSON ();
  }
& lt; / script & gt; 

16. Gönderi bulunmazsa hata oluştu

Dizin sayfasından farklı olarak, URL'de bir blog yazısı olmadığı bir şans var. Bu durumda, bir hata göstermeliyiz. İle birlikte almak , preload Yöntem ayrıca içerir hata Bu, bunun yerine bir hata sayfasına cevabı değiştirir.

Önyükleme yönteminin sonunda, mesaj bulunmadıysa bir hata gösterin. Aksi takdirde, ayarlayın İleti Sayfa için değişken.

 Eğer (res.status === 200) {
  geri dönüş {post: data};
} Başka {
  Bu.Error (Res.Status,
    data.Message);
} 

17. Blog gönderisini görüntüleyin

Verilen verilerle, şimdi sayfadaki postayı gösterebiliriz. PostSummary bileşenine benzer şekilde, gönderinin içeriğinin her bir kısmını kıvırcık parantez içinde gösteririz. Bileşenin alt kısmında, sayfada görüntülenecek bazı işaretler ekleyin.

 & lt; makale ve gt;
  & lt; konteyner ve gt;
    & lt; div sınıf = "başlık" & gt;
      {{post.title}}; / h1 & gt;
      & lt; div sınıf = "byline" & gt; tarafından
       {post.author.Name} & lt; / div & gt;
    & lt; / div & gt;
    & lt; img class = "image-image" src = {post.Image} alt = "" / & gt;
     {post.html}
  & lt; / konteyner & gt;
& lt; / makale & gt; 

18. Bunun yerine HTML'yi görüntüleyin

Şimdi sayfaya bakıldığında, her şey gerçek gönderiden sonra doğru şekilde görüntülenir. Markdown dönüşümü HTML oluşturur, ancak bu yazının kendisinde metin olarak yazdırıldığını görüyoruz. SAPPER, bu durum için yerleşik bir HTML ayrıştırıcısına sahiptir. Yerleştirme @HTML Önünde bu ayrıştırıcıyı kullanacak.

 {@ html post.html} 

19. Sayfayı ayarlayın; Başlık ve GT; değer vermek

Blogumuz doğru çalışır, ancak bitirmek için birkaç değişiklik var. Bunlardan biri güncellemek & lt; unvanı ve gt; Sayfada, gösterdiği sekmeyi yeniden boşaltmak için.

Svelte bir & lt; svelte: baş & gt; İçinde bir şey enjekte eden eleman & lt; head & gt; Sayfanın. Gönderinin başlığını ayarlamak için bunu kullanın. & lt; unvanı ve gt; .

 & lt; svelte: baş & gt;
  & lt; unvanı ve gt; {post.title} |
   SAPPER BLOG & LT; / unvan & gt;
& lt; / svelte: baş & gt; 

20. Ünvanı ve GT;

Her sayfa, sayfanın geri kalanında HTML'yi kaldırmak için bir şablondan geçer. Bu, yazı tipi ithalatı ve meta etiketleri gibi herhangi bir kurulumun girileceği yerdir. Template.html'yi açın ve içeriği için bir kanca ekleyin. & lt; svelte: baş & gt; önceki adımdan itibaren öğe. Bunu kapanmadan hemen önce ekleyin / head & gt; etiket.

 & lt; head & gt;
  [...]% Sapper.head%
& lt; / head & gt; eklememiz gereken son şey blog için bir düzen. Her sayfayı bir bileşene sarmak yerine, SAPPER bu işi bizim için yapacak bir "_layout.svelte" dosyasını arayacaktır.
İnside _layout.svelte, up; başlık ve gt; bileşen ve her sayfanın en üstünde. Ana sayfaya geri dönün. 

21. Kalıcı başlık ekleyin

Eklememiz gereken son şey blog için bir düzen. Her sayfayı bir bileşene sarmak yerine Sapper bir arayacak _layout.svelte Bu işi bizim için yapacak dosyalama. İçeride _layout.svelte , İçe aktarmak; Header & gt; bileşen ve her sayfanın en üstünde. Ana sayfaya geri döner uygun bir bağlantı sağlar.

 & lt; script & gt;
  ithalat başlığı
   ".. /components/header.svelte";
& lt; / script & gt;
& lt; ana & gt;
  & lt; başlık / ve gt;
  & lt; slot / & gt;
& lt; / main & gt; 

Bu içerik başlangıçta web tasarımcısında göründü.

• Web Bileşenleri: Nihai Kılavuz
• Web tasarımcıları ve devs için 30 krom uzantısı
• 2019'da daha akıllıca çalışmanıza yardımcı olacak 52 Web Tasarım Araçları