Membagi-bagi Template

Jika kita lihat, kedua file index dan cards memiliki beberapa hal yang sama. Kita dapat memisahkannya menjadi template yang berbeda. Hal ini akan menguntungkan jika kita perlu mengubah bagian yang berulang tersebut hanya dengan mengubah satu template saja.

Untuk memulai, kita akan membuat file baru dengan bagian-bagian yang berulang, kita akan beri nama layout.pug

//layout.pug
doctype html
html(lang="en")
    head
        title Flash Cards
    body
        header
            h1 Flash Cards
        block content
        footer
            p Adalah aplikasi yang membantu kamu belajar


//index.pug
// hapus konten yang sudah kita pindahkan ke layout.pug
extends layout.pug

block content
    section#content
        h2 Halo, Makers!

Selanjutnya, semisal kita memiliki header atau footer yang relatif sama, kita bisa misahkannya menjadi file yang berbeda. Untuk sekarang memang nampak belum terlalu berpengaruh, tapi semakin banyak yang kita buat, hal ini akan menjadi bermanfaat.

Kita akan menggunakan include

//includes/header.pug
header
    h1 Flash Cards


//includes/footer
footer
    p Adalah aplikasi yang membantu kamu belajar


//layout.pug
doctype html
html(lang="en")
    head
        title Flash Cards
    body
        include includes/header.pug
        block content
        include includes/footer.pug