‫-: Baiklah.
‫Dalam video ini, saya akan menunjukkan cara
‫menggunakan salah satu
‫fitur Pug yang paling penting dan juga paling kompleks.
‫Dan itu diperpanjang.
‫Dengan ekstensi, kita akan
‫dapat menggunakan tata letak dasar yang
‫sama untuk setiap halaman yang ingin kita render.
‫Saat ini, kami memiliki jenis template dasar kami yang telah selesai
‫dengan header yang bagus dan footer yang bagus.
‫Jadi sekarang, mari kita mulai mengisi isinya.
‫Sekarang, tentu saja, kami ingin
‫memuat konten yang berbeda untuk halaman yang berbeda.
‫Dan untuk memulai, kami ingin memiliki halaman ikhtisar dengan
‫semua tur, dan kemudian halaman
‫dengan semua detail tur untuk satu tur tertentu.
‫Jadi sekarang mari kita terapkan beberapa rute
‫untuk kedua halaman ini.
‫Dan saya akan melakukannya di sini di bawah
‫yang pertama yang telah kita buat.
‫Jadi, /overview Dan
‫kemudian sesuatu yang sangat mirip dengan sebelumnya.
‫Dan lagi, sedikit kemudian, sebenarnya di video berikutnya kita
‫akan memasukkan rute-rute ini
‫ke dalam file terpisah mereka sendiri.
‫Jadi, render, dan sekarang di halaman ikhtisar ini
‫kita sebenarnya ingin
‫merender template yang disebut ikhtisar.
‫Itu belum ada,
‫jadi sekarang mari kita cepat membuat satu.
‫Jadi, ikhtisar. pug Dan
‫sebenarnya mari kita juga mengirimkan beberapa data.
‫Dan kami akan memberikan judul halaman yang
‫dalam hal ini, kami akan mengatakan,
‫Semua Tur.
‫Sekarang mari ambil kode
‫ini dan salin untuk tur.
‫Jadi kami juga ingin rute untuk tur tertentu lagi.
‫Dan di sini,
‫kita ingin memiliki template yang juga disebut tour.
‫Dan kemudian judulnya, untuk saat ini, mari
‫kita lakukan
‫lagi, The Forest Hiker Tour.
‫Jadi untuk saat ini, ini hanya sebagai pengganti,
‫dan tentu saja nanti
‫kita akan benar-benar membuat ini menjadi dinamis.
‫Karena pada titik ini,
‫kami masih mempelajari cara kerja Pug yang sebenarnya.
‫Sekarang mari kita buat juga template tur itu.
‫Dan itu saja.
‫Oke, sekarang dengan dua template baru di sini selesai, inilah
‫yang akan kita lakukan.
‫Di masing-masing template ini, dan dalam hal
‫ini di sini ikhtisarnya, kami
‫hanya ingin menempatkan konten untuk halaman tertentu itu.
‫Jadi kami tidak menginginkan footer di sini dan tidak
‫ada header dan tidak ada barang yang kami miliki di pangkalan.
‫Jadi, sekali lagi, benar-benar
‫hanya konten untuk halaman ikhtisar.
‫Jadi itulah tepatnya yang akan kita masukkan ke dalam
‫file ini, dan kemudian, pada dasarnya kita akan menyuntikkan konten
‫ini ke dalam template dasar, yang dapat
‫kita sebut sebagai template induk.
‫Proses ini kemudian disebut perluasan.
‫Jadi setiap kali template ikhtisar dirender, kami
‫kemudian mengambil template dasar
‫dan mengisinya dengan konten file ini,
‫dan kami memperluasnya.
‫Inilah cara kami menerapkannya.
‫Pertama, di pangkalan, kita perlu meletakkan balok.
‫Saya benar-benar akan melakukannya di sini.
‫Jadi mari kita hapus semua
‫ini, dan di sini, letakkan blok.
‫Dan blok itu, saya akan menyebutnya konten.
‫Kemudian di dalam blok itu, kita sebenarnya juga
‫memiliki beberapa konten.
‫Jadi mari kita menempatkan h1 di sini.
‫Namun konten ini kemudian akan ditimpa.
‫Tapi bagaimanapun, mari kita
‫taruh di sini hanya sebagai pengganti, pada dasarnya.
‫Jadi, Ini adalah heading placeholder.
‫Oke, jadi kami memiliki blok kami di sini, dan sekarang
‫kami dapat pergi ke halaman ikhtisar kami
‫dan mengatakan bahwa kami ingin memperluas template dasar kami.
‫Jadi, perpanjang basis.
‫Atau sebenarnya, itu disebut memanjang.
‫Jadi file ini memperluas file dasar.
‫Dan tentu saja, jika yang ini
‫akan dipanggil, misalnya, index. pug, maka
‫di sini kita akan mengatakan extends index.
‫Sekarang apa sebenarnya konten
‫yang akan diperluas di template dasar?
‫Nah, itu yang kita masukkan ke dalam blok konten.
‫Jadi, juga di sini, kami membuat blok yang disebut konten.
‫Dan kemudian di sana, seperti biasa kita bisa meletakkan konten kita.
‫Jadi katakan saja, Ini adalah ikhtisar tur.
‫Di sini, kami pada dasarnya mendefinisikan kembali blok
‫konten yang ada di pangkalan.
‫Jadi sekali lagi, kami
‫memiliki blok ini di sini yang disebut konten,
‫dan sekarang dengan meletakkan blok konten yang sama di
‫sini, di halaman ini, yang kemudian
‫memperluas dasarnya, pada dasarnya kami mendefinisikan ulang blok itu.
‫Setiap file hanya dapat memperpanjang satu file lainnya.
‫Jadi kami hanya dapat memperluas
‫basis di sini, tetapi kami dapat memiliki blok yang berbeda di setiap file.
‫Jadi kita bisa memiliki blok untuk kepala di sini juga.
‫Dan kemudian kami dapat memperluasnya
‫juga di template ikhtisar.
‫Dan, sebenarnya, kita akan melakukannya nanti.
‫Tapi untuk saat ini, tentu saja, mari kita tetap sederhana.
‫Oke, apakah ini masuk akal?
‫Sekarang mari kita lanjutkan dan benar-benar melakukan hal yang sama di sini.
‫Jadi ini memperluas tata letak dasar.
‫Dan apa sebenarnya yang diperpanjang?
‫Nah, itu akan memperpanjang blok konten.
‫Jadi yang ini akan
‫kita pasang di h1, Ini adalah halaman detail tur.
‫Jadi, sebelum menguji ini, mari kita cepat rekap apa yang
‫baru saja kita lakukan.
‫Jadi, kami ingin menggunakan template dasar ini
‫sebagai titik awal kami.
‫Jadi, sebagai kerangka yang memiliki semua hal
‫HTML, seperti
‫kepala ini, dan juga header dan footer, tetapi
‫bukan konten khusus untuk setiap halaman.
‫Kemudian, di setiap halaman ini
‫di sini, kami hanya memiliki konten untuk halaman itu sendiri.
‫Dan kita dapat melakukannya
‫karena pada dasarnya kita dapat menyuntikkan
‫konten ini ke dalam template dasar induk dengan menggunakan ekstensi.
‫Jadi pada dasarnya, anggap ini sebagai kebalikan dari memasukkan.
‫Di sini, templat ini menyertakan dua templat induk.
‫Template ini di sini termasuk dua template
‫anak, header dan footer.
‫Jadi, sekali lagi, basisnya
‫adalah induknya, dan header dan footernya adalah anaknya.
‫Jadi di sini, orang tua termasuk anak-anak.
‫Tetapi dengan ekstensi, itu sebaliknya, di mana
‫anak-anak, seperti yang dapat kita katakan, sehingga
‫kita dapat mengatakan
‫bahwa gambarannya adalah anak juga dari
‫basis, tetapi di sini adalah anak yang termasuk basis.
‫Jadi, pada dasarnya, semua yang ada di sekitar konten blok ini.
‫Anda dapat membayangkan bahwa semua kode
‫ini di sini, semua ini yang bukan
‫konten blok kemudian disalin langsung ke file ini.
‫Itu cara yang bagus untuk membayangkan bagaimana ini bekerja.
‫Itu memungkinkan kami untuk kemudian menggunakan di sini
‫di rute kami ikhtisar dan templat tur alih-alih menggunakan basis.
‫Tapi tetap saja, tentu saja, menggunakan semua HTML yang
‫kami miliki di sini.
‫Oke, jadi saya harap itu masuk akal sekarang.
‫Mari kita benar-benar pergi ke depan dan mencoba ini.
‫Aku hanya akan menyalin URL.
‫Jadi sekarang mari kita menulis ikhtisar.
‫Jadi, memang, kami mendapatkan h1 yang mengatakan
‫Ini adalah ikhtisar tur.
‫Dan sebenarnya mari kita juga menggunakan variabel judul yang kita
‫berikan ke dalam template ini.
‫Ingat bahwa di sini kami memiliki
‫judul Semua Tur di ikhtisar, dan kemudian di tur,
‫kami memiliki The Forest Hiker.
‫Jadi mari kita benar-benar menempatkan bahwa pada judul.
‫Sebenarnya, kita sebenarnya bisa melakukannya di
‫sini di template dasar.
‫Jadi ketika di
‫sini dalam ikhtisar kami memperluas templat
‫dasar, templat dasar masih memiliki akses ke lokal, jadi,
‫ke variabel, yang kami berikan ke templat.
‫Di sini, kita bisa melakukan apa yang kita
‫lakukan sebelumnya, jadi interpolasi dengan variabel, jadi dengan lokal.
‫Jadi, yang perlu kita lakukan adalah meletakkan judul di sini, seperti ini.
‫Dan jika sekarang kami memuat ulang,
‫maka Anda melihat Semua Tur di sini di atas.
‫Sekarang mari kita coba tur.
‫Jadi ini adalah halaman detail tur, dan di atas
‫sini Anda melihat The Forest Hiker Tour.
‫Sekarang jika kita memuat yang ini
‫maka kita harus mendapatkan placeholder yang
‫kita taruh di blok.
‫Ingat itu?
‫Dan, memang, Ini adalah judul placeholder.
‫Besar.
‫Ini adalah mekanisme yang kuat dan sangat penting
‫untuk kita pahami dan gunakan untuk semua
‫template yang akan kita buat
‫di bagian selanjutnya.
‫Di video berikutnya, kita akhirnya akan
‫membersihkan sedikit kekacauan yang kita miliki di sini, dan memfaktorkan
‫ulang semua kode ini
‫di sini menjadi beberapa file berbeda.