fedeveloper.com HTML CSS Javascript
Nevcan Uludaş 13.02.2019
Haml Logo

Haml

(HTML Abstraction Markup Language)

Tasarlayan Hampton Catlin

Paradigma Template Engine for HTML

Uygulama Dili Ruby

OS Cross-Platform

Lisans Github License

Dosya Adı Uzantısı .haml

Son sürüm gem version

Website haml.info


Tecrübe Seviyesi

Başlangıç

Bu makale en son 13.02.2019 tarihinde güncellenmiştir.


Haml Template Engine Nedir?

Dünyanın en kısa şiir türü sayılan Haiku, Japon edebiyatı kökenli bir şiir türüdür ve 16. yüzyıldan beri bir çok farklı kültürden şairi etkileyerek, dünya şiiri biçimini almıştır. "Templating Haiku" sloganı ile karşımıza çıkan Haml; dünya çapında kullanılan, kısa ve şairane syntax'ını bu slogan ile çok güzel ifade etmiş.

Nasıl yaptığını değilde, ne yaptığı açıklamak gerekirse; aslında Haml bir web uygulaması geliştirirken satır içi kod yazmaktan kaçınmak ve HTML'i daha temiz hale getirmek için tasarlanmış, Ruby on Rails (web-framework) dünyasında baskın alternatif şablon dili eklentisidir. Özelliklerini hızlıca listelemek gerekirse:

  • Okunması kolaydır ve aynı zamanda görsel olarak (indent kullanımı ile) DOM hiyerarşinizi ifade eder,
  • Öğrenmesi kolaydır,
  • DRY (Don't Repeat Yourself) felsefesi ile gereksiz tekrarlardan kaçınmanızı ve temiz koda odaklanmanızı hedefler.
  • PHP, ASP, JSP gibi diğer web dillerine ve eRuby gibi şablon sistemlerine benzerlik gösterir,
  • CSS syntax'ına benzediği için UI geliştiricileri arasında popülerdir,
  • HTML’de dinamik içeriğe sahip olma esnekliği sağlar,
  • Sürekli bakımı yapılan bir teknolojidir ve çok büyük bir topluluğa sahiptir,
  • Neredeyse sade ERB kadar hızlı çalışır,
  • Command Line aracı ile komut satırından kullanılabilir.

Haml kodunu çalıştırmak için, dosyaların .haml uzantılarına sahip olmaları gerekir. Bu dosyalar, bir web uygulaması geliştirirken Ruby kodunu gömmek için yardımcı olan .erb veya eRuby dosyalarına benzer.

Haml'in resmi uygulaması Ruby on Rails ve Merb için eklentileri bulunan Ruby için yapılmıştır, ancak Ruby uygulaması da bağımsız olarak çalışmaktadır. Haml diğer dillerle birlikte kolayca kullanılabilir. Haml'ın uyguladığı dillerin bir listesini aşağıda paylaşıyorum:


Haml Öğrenmeli miyim?

  • Haml'ı öğrenmek oldukça kolaydır, ancak kullanmaya başladığınızda bazı şeylerin nasıl yazılacağına dair doğru syntax için arama yapmanız gerekebiliyor.
  • Mecbur kalmadıkça tam olarak öğrenmeye değmez.

Hızlı Başlangıç

Kurulum

Öncelikle Haml'ı alın ve gem'i kurun (bu eğitimde Rails kullandığınızı varsayar - diğer çerçeveler için de geçerlidir ve yine de bağımsız Haml için geçerli olmalıdır). Haml, ERB şirketinin bir drop yerine geçer. Bu, "app/view" klasörünüzdeki herhangi bir dosyanın, dosyanın uzantısını değiştirerek Haml'e devredileceği anlamına gelir.

app/views/account/login.html.erb → app/views/account/login.html.haml

Şimdi, bu sayfayı görüntülediğinizde, ERB şablonun üzerine gelmek yerine, yerine Haml tarafından kullanılıyor. Siteniz boyunca ERB ve Haml ile anında harekete geçebilirsiniz.


Indenting (Hizalama)

Indent'lerin kodunuzun nasıl işlendiğine ilişkin önemi nedeniyle, indent'ler baştan sona tutarlı olmalıdır. Indent'lerdeki farklılıklar (fazla ya da eksik girilmesi) hataya neden olacaktır. İki boşluk yaygın kullanılan bir uygulamadır, ancak sayısı sabit olduğu sürece gerçekten size bağlıdır.


Yorumlar

/ Bu Haml'da bir yorum satırı.
/
  Çok satırlı bir yorum yazmak için yorumlanacak kodunuzu 
  eğik çizginin bir indent içerisinde kalacak şekilde yazın.
-# Bu sessiz bir yorumdur, yani dokümanda hiç gösterilmeyeceği anlamına gelir.

HTML Elemanları

Tag'leri yazmak için, tag adından önce yüzde işaretini (%) kullanın.

%body
  %header
    %nav

Kapatma tag'lerinin bulunmadığına dikkat edin. Yukarıdaki kod aşağıdaki çıktıyı verecek;

<body>
  <header>
    <nav></nav>
  </header>
</body>

"DIV" tag'i varsayılan elemandır, bu nedenle ihmal edilebilir. Sadece "." kullanarak class'ı, "#" kullanarak id'yi tanımlayabilirsiniz.

Örneğin:

%div.my_class
  %div#my_id

Kısaca aşağıdaki gibi de yazılabilir;

.my_class
  #my_id

Bir tag içerisine içerik eklemek için, içeriği tag'den hemen sonra yazabilirsiniz.

%h1 Sayfa Başlığı

Çok satırlı içerik yazmak için indent yapısını kullanıyoruz;

%p
  Bu, muhtemelen iki ayrı satıra bölmemiz gereken 
  çok fazla içerik.

"Ve" ve "Eşittir" işaretini (&=) kullanarak html'den çıkabilirsiniz. Bu, html'ye duyarlı karakterleri (&, /, :) html kodlanmış eşdeğerlerine dönüştürür.

Örneğin:

%p
  &= "Evet & evet"

Çıktısı 'Evet & evet' olacaktır.

"Ünlem" ve "Eşittir" işaretini ( != ) kullanarak html'e dönüş yapabilirsiniz.

See the Pen HTML Escape and Unescape in Haml by Nevcan Uludaş (@nevcanuludas) on CodePen.


Birden fazla CSS class'ı eklemek için class adlarını peş peşe yazabilirsiniz.

%div.foo.bar

veya bir Ruby hash'inin parçası olarak;

%div{:class => 'foo bar'}

Herhangi bir etiket için öznitelikler (attr) hash içine eklenebilir.

%a{:href => '#', :class => 'bar', :title => 'Bar'}

Boolean nitelikleri için 'true' değerinin atanması;

%input{:selected => true}

Data-attributes yazmak için :data anahtarı değerini başka bir hash olarak kullanın;

%div{:data => {:attribute => 'foo'}}

Ruby'nin 1.9 veya daha yeni sürümleri için Ruby'nin yeni hash syntax'ını kullanabilirsiniz;

%div{ data: { attribute: 'foo' } }

Ayrıca HTML tarzı öznitelik (attr) syntax'ını da kullanabilirsiniz;

%a(href='#' title='bar')

Ve her iki syntax'ın birlikte kullanımı;

%a(href='#'){ title: @my_class.title }

Ruby Ekleme

Bir tag'in içeriği olarak bir Ruby değeri çıkarmak için, Ruby kodunun takip ettiği eşittir işaretini kullanın.

%h1= book.name

%p
  = book.author
  = book.publisher

Ruby kodunu html'e göstermeden çalıştırmak için, bunun yerine kısa çizgi kullanın.

- books = ['book 1', 'book 2', 'book 3']

Ruby blokları gibi her çeşit harika şeyi yapmanıza izin verir.

- books.shuffle.each_with_index do |book, index|
  %h1= book

  - if book do
    %p This is a book

Sıralı / sırasız liste ekleme

%ul
  %li
    =item1
    =item2

Tekrar hatırlatıyorum, Ruby için bile kapanış tag'lerini bloğa eklemenize gerek yok. Indent yapısı bunu sizin için halleder.


Bootstrap class'ları ile "Table" ekleme

See the Pen Hello Haml by Nevcan Uludaş (@nevcanuludas)on CodePen.


Satır içi Ruby / Ruby enterpolasyonu

#{} Kullanarak düz bir metin satırına bir Ruby değişkeninin eklenmesi

%p En yüksek puan alan oyun #{best_game}

Filtreler

Filtreler bloğu başka bir filtreleme programına geçirir ve sonucu Haml'ye döndürür. Bir filtre kullanmak için bir sütun yazın ve filtre adını yazın.

Markdown filter

:markdown
  # Header
  Text **inside** the *block*

Yukarıdaki kod derlendikten sonra aşağıdaki gibi olacaktır:

<h1>Header</h1>
<p>Text <strong>inside</strong> the <em>block</em></p>

Javascript filter

:javascript
  console.log('This is inline <script>');

Yukarıdaki kod derlendikten sonra aşağıdaki gibi olacaktır:

<script>
  console.log('This is inline <script>');
</script>

Birçok filtre tipi vardır (:markdown, :javascript, :coffee, :css, :ruby ve benzeri). Ayrıca Haml::Filters kullanarak kendi filtrelerinizi tanımlayabilirsiniz.


Demo

See the Pen Hello Haml by Nevcan Uludaş (@nevcanuludas)on CodePen.


Popüler Haml Eklentileri


Haml'a Alternatif Şablon Dilleri

  • Erubis (Ruby)
  • eRuby (C)
  • ERB (Ruby)
  • Pug (önceden ismi JADE'di)
  • Slim (PHP micro framework)
  • Handlebars.js
  • Liquid