template engine etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
template engine etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

19 Temmuz 2013 Cuma

Jade ile Master Page ve Tekrar Kullanılabilir Yapılar.

Hiç yorum yok: Gönderen no at Cuma, Temmuz 19, 2013 Etiketler , , ,


Jade ile şablon yapısı yapmak, master page'ler oluşturmak sayfaları birbiri içinde tekrar kullanılabilir hale getirmek çok kolay.

Block layout yapısı ile master page tanımlaması yapmak şablonlar ve tekrar kullanılabilir sayfalar oluşturmak oldukça pratik.
Örnek olarak bir master page ve bu template'i kullanan bir sayfa düzenlemesi yapalım.
Yükleniyor...

Yukarıda tanımladığımız template dosyasında head ve content olarak iki adet block belirleyerek genel layout'u oluşturduk. Belirlediğimiz bu blockların içeriği my-layout templatini kullanan sayfalarda değiştirlebilecektir.Bunun dışında kalan özelliklerin hepsi template dosyasından gelecektir.

Şimdi bu template'i kullanan bir sayfa yazalım

Yükleniyor...

Yukarıdaki template dosyası ise daha önce oluşturduğumuz "my-layout" templatini extend edip içerisinde tanımlanan head ve content blocklarının içeriğini tekrar yazmaktadır.

Peki tüm içeriği yeniden yazmak yerine ekleme yapmak istiyorsak ne yapmalıyız. Örneğin template sayfasında yer alan css linklerine veya scriptlere sadece görüntülenen sayfada ekleme yapalım.
Yükleniyor...

 Yukarıdaki append komutu template içerisinde yer alan kodlarımızı alıp yeni kodlarımızıda ekleyerek sayfa görüntülemesini gerçekleştirilmesini sağlar. "prepend" komutu ise aynı mantıkla çalışan "append" komutunun aksine yeni tanımlanan kod blogunu template'ten gelen kod blogunun başına ekler.
include komutu ise jade içerisinde tekrar kullanılabilir yapılara imkan sağlamaktadır. Örneğin listeleme yapısını ele alalım. Bir web uygulaması içerisinde listeleme yapısı sık kullanılan farklı sayfalarda görüntülenmesi gereken bir yapıdır. Arama sonuçlarının listelenmesi kullanıcıya ait verilerin listelenmesi vb.

Örnek olarak yapacağımız yapıda sitemizde yer alan makalelerin listelenmesi, arama sonucunda makalelerin listelenmesini, kullanıcıya ait makalelerin listelenmesini tek bir listeleme sayfası ile gerçekleştirelim.

Yapmamız gereken listeleme sayfasını oluşturmak ve bu yapıyı çağıracak olan farklı sayfalarda "include" komutu ile aynı yapıyı tekrar kullanılabilir hale getirmek.

makaleListesi.jade isimli bir dosya oluşturalım
Yükleniyor...

 Daha sonra bu oluşturduğumuz yapıyı search.jade, profile.jade ve index.jade sayfalarında include komutuyla kullanalım.
Yükleniyor...

Örnek Kodlar:https://github.com/nodejstr/Jade-Examples

8 Temmuz 2013 Pazartesi

Jade Nedir?

Hiç yorum yok: 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.

Kaydol: Kayıtlar (Atom)