‫Instruktur: Dalam kuliah ini, saya ingin menunjukkan
‫kepada Anda fitur yang sebenarnya kita miliki
‫di semua bahasa pemrograman.
‫Kami hanya memasukkan satu file dan dalam hal
‫ini, satu template ke template lain.
‫Jadi katakanlah kami ingin menjaga tata letak
‫dasar kami di sini benar-benar bersih tanpa
‫konten apa pun di dalamnya.
‫Jadi yang akan kita lakukan adalah memasukkan semua kode
‫untuk header ke dalam satu file header.
‫Dan kemudian sertakan file itu di sini.
‫Dan hal yang sama juga untuk footer.
‫Jadi, konten kita diblokir, jadi pada
‫dasarnya tubuh kita di
‫sini menjadi elemen yang sangat bersih ini hanya dengan menyertakan ini
‫dan kemudian konten ini di sini untuk saat ini.
‫Oke.
‫Jadi sekali lagi, mari buat file baru di sini untuk header.
‫dot pug
‫Dan sebenarnya saya suka mengawali file-file ini yang hanya
‫berfungsi untuk disertakan dengan garis bawah.
‫Dan jika Anda familiar dengan sesuatu seperti
‫Sass, maka itu juga akan familiar bagi Anda.
‫Oke, jadi sekarang mari kita tambahkan dan tempel ini di
‫sini, dan bukan kode
‫ini, jadi saya kira saya lupa menyalinnya atau memotongnya.
‫Dan kemudian tempel di sini.
‫Dan sekarang lekukan ini semuanya salah di
‫sini, karena sekarang kita memiliki tiga tingkat, seperti
‫yang Anda lihat, jadi, satu, dua,
‫tiga tingkat di mana kode ini seharusnya ada di sini.
‫Oke, jadi sekarang kita perlu menambahkan dan memperbaikinya, tetapi apa yang
‫sebenarnya dapat kita lakukan daripada melakukannya secara manual adalah dengan
‫menggunakan ekstensi yang bagus yang berfungsi untuk kita.
‫Jadi di sini, di tab ekstensi
‫saya, izinkan saya menunjukkan kepada Anda ekstensi yang saya maksud.
‫Dan itu disebut Pug mempercantik.
‫Oke, jadi lanjutkan dan instal paket ini, oke.
‫Dan setelah Anda
‫selesai melakukannya, Anda cukup memilih
‫semua kode di sini dengan menekan command-A dan kemudian
‫membuat perintah VS Code dengan mengatakan command-shift-P.
‫Dan kemudian di sini, Anda menulis pug.
‫Dan jadi ini kemudian akan mempercantik pesek.
‫Dan Anda melihat bahwa Anda juga memiliki
‫pintasan di sini dan saya tidak yakin apakah ini
‫default, tetapi setidaknya dalam kasus saya, saya juga dapat menggunakan
‫pintasan untuk mempercantik kode ini.
‫Tapi bagaimanapun, dengan menulis pug,
‫Anda harus mendapatkan pilihan ini di sini sekarang.
‫Dan jika Anda kemudian menekan enter, itu akan,
‫seperti yang Anda lihat, memperbaiki lekukan yang salah dalam file ini.
‫Baiklah?
‫Jadi simpan saja, tutup dan mari kita
‫kembali ke sini sebenarnya.
‫Dan sekarang yang perlu kita lakukan hanyalah mengatakan include _header.
‫Dan hal yang sama untuk footer,
‫jadi mari kita potong di sini, buat template baru...
‫_footer
‫paste pilih
‫itu, command-shift-P atau mungkin di Windows
‫itu control-shift-P dan kemudian sebenarnya
‫yang terakhir digunakan akan muncul
‫di sini di seleksi.
‫Jadi, tekan kembali dan begitulah.
‫Itu sudah diperbaiki sekarang juga.
‫Termasuk...
‫catatan kaki.
‫Dan perhatikan bagaimana kita bahkan tidak perlu menentukan
‫ekstensi dot pug lagi.
‫Jadi, simpan dan ketika kita memuat
‫ulang ini, itu akan terlihat sama persis.
‫Yah, tidak juga, karena tombol-tombol ini di sini,
‫agak bergeser ke bawah,
‫jadi mereka meninggalkan bilah navigasi ini.
‫Atau sebenarnya, header ini, jadi itu tidak benar,
‫mungkin itu adalah
‫beberapa masalah dengan indentasi otomatis ini di header.
‫Dan ya, sebenarnya itu tidak benar
‫karena semua ini seharusnya ada di dalam header.
‫Jadi nav ini, div ini dan nav ini mereka semua
‫harus berada pada level yang sama.
‫Dan sekarang itu benar.
‫Untuk memastikannya, mari kita periksa juga footernya.
‫Tapi di sini, itu benar,
‫jadi saya tidak yakin apa yang salah dalam situasi ini.
‫Tapi bagaimanapun, mari kita coba lagi sekarang.
‫Dan jadi di sini kita pergi.
‫Pokoknya itu hanya memasukkan beberapa file, satu ke
‫yang lain.
‫Di video berikutnya, kita akan melakukan
‫sesuatu yang sedikit mirip, tetapi pada saat yang sama jauh lebih kompleks dan juga lebih bermanfaat.
‫Jadi jika Anda penasaran dengan apa itu, maka
‫bergabunglah dengan saya di yang berikutnya.