Node.js (Express) – Pug Nedir? Genel Bakış

Merhaba,

Dünya değişiyor, iyi kötü bir hale bürünüyor. Her geçen gün bir öncekinden ya nesnel değişiklikle farkını ortaya koyuyor ya da bambaşka bir renk ile yeni hayata kaldığı noktadan devam ediyor. Tabiatın fıtratında bir matematik varken insanı hesaba katınca kompleks ve öngörülemez bir vaziyet ortaya çıkıyor. İnsan hayatı “bugün < yarın” bağıntısıyla yorumlamakta ve dünlere, yarınlara nazaran beyhude bir anlam katıyor. Dünyanın girmiş olduğu bu anlamsız maratondan mesleklerde nasibini alıyor. Hangisi olursa olsun icrasında dünde kalan sanatçı çok geçmeden bu günden antika muamelesi görüyor.

Velhasıl, bizler kendi icra ettiğimiz yazılım sanatında dünü geçebilmek ve bu güne bir nebze eşlik edebilmek için bu çabayı göze almış ve mesleğimizin bir parçası olarak başından beri kabul etmiş bulunmaktayız. Şimdi bu içeriğimizde zamanla HTML yapısındaki devrimsel gelişimin neticesi olan Node.js’de ki Express.js modülünün Pug yapısı üzerine konuşuyor olacağız.

Pug Nedir?

HTML mimarisel olarak etiket aç/kapat mantığında çalışan bir yapısal özelliğe sahiptir.
Örneğin aşağıdaki kod bloğunu incelersek;

<html>
<head>
    <title>Örnek HTML</title>
</head>

<body>
    <p>Merhaba</p>
</body>
</html>

şeklinde oluşturulan html yapısı biz yazılımcılar için aç/kapat işleminde zaman maliyetini getirmektedir.

Pug ise bu maliyeti oldukça düşürmekte ve html’e nazaran daha kolay bir yaklaşım sergilememizi sağlamaktadır.
Yukarıdaki örneği Pug ile gerçekleştirirsek eğer;

html
    head
        title Örnek HTML
    body
        p Merhaba

şeklinde çalışmamız yeterlidir. Bu görmüş olduğunuz yapı aslında yukarıdaki ile birebir aynı özelliği sergilemektedir.

Tabi ki de Pug yapısının, yapısal ve işlevsel kritik noktalarını makalemizin devamında gerektiği noktada konuşacağız lakin şimdilik Pug’ı tanımlamaya devam edelim.

Pug’ın genel özellikleri;

  • Eski adı Jade’dir.
  • Dosyaları birbirlerine nodule etmemize yarar.
  • Layout’u extend ederek yani paylaşmamızı sağlayarak farklı dosyalarda kullanabilmemizi sağlar.
  • Klasik html’de olmayan programatik yapıları kullanmamıza imkan sağlar;
    • Değişkenler
    • Döngüler
    • Kontrol Mekanizmaları
    • Diziler vs…

Pug Entegrasyonu

Pug’ı kullanabilmek için projenize aşağıdaki kodlarla entegrasyonu sağlayabilirsiniz.

npm install pug --save

Pug Yapısal Kriterleri ve Özellikleri

