Bangun blog yang cepat reaktif dengan Svelte dan Saper

Saper adalah kerangka kerja yang dibangun di atas Svelte. Ini berfokus pada kecepatan keluar dari kotak dengan rendering server, tautan preloading, dan kemampuan untuk membuat pekerja layanan. Dikombinasikan dengan Svelte, hasil akhirnya adalah situs cepat kilat yang sangat dapat disesuaikan dengan jejak kecil.

Dalam tutorial ini, kami akan menggunakan Saper untuk membangun situs blogging yang ringan menggunakan komponen Svelte (lihat kami Cara Memulai Blog Posting untuk beberapa tips teknis yang kurang pada blogging). Svelte adalah kerangka kerja dengan perbedaan. Ini menganalisis kode pada waktu kompilasi dan membuat satu set modul dalam Javascript vanili, yang menghindari kebutuhan untuk runtime. Jika Anda memerlukan bantuan lebih lanjut dengan tata letak kemudian periksa posting kami tentang cara mendapatkan yang sempurna Tata Letak Situs Web . Atau untuk opsi lain, lihat bagian atas ini Pembangun situs web Dan ingat, Anda juga harus mendapatkan hosting web. Layanan pada titik.

Unduh file tutorial di FileSilo di sini

01. Instal Ketergantungan

Pertama, kita perlu mengunduh dan menginstal dependensi. Ini bergantung pada Svelte untuk bekerja dan membutuhkan kerangka kerja lain untuk membangun server, tetapi sisanya tergantung pada aplikasi yang sedang dibangun. Dalam hal ini, kami membutuhkan beberapa paket untuk membantu mengekstrak file Markdown nanti.

Unduh file tutorial (di atas), temukan di baris perintah dan instal dependensi.

> npm install

02. Bangun server

Saper dibangun dalam dua bagian - kerangka kerja sisi klien dan rendering sisi server dari kerangka kerja itu. Ini membantu mendapatkan peningkatan kecepatan ekstra untuk mereka yang berada pada jaringan yang lebih lambat. Itu dibangun menggunakan node, yang memungkinkan Saper Middleware melakukan semua angkat berat bagi kita.

Buka Server.js dan buat server dengan Express. Menggunakan rekomendasi mereka, kami sertakan kompresi untuk mengecilkan file yang kami kirim dan Sirv. untuk melayani file statis.

 Express ()
  .menggunakan(
    kompresi ({ambang batas: 0}),
    SIRV ("Static", {dev}),
    Saper.Middleware ()
  )
  .Listen (port); 

03. Pasang aplikasi

Di sisi klien, kita perlu memberi tahu Saper tempat untuk memasang aplikasi. Ini mirip dengan React Dom memberikan atau vue's $ mount. metode. Di dalam client.js, mulai Saper dan pasang ke root & lt; div & gt; elemen. Elemen itu termasuk dalam file template, yang akan kami datangi nanti.

 Impor * sebagai Saper dari "@ Saper / App";
Saper.Start ({
  Target: Document.GetElementByid (
   "akar")
}); 

04. Mulai server pengembangan

Dengan server dasar dan file klien diatur, kami dapat memulai server pengembangan. Ini memulai pembuatan file server, klien dan layanan layanan, dan itu akan dimulai pada port 3000 secara default. Setiap kali file berubah, itu akan membangun kembali bagian dari aplikasi yang berubah.

Jalankan server pada baris perintah. Buka jendela ini saat mengembangkan situs.

 & gt; NPM Run Dev 

05. Buat rute server

Apa pun di dalam direktori "rute" akan berubah menjadi rute untuk aplikasi. File dengan .j Ekstensi akan menjadi apa yang disebut rute server. Rute-rute ini tidak memiliki UI, tetapi sebaliknya diminta oleh aplikasi untuk mengambil data. Dalam kasus kami, kami akan menggunakannya untuk memuat posting blog.

Itu Rute / blog / index.json.js file akan membuat /blog.json. titik akhir di server kami. Impor posting blog dan buat beberapa json dari mereka.

 Impor posting dari "./_posts.js";
