Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

Pug – Layout ve Block Yapısı

Yazar: Gençay · 27 Temmuz 2018

Merhaba,

Bu içeriğimizde Pug paketinde Layout yapısının Block kullanılarak nasıl inşa edildiğini ele alacağız.

İlk olarak ana dizinimizde bulunan “views” klasörüne “layout.pug” adında bir dosya ekleyelim. Layout’ta sitemizin genel tasarımını tutacağız lakin düzeni oluştururken micro yönetimi sağlayabilmek için site tasarımını mümkün mertebe küçük parçalara bölmemiz gerekecektir. Bu işlemide “block” yapısını kullanarak icra edeceğiz.

//- layout.pug
html
    head
        block header
    body
        block content
        block footer

Yukarıdaki “layout.pug” dosyasına göz atarsanız eğer sitenin ana tasarım şablonu oluşturulmuş ama opsiyonel kısımları “block” keywordü ile bu layout’tan türeyecek sınıflara bırakılmıştır.

Layout’tan türeyen sayfalarda ise aşağıda olduğu gibi ilgili layout sayfası “extends” edilmelidir. Ardından block kısımları yine “block” keywordü ile çağrılıp istenildiği şekilde doldurulmaktadır.

//-home.pug
extends layout
block header
    title Home Sayfası
block content
    div
        strong Merhaba
        p Burası Home sayfasıdır.
block footer
    span
        |Alt Bölüm | Home

//-about.pug
extends layout
block header
    title About Sayfası
block content
    div
        strong Merhaba
        p Burası About sayfasıdır.
block footer
    span
        |Alt Bölüm | Footer

//-contact.pug
extends layout
block header
    title Contact Sayfası
block content
    div
        strong Merhaba
        p Burası Contact sayfasıdır
block footer
    span
        |Alt Bölüm | Contact

Bu dosyalar hazırlandıktan sonra script üzerinden her pug dosyasına özel route tanımlanıp ilişkili dosyalar render edilmelidir.

const express = require("express");
const app = express();
app.set("view engine", "pug");
app.get("/", (request, response) => {
    response.render("home");
});
app.get("/home", (request, response) => {
    response.render("home");
});
app.get("/about", (request, response) => {
    response.render("about");
});
app.get("/contact", (request, response) => {
    response.render("contact");
})
app.listen(5000, () => {
    console.log("Yayın başladı...");
});

Oluşturduğumuz sunucuda dinlediğimiz 5000 portunu tetiklersek eğer aşağıdaki gibi sonuçlar alınacaktır.

home.pug için;
<html><head><title>Home Sayfası</title></head><body><div><strong>Merhaba</strong><p>Burası Home sayfasıdır.</p></div><span>Alt Bölüm | Home</span></body></html>
about.pug için;
<html><head><title>About Sayfası</title></head><body><div><strong>Merhaba</strong><p>Burası About sayfasıdır.</p></div><span>Alt Bölüm | Footer</span></body></html>
contact.pug için;
<html><head><title>Contact Sayfası</title></head><body><div><strong>Merhaba</strong><p>Burası Contact sayfasıdır</p></div><span>Alt Bölüm | Contact</span></body></html>

Şuana kadar yapmış olduğumuz çalışmada block keywordleri layout’ta ki şablonu ezerek barındırdıkları içeriği ilgili alana eklemektedirler.

Sözgelimi;

html
    head
        block header
            meta(description = `${title} Sayfası`)
    body
        block content
        block footer

Yukarıdaki layout’ta gördüğünüz header bloğunda varsayılan olarak bir meta etiketi tanımlanmıştır. Eğer ki bu layout şuana kadar bildiğimiz şekilde kullanılırsa;

//-home.pug
extends layout

block header
    title Home Sayfası
block content
    div
        strong Merhaba
        p Burası Home sayfasıdır.
block footer
    span
        |Alt Bölüm | Home

header bloğu komple ezilmekte ve yerine pug sayfamızda belirtilen ilgili bloğa ait veri basılmaktadır. Dolayısıyla render sonucu elde edilen sonuç aşağıdaki gibi olacaktır;
<html><head><title>Home Sayfası</title></head><body><div><strong>Merhaba</strong><p>Burası Home sayfasıdır.</p></div><span>Alt Bölüm | Home</span></body></html>
İşte böyle durumlarda, layout’ta ki varsayılan şablonların yanına pug dosyasından gelen yapıları eklemek istiyorsanız “append” keywordünü aşağıdaki gibi kullanmanız yeterlidir.

extends layout

block append header
    title Home Sayfası
block content
    div
        strong Merhaba
        p Burası Home sayfasıdır.
block footer
    span
        |Alt Bölüm | Home

Bu durumda elde edilen çıktı;
<html><head><meta description="Home Sayfası"/><title>Home Sayfası</title></head><body><div><strong>Merhaba</strong><p>Burası Home sayfasıdır.</p></div><span>Alt Bölüm | Home</span></body></html>
şeklinde olacaktır.

Tabi yukarıdaki son örnekte script dosyasından “title” parametresini göndermeyi unutmuyoruz 😉

const express = require("express");
const app = express();
app.set("view engine", "pug");
app.get("/", (request, response) => {
    response.render("home", { title: "Home" });
});
app.get("/home", (request, response) => {
    response.render("home", { title: "Home" });
});
app.get("/about", (request, response) => {
    response.render("about", { title: "About" });
});
app.get("/contact", (request, response) => {
    response.render("contact", { title: "Contact" });
})
app.listen(5000, () => {
    console.log("Yayın başladı...");
});

Velhasıl, Pug paketinde block keywordü ile layout yapısının nasıl kullanıldığını incelemiş olduk. Faydalanmanız dileğiyle…

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…