Pug yapısını oluştururken dikkat edilmesi gereken özelliklere ve kurallara göz atarsak eğer;

  • Kural 1
    Pug ile oluşturulacak html yapısında bir nesne bir üstteki nesnenin dahili veya harici olup olmayacağını kullanılan “tab” yahut “space” değeri ile belirlemektedir.

    div
    p
    

    Yukarıdaki şekilde tanımlanan bir pug yapısı aşağıdaki gibi çıktı verecektir.
    <div></div><p></p>
    Eğer ki “p” etiketini “div” içerisine almak istiyorsak;

    //--space
    div
     p
    

    gibi ya da

    //--tab
    div
        p
    

    şeklinde çalışmamız gerekecektir.
    <div><p></p></div>

    Örnek;

    div
        p
        p
    strong
    p
        div
            br
            hr
    div
    

    Çıktı;
    <div><p></p><p></p></div><strong></strong><p><div><br/><hr/></div></p><div></div>
    şeklinde olacaktır.

  • Kural 2
    Html nesnelerine bir yazı/değer/veri yazarken iki türlü yazım şekli mevcuttur.

    1. Direkt olarak nesnenin yanına tek satırlık değer yazılabilir.

      div
          p x
          p y
      div z
      

      Bu kullanımın çıktısı;
      <div><p>x</p><p>y</p></div><div>z</div>

    2. İlgili nesnenin bir satır altında “|” karakterinin eşliğinde değer yazılabilir.

      div
          |x
          p 
              |y
          p
              |z
          |w
      div p
      

      Çıktı;
      <div>x<p>y</p><p>z</p>w</div><div>p</div>

  • Kural 3
    Html etiketlerine attribute atarken aşağıdaki şekilde çalışılmaktadır.

    div(style="background-color:gray; width:350px; color:yellow;")
        |Merhaba
        p
            |Nasılsın?
        p(style="font-size:8px;") İyi diyelim, iyi olsun...
    

    Çıktı;
    <div style="background-color:gray; width:350px; font-color:yellow;">Merhaba<p>Nasılsın?</p><p style="font-size:8px;">İyi diyelim, iyi olsun...</p></div>

Pug Dosyasını Render Etmek

Bir önceki Node.js – Express Nedir? başlıklı makalemde Node.js’de Express.js’in ne olduğundan ve express.js ile sunucu oluşturmaktan bahsetmiştik. İşte bizler Pug dosyalarını ilgili makaledeki yapıyı kullanarak render edeceğiz.

Tabi öncelikle projemizin ana dizininde “views” adında bir klasör oluşturalım ve ardından içerisine herhangi bir isimde “.pug” uzantılı dosyamızı ekleyelim. Örneğin “pug2.pug”

html
    head
        title Örnek HTML
    body
        | Merhaba

Ardından “.js” uzantılı çalıştığımız dosyamızda aşağıdaki çalışmaları gerçekleştirelim;

const express = require("express");
const app = express();
//İlgili uygulamaya pug mtooru belirtilmektedir.
app.set("view engine", "pug");
app.get("/", (request, response) => {
    //pug dosyası response ile render edilmektedir.
    response.render("pug2");
});
app.listen(5000, () => {
    console.log("Yayın başladı...");
});

Gördüğünüz gibi “app.set” fonksiyonuyla ilgili route’a pug motoru tanımlanmakta ve “response.render” fonksiyonu ile “pug2” isimli pug dosyamız render edilmektedir. “Peki hoca sistem “pug2” dosyasının views klasörü altında olduğunu nereden biliyor?” diye sorma ihtimalinize nazaran pug’un varsayılan olarak view nesnelerini ana dizindeki “views” klasörü altında aramakta olduğunu söylemekte fayda var.

Bu işlem neticesinde ilgili pug dosyamız render edilmiş olacaktır ve belirtilen portta belirtilen route adresinde çalıştırılacaktır.
Node.js (Express) - Pug Nedir? Genel Bakış

Pug Programatik Özellikleri

