Hamlیک تمپلیت انجین برای html است که معمولا در وب اپیکیشن هایی که با روبی و فریم ورکهایی مثل ریلز و سیناترا استفاده میشود.سینتکس ساده ی haml باعث استفاده ی وسیع آن بین برنامه نویسان و توسعه دهندگان روبی شده اما با این حال میتوان بدون هیچ زبان و فریمورک خاصی استفاده کرد.صرفا به عنوان تمپلیت انجینی برای کارهای

همل بر اساس یک قانون ساده ساخته شده : مارک‌آپ باید قابل خواندن باشد.

نصب

برای نصب haml باید روی سیستم خودتان روبی و جم  را نصب داشته باشید و با استفاده از روبی جم نصبش کنید.بصورت زیر :

gem install haml

خب نصب شد :)

توضیح کوتاه در مورد تمپلیت انجین های html اینکه برای ساده سازی و داینامیک کردن فرآیند ساخت فایلهای html ساخته شده اند.

تگ ها

تگ ها در همل با ٪ شروع میشوند.مثلا دو تگ در زیر تعریف کرده ایم :

%hello
%ok

که بعد از کامپایل به html بصورت زیر تبدیل میشود :

<hello></hello>
<ok></ok>

گرفتن خروجی

اما چطور کامپایل کردیم؟ خیلی ساده از خط فرمان  به دایرکتوری پروژه میرویم و دستور همل را بشکل زیر استفاده میکنیم :

haml file.haml file.html

که file.haml نام فایل همل شماست و file.html نام فایل خروجی گرفته شده.

افزودن محتوا

برای اضافه کردن محتوا به درون تگ ها عبارت مورد نظر  را با یک فاصله روبه روی تگ مینویسیم :

%hello Hello World
%ok Just a lazy text!

که خروجی html ان بصورت زیر میشود :

<hello>Hello World</hello>
<ok>Just a lazy text!</ok>

تگ های تودرتو

برای اضافه کردن تگ های تو در تو از فاصله ها استفاده میکنیم.haml به فاصله های قبل از شروع عبارت اهمیت میدهد و از آن ها برای تگ های تو در تو استفاده میکند.در ادیتور ها به سادگی با تب ها میتوانید تگ های تودرتو ایجاد کنید.مثلا عبارت زیر :

%html
	%head
		%title Hello
	%body
		%h1 Hello

که خروجی آن بصورت زیر است :

<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

اضافه کردن آی دی و کلاس

برای اضافه کردن آی دی  به یک تگ نام آی دی را بلافاصله بعدااز نام تگ و با یک هش مارک (#) مینویسیم.مثلا :

%h1#title

که خروجی آن بصورت زیر است :

<h1 class='class1 classs2 cls'></h1>

و دقت کنید که میتوان کلاس ها و آی دی ها را بصورت ترکیبی و در امتداد هم نوشت.

افزودن چندین صفت

روش ترکیب کلاس ها و آی دی ها ممکن است باعث پیچیدگی شود و همچنین برای صفت های دیگر مانند src برای تگ img روشی پیدا نکنیم.برای افزودن این ها از هش هایی با کلید سیمبل استفاده میکنیم.خب اگه روبی کار نکردید و متوجه نشدید چی گفتم نگران نباشید ساختار بصورت زیر است :

%h1{:id => "hello",:class => "cls1,cls2", :"ng=model" => "myModel"}

که خروجی آن بصورت زیر میشود :

<h1 class='cls1,cls2' id='hello' ng=model='myModel'></h1>

خب اینم ازین.

یک مثال

حالا یک صفحه ی پیچیده تر را ببینید :

%html
	%head
		%title Hello World
	%body
		%h1#siteID.boldtext.red	Hello, World
		%p.simple Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

		%h2{:id => "anotherID", :class => "blue"} Hello again!

		%form
			%input{:name => "myinput", :placeholder => "what's your name", :id => "myinput"}

که خروجی آن بصورت زیر میشود :

<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1 class='boldtext red' id='siteID'>Hello, World</h1>
    <p class='simple'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <h2 class='blue' id='anotherID'>Hello again!</h2>
    <form>
      <input id='myinput' name='myinput' placeholder="what's your name">
    </form>
  </body>
</html>

به همین سادگی :)

برای مطالعه ی بیشتر به مستندات haml سری بزنید.