const content = json.stringify (
  posts.map (pos = & gt; ({
    Penulis: Post.author,
    Gambar: Post.Image,
    Judul: Post.Title,
    Slug: post.slug.
  })))
); 

06. Kembalikan posting blog

Server Rute Fungsi ekspor yang sesuai dengan metode HTTP. Misalnya, untuk menanggapi permintaan GET, kami akan mengekspor fungsi yang disebut Dapatkan dari file rute server. Membuat Dapatkan Fungsi yang merespons dengan data yang kami kumpulkan pada langkah sebelumnya dalam format JSON. Buka http: // localhost: 3000 / blog.json Di browser dan periksa posting yang datang.

 Fungsi ekspor dapatkan (req, res) {
  res.writehead (200, {
    "Jenis Konten": "Aplikasi / JSON"
  });

  res .END (konten);
} 

07. Buat halaman indeks

Halaman di Saper adalah komponen lajai biasa. Setiap komponen adalah satu file dengan a .langsing ekstensi, dan berisi semua logika dan gaya untuk mengelola sendiri. Ada JavaScript komponen ini perlu dijalankan akan hidup di dalam a & lt; script & gt; TAG - Sama seperti halaman HTML apa pun.

Dalam ROUTES / INDEX.SVERTE. , Impor beberapa komponen svelte lainnya yang dapat kita gunakan untuk membangun halaman ini. Ekspor A. Posting variabel yang akan kita isi nanti.

 & lt; script & gt;
  Wadah Impor dari 8.
   "../Components/container.svelte";
  Impor postsummary dari.
   "../Components/postsummary.svelte";
  ekspor biarkan posting;
& lt; / script & gt; 

08. Ambil data posting blog

Dengan pengaturan halaman, kita dapat mulai membawa posting blog (Anda mungkin ingin mendukungnya penyimpanan awan ). Kita perlu melakukan ini segera setelah halaman dimuat. Agar server menyadari hal ini dan kemudian meminta data ini ketika merender halaman, itu perlu dilakukan secara terpisah & lt; naskah konteks = "modul" & gt; menandai.

Di server, Saper akan mencari a preload. fungsi, dan tunggu sampai selesai sebelum menampilkan halaman. Di sini, kami mengisi Posting variabel dari langkah sebelumnya.

 & lt; Script Context = "Modul" & gt;
  ekspor fungsi async preload () {
    const res = menunggu
     Ini.Fetch ("blog.json");
    data const = menunggu res.json ();
    return {posting: data};
  }
& lt; / script & gt; 

09. Ringkasan Posting Display

Di Svelte, variabel reaktif secara default. Ini berarti, seperti yang mereka perbarui, komponen kami juga akan memperbarui juga. Sebagai Posting Variabel sekarang menyimpan array posting blog, kita dapat mengulanginya dan menampilkannya.