Pug yapısında html’de olmayan programatik yapıları kullanabilmekteyiz. Şimdi sırasıyla bu yapıları inceleyelim;

  • Render Esnasında Parametre Olarak Değer Gönderme
    Pug dosyasını render ederken parametre olarak belirli değerleri gönderebiliriz.

    const express = require("express");
    const app = express();
    app.set("view engine", "pug");
    app.get("/", (request, response) => {
        response.render("pug2", { degisken1: "değişken 1", degisken2: "değişken 2", degisken3: { x: 3, y: true } });
    });
    app.listen(5000, () => {
        console.log("Yayın başladı...");
    });
    

    Gördüğünüz gibi “render” fonksiyonunda ikinci parametreye değerlerimizi belirtmiş olduk. Bu değerlere aşağıdaki gibi ulaşabilmekteyiz;

    html
        head
            title Örnek HTML
        body
            p=degisken1
            p=degisken2
            p=degisken3.x
    

    Şimdi bu değerlere karşılık gelen paremetre isimlerinin yani değişkenlerin nasıl kullanıldığını inceleyelim.

  • Değişken Tanımlama ve Değerini Çağırma
    Pug dosyalarında değişken tanımlamak için “-(tire)” karakterinin kullanılması gerekmektedir.

    html
        head
            title Örnek HTML
        body
            - let degisken1 = "değişken 1"
            - let degisken2 = "değişken 2"
            - let degisken3 = [3, 5, 7]
    

    Gördüğünüz gibi “degisken1”, “degisken2” ve “degisken3” olmak üzere değişkenlerimiz tanımlanmıştır. Bu tanımlamaların sonuna “;” karakterinin koyulmasına gerek yoktur.

    Tanımlanan değişkenleri kullanabilmek için iki farklı yol mevcuttur;

    1. Değişkenlerin değerini “=” operatörü ile direkt olarak getirebilmekteyiz.

      html
          head
              title Örnek HTML
          body
              - let degisken1 = "değişken 1"
              - let degisken2 = "değişken 2"
          div= degisken1
          div
              =degisken2
      
    2. Eğer ki değişken değeri metinsel ifadelerin arasına yazdırılacaksa “#{degiskenadi}” kalıbı kullanılmalıdır.

      html
          head
              title Örnek HTML
          body
              - let degisken1 = "değişken 1"
              - let degisken2 = "değişken 2"
              - let degisken3 = [3, 5, 7]
          div degisken1 değişkeninin değeri = #{degisken1}
          div
              |degisken2 değişkeninin değeri = #{degisken2}
      
  • Pug Dosyalarını Include Etmek
    Bir pug dosyasını bir başka pug dosyası içerisine aşağıdaki gibi include edebiliriz.

    //-head.pug
    head
        title Include
    
    //-body.pug
    body
        |Merhaba
    
    //-pug2.pug
    html
        include head
        include body
    
  • Kontrol Yapılarını Kullanma(If – Else If- Else)
    If – Else If – Else kalıbını aşağıdaki gibi kolayca kullanabilmekteyiz.

    body
        div
            - let sayi = 12
            if !sayi
                |Sayı değişkeni yok
            else if sayi < 10
                |Sayı değişkeninin değeri 10'den küçüktür. Sayı : #{sayi}
            else
                |Sayı değişkeninin değeri 10'a eşit ya da büyüktür. Sayı : #{sayi}
    

    Burada dikkat edilmesi gereken husus, ‘if – else if – else’ yapısının hangi html nesnesi içerisinde kullanıldığıdır. Ayriyetten her bir kontrol sonrası yapılan işlem bir “tab” ya da “space” içeride gerçekleştirilmelidir.

  • Döngü Kullanımı
    Pug dosyalarında genellikle “each” döngüsü işimizi görecektir.
    Örnek 1;

    body
        ul
            each val in [1, 3, 5, 7, 9]
                li= val
    

    Örnek 2;

    body
        ul
            -let array = [1, 3, 5, 7, 9]
            each val in array
                li= val
    

    Örnek 3;

    body
        ul
            -let array = "Merhaba Dünya"
            each val in array
                li= val
    

    Eğer ki “each” döngülerinde elemanların index numarasını kullanmak isterseniz aşağıdaki gibi çalışılması gerekmektedir;

    body
        ul
            -let array = [1, 3, 5, 7, 9]
            each val, index in array
                li= index + "- " + val
    

    Eğer ki ilgili dizide veri kontrolü yapmak istiyorsanız “each” döngüsüne özel “else” yapısını kullanabilirsiniz.

    body
        ul
            -let array = []
            each val in array
                li= val
            else
                li Veri Yok
    

    “each” döngüsüne nazaran “while” döngüsünüde kullanmak isterseniz aşağıdaki örneği inceleyiniz.

    body
        ul
            - let sayac = 0
            while sayac < 100
                li= sayac++
    

Evet, bu içeriğimiz ile Pug yapısı üzerine güzel bir giriş yaptığımızı ve olaya tam teferruatlı sağlam temeller attığımızı düşünüyorum. İçeriğimizde genel olarak bilinmesi gerekenleri sunduğumuzdan dolayı bundan sonraki Pug ile ilgili kalan diğer konuları kendilerine has içeriklerde ele almayı tercih ediyorum.

O halde sonraki yazılarımda görüşmek üzere diyelim…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.