8 Temmuz 2013 Pazartesi

Jade Nedir?

Gönderen no at Pazartesi, Temmuz 08, 2013 Etiketler , , , ,

Jade NodeJs tarafında sıkça kullanılan, performansıyla öne çıkan bir template engine. Jade'i diğer template enginelerden ayıran en büyük özelliği performansı. Bunun yanında farklı, alışması zor ama kullanması çok pratik syntax'ı ile de dikkat çekiyor.

Kuruluım

npm install jade
komutuyla ilgili kütüphanenin kurulumu sağlanmaktadır.

Express ile birlikte kullanırken
app.set('view engine', 'jade')
yapılması jade dosyalarının işlenmesi için yeterlidir.

Jade bilenen tag açıp kapatma yapısını ortadan kaldırarak boşluk ve girintilerle okunması kolay bir şekilde yazım olanağı sağlıyor. Aşağıda jade-lang.com 'in ana sayfasında da yer alan kullanım örneğini görüyoruz.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) {
        bar()
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Jade is a terse and simple
         templating language with a
         strong focus on performance
         and powerful features.</p>
    </div>
  </body>
</html>
doctype 5
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript')
      if (foo) {
         bar()
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.



Yukarıda standart html ve jade ile yazılan aynı kod blogunu görülmektedir.
Jade ile tag açıp kapatma derdinden kurtuluyoruz. Bu sayede açık kalan taglarden kaynaklı sorunlardan da kurtulmuş oluyoruz. Indentation(girinti) ile hangi elemanın hangi eleman altında yer alacağını belirliyoruz.

Bunun yanı sıra if else yapısı gibi conditional operasyonlar ve loopları jade ile çalıştırabilirsiniz.
"#" ilgili elemana id vermek için kullanılırken "." ile ilgili html elamanına eklenecek css classlarını arka arkaya ekleyebiliyoruz. Atamasını yapmamız gereken diğer attributeler içinse yukarıdaki örnekte görüldüğü gibi 
(attrName="value",attrName2="value2")
şeklinde ilgili değerlerin atamasını yapabiliyoruz.

Express ile kullanımına bakacak olursak

exports.new = function(req, res){
  res.render('posts/yeni', {
    baslik: 'Yeni Makale',
    makale: new Makale({})
  })
}

Yukarıda yer alan kod parçacığı posts klasörü altında yer alan 'yeni.jade' dosyasını gönderdiğimiz baslik ve makale parametreleriyle işleyerek oluşturduğu html'i render edilmek üzere göndermektedir.

Id Kullanımı

div#container

<div id="container"></div> olarak görüntülenecektir.

Css Class Kullanımı

div#foo.bar.baz
<div id="foo" class="bar baz"></div> olarak görüntülenecektir.

#foo
.bar

<div id="foo"></div><div class="bar"></div>

İçerik Görüntüleme
  
p merhaba!

<p>merhaba!</p>.

Parametre Kullanımı 
Jade' parametre olarak gönderdiğimiz değerleri template içerisinde #{} yapısıyla kullanıyoruz.

Örneğin gönderdiğimiz parametreler :{baslik:'Ana Sayfa',girisMesaji:'Hoşgeldiniz'} olsun.
#{baslik} #{girisMesaji} olarak jade şablonları içerisinde kullanabiliriz.Peki #{} yapısnı text olarak kullanmamız gerekiyorsa yani yazı içerisinde "#{format}" bu şekilde görüntülemek istiyorsak ne yapmalıyız. Escape mekanizması burada yardımımıza yetişiyor.

p \#{format}
<p>#{format}</p>

Bir sonraki yazıda Jade'in daha detaylı kullanım örneklerini, jade ile yapılabilecek tekrar kullanılabilir bileşenleri inceleyeceğiz.

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)