Kita bisa melakukan ini menggunakan #setiap blok. Ini akan mengulangi apa yang ada di dalam tanda kurung untuk setiap item dalam array. Di bagian bawah komponen, di luar tag apa pun, tambahkan HTML untuk menampilkan posting.

 & lt; wadah & gt;
  & lt; ul & gt;
    {#Each posting sebagai posting}
      & lt; li & gt;
        & lt; postsummary {... POST} / & gt;
      & lt; / li & gt;
    {/setiap}
  & lt; / ul & gt;
& lt; / wadah & gt; 

10. Gaya wadah

Kita dapat menggunakan komponen untuk berisi logika yang berulang-ulang dan menggunakannya di mana pun mereka dibutuhkan - termasuk gaya. Itu & lt; wadah & gt; Komponen saat ini tidak melakukan apa-apa, tetapi kita dapat menggunakannya untuk memberikan lebar maksimum pada konten di dalamnya.

Buka komponen / wadah.svelte. , dan tambahkan beberapa gaya di dalam a & lt; gaya & gt; menandai. Setiap gaya yang kami terapkan di dalam komponen diliputi ke komponen itu, yang berarti bahwa kita dapat menggunakan pemilih generik.

 & lt; style & gt;
  div {
    MARGIN: 0 AUTO;
    Padding: 0 1REM;
    Lebar Maks: 50Rem;
  }
& lt; / style & gt; 

11. Tetapkan A & LT; Slot & GT;

Jika suatu komponen dirancang untuk menjadi orang tua dengan komponen lain, kami membutuhkan cara untuk meneruskan komponen-komponen tersebut. Itu & lt; slot & gt; Elemen melakukan hal itu, dan dapat ditempatkan di mana saja yang masuk akal di dalam markup komponen.

Dengan & lt; wadah & gt; , Kami membungkus konten dalam gaya & lt; div & gt; . Menggunakan & lt; slot & gt; di dalam & lt; div & gt; untuk membiarkan yang lainnya lobar.

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

12. Paparkan alat peraga postsummary

Tidak setiap komponen akan mengambil beberapa data. Ketika kami memuat posting dari komponen halaman utama, dapat diteruskan ke komponen yang diberikannya melalui atributnya.

Buka komponen / postsummary.svelte. dan mendefinisikan beberapa atribut di bagian atas file. Ini diisi oleh operator spread yang kami tambahkan pada langkah 09.

 & lt; script & gt;
  ekspor biarkan penulis;
  ekspor biarkan gambar;
  ekspor biarkan siput;
  Ekspor biarkan judul;
& lt; / script & gt; 

13. Tampilkan Ringkasan Posting Blog

Ketika atribut diisi, mereka kemudian diakses seperti variabel lain. Dengan memiliki atribut terpisah untuk setiap bagian dari Ringkasan Pos, kami membuat markup lebih mudah dibaca.

Di bagian bawah komponen, tambahkan beberapa HTML untuk membuat ringkasan. Kelas-kelas berhubungan dengan gaya yang telah ditentukan sebelumnya.

& lt; artikel & gt;
& lt; kelas div = gaya "post-image" = "
 latar belakang-gambar: URL ({gambar}) "/ & gt;
& lt; kelas div = "tubuh" & gt;
  & lt; div class = "image-image" & gt;
    & lt; img src = {otor.image}
     alt = {penulis.name} / & gt;
  & lt; / div & gt;
  & lt; kelas div = "Tentang" & gt;
    & lt; h1 & gt; {judul} & lt; / h1 & gt;
    & lt; span class = "byline" & gt; oleh
     {penulis.name} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / artikel & gt; 

14. Tautan ke posting blog

Tidak seperti kerangka kerja serupa seperti next.js, Saper bekerja dengan tautan jangkar reguler. Pada waktu bangun, ia dapat mendeteksi tautan internal, dan juga untuk membuat optimisasi sendiri.

Perbarui markup dari langkah sebelumnya dengan membungkusnya dalam tautan. Tidak perlu Anda membuat string templat untuk menyusun URL yang rusak.

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

15. Ambil pos dengan siput

Saper dapat membuat halaman berdasarkan parameter URL. Dalam kasus kami, kami menautkan / Blog / Slug, yang berarti membuat komponen di /routes/blog/[lug[.svelte. .

Di dalam komponen itu, ambil data blog seperti yang kami lakukan untuk halaman indeks. Itu params. Objek berisi parameter dari URL, yang dalam hal ini adalah siput.

 & lt; Script Context = "Modul" & gt;
  Ekspor fungsi Async.
   preload ({params}) {
    const res = menunggu ini.fetch (
     `blog / $ {params.slug} .json`);
    data const = menunggu res.json ();
  }
& lt; / script & gt; 

16. Kesalahan jika posting tidak ditemukan

Berbeda dengan halaman indeks, ada kemungkinan tidak ada posting blog di URL. Dalam hal ini, kita harus menampilkan kesalahan. Bersama mengambil , itu preload. Metode juga termasuk kesalahan yang mengubah respons terhadap halaman kesalahan sebagai gantinya.

Pada akhir metode preload, tunjukkan kesalahan jika tidak ada posting yang ditemukan. Kalau tidak, atur pos variabel untuk halaman.

 if (res.status === 200) {
  return {posting: data};
} lain {
  Ini.Error (res.status,
    data.message);
} 

17. Tampilkan posting blog

Dengan data yang diambil, kita sekarang dapat menampilkan posting pada halaman. Mirip dengan komponen postsummer, kami menampilkan setiap bagian dari konten pos di dalam kurung keriting. Di bagian bawah komponen, tambahkan beberapa markup untuk ditampilkan pada halaman.

 & lt; artikel & gt;
  & lt; wadah & gt;
    & lt; kelas div = "judul" & gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; div class = "byline" & gt; oleh
       {post.author.name} & lt; / div & gt;
    & lt; / div & gt;
    & lt; img class = "post-image" src = {post.image} alt = "" / & gt;
     {post.html}
  & lt; / wadah & gt;
& lt; / artikel & gt; 

18. Menampilkan HTML sebagai gantinya

Melihat halaman sekarang, semuanya menampilkan dengan benar selain dari konten postanya yang sebenarnya. Konversi Markdown menghasilkan HTML, tetapi kami melihat yang dicetak sebagai teks pada posting itu sendiri. Saper memiliki parser HTML yang dibangun untuk kasus ini. Penempatan @html. Di depannya akan menggunakan parser ini.

 {@ html post.html} 

19. Atur halaman & lt; judul & gt; nilai

Fungsi blog kami dengan benar, tetapi ada beberapa perubahan yang diperlukan untuk menyelesaikannya. Salah satunya adalah memperbarui & lt; judul & gt; Pada halaman untuk merelabut tab yang ditampilkan di.

Svelte mendukung A. & lt; svelte: head & gt; elemen, yang menyuntikkan apa pun di dalamnya ke dalam & lt; head & gt; dari halaman. Gunakan ini untuk mengatur judul posting sebagai & lt; judul & gt; .

 & lt; svelte: head & gt;
  & lt; judul & gt; {post.title} |
   Blog Saper & lt; / judul & gt;
& lt; / svelte: head & gt; 

20. Memperbarui & lt; judul & gt;

Setiap halaman melewati templat untuk mencap HTML untuk sisa halaman. Di sinilah pengaturan apa pun seperti impor font dan tag meta akan dimasukkan. Buka template.html, dan tambahkan kait untuk konten & lt; svelte: head & gt; elemen dari langkah sebelumnya. Tambahkan ini hanya sebelum penutupan & lt; / head & gt; menandai.

 & lt; head & gt;
  [...]% Saper.Head%
& lt; / head & gt; hal terakhir yang perlu kita tambahkan adalah tata letak untuk blog. Alih-alih membungkus setiap halaman dalam komponen, Sapper akan mencari file "_layout.svelte" untuk melakukan pekerjaan ini untuk kami.
Di dalam _layout.svelte, import the & lt; header & gt; komponen dan menunjukkan bahwa di bagian atas setiap halaman. Ini memberikan tautan yang mudah kembali ke beranda. 

21. Tambahkan header permanen

Hal terakhir yang perlu kita tambahkan adalah tata letak untuk blog. Alih-alih membungkus setiap halaman dalam komponen, Sapper akan mencari a _layout.svelte. file untuk melakukan pekerjaan ini untuk kita. Dalam _layout.svelte. , impor & lt; header & gt; komponen dan menunjukkan bahwa di bagian atas setiap halaman. Ini menyediakan tautan yang mudah kembali ke beranda.

 & lt; script & gt;
  Impor header dari.
   "../Components/Header.Svelte";
& lt; / skrip & gt;
& lt; main & gt;
  & lt; header / & gt;
  & lt; slot / & gt;
& lt; / main & gt; 

Konten ini awalnya muncul di Desainer Web.

• Komponen Web: Panduan Ultimate
• 30 ekstensi krom untuk desainer dan devs web
• 52 alat desain web untuk membantu Anda bekerja lebih pintar pada tahun 2019