【轉】Haml 這貨是啥？附參考

時間 2019-12-18

標籤 haml 參考简体版

原文原文鏈接

Haml是一種用來描述任何XHTML web document的標記語言，它是乾淨，簡單的。並且也不用內嵌代碼。Haml的職能就是替代那些內嵌代碼的page page templating systems，好比PHP,ERB(Rails的模板系統)，ASP。不過， haml避免了直接coding XHTML到模板，由於它其實是一個xhtml的抽象描述，內部使用一些code來生成動態內容。javascript

原文：http://blog.163.com/evan__zhang@yeah/blog/static/121032757201032151245530/

它有什麼特色呢？

1. 空格標識層次嵌套關係

2. 良好的標籤格式

3. DRY（Don’t repeat yourself）

4. 遵循CSS標準

5. 集成了Ruby代碼

6. 用.haml擴展名代替了rails模板（.rhtml）

Haml的使用

Haml的使用有兩種方式：

做爲Ruby on Rails的插件來使用。

做爲一個獨立的Ruby module來使用。

Rails 插件方式：

這是使用Haml最經常使用的方式。固然，安裝Haml的方式，就是Rails裏經常使用的插件安裝方式了：

./script/plugin install [url]http://svn.hamptoncatlin.com/haml/tags/stable[/url]

一旦安裝好之後，你必須以.haml爲擴展名來使用。

你在ERB模板裏可使用的實例變量在Haml裏照樣可使用，Helper方法也不例外。好比：

# file: app/controllers/movies_controller.rb

class MoviesController < ApplicationController

def index

@title = "Teen Wolf"

end

# file: app/views/movies/index.haml

#content

.title

%h1= @title

= link_to 'Home', home_url

上面的haml代碼會被編譯爲：

</div>

Ruby Module方式：

Haml能夠徹底從rails和ActionView裏拿出來單獨使用。下下面這樣作：

gem install haml

而後用Haml::Engine：

engine = Haml::Engine.new("%p Haml code!")

engine.render #=> "<p>Haml code!</p>\n"

XTML Tags：

下面這些字符會渲染出相應的xhtml tag

百分號符號是一行的開始，緊接着一個元素的名字，而後後面跟一個可選的修飾語（見下例），好比一個空格，或一行文本等，就會被渲染到這個元素裏成爲其內容。它會建立一個這樣的形式：<element></element>.。舉個例子：

%one

%two

%three Hey there

會被編譯爲：

<one>

<two>

<three>Hey there</three>

</two>

</one>

對於任何一個有效的標準元素字符，Haml都會自動的爲其生成閉合標籤。

{}

括號內的Ruby hash是用來指名一個元素的屬性。它做爲一個ruby hash的字面量，局部變量也能夠在其中使用。Hash放在被定義好的標籤以後，基本上就和Ruby語法同樣，看例子：

%head{ :name => "doc_head" }

%script{ 'type' => "text/" + "javascript",

:src => "javascripts/script_#{2 + 7}" }

編譯後爲：

</script>

</head>

[]

方括號跟在一個標籤訂義以後，包含一個Ruby 對象，被用來爲這個標籤設置class和id屬性。這個class的值被設置爲這個對象的類名（兩個單詞用下劃線形式表示，而不是駝峯表示方法）而且id的值被設置爲對象的類名加上這個對象的id，也是下劃線鏈接。由於一個對象的id一般是朦朧的實現細節，這是表現model的實例最有用的元素了（這句是否是翻譯的太差？）。看例子：

# file: app/controllers/users_controller.rb

def show

@user = CrazyUser.find(15)

end

# file: app/views/users/show.haml

%div[@user]

%bar[290]/

Hello!

轉換爲：

Hello!

</div>

這是基於RailsConf Europe 2006 大會上DHH提出的SimpleHelpful語法

這個斜線字符，放在一個tag定義以後，可讓這個標籤自我關閉。例子：

%br/

%meta{'http-equiv' => 'Content-Type', :content => 'text/html'}/

轉換爲：

<br />

有一些標籤（meta, img, link, script, br, and hr tags等）當沒有內容的時候會自動關閉。看例子：

%br

%meta{'http-equiv' => 'Content-Type', :content => 'text/html'}

轉換爲：

<br />

. and #

這兩個符號是從CSS裏借鑑來的。他們被用來表示一個元素的class和id屬性。

看例子：

%div#things

%span#rice Chicken Fried

%p.beans{ :food => 'true' } The magical fruit

%h1.class.otherclass#id La La La

轉換爲：

<span id='rice'>Chicken Fried</span>

<p class='beans' food='true'>The magical fruit</p>

</div>

注意h1標籤。兩個點連用，第一個表示class屬性，第二個則是用來連接那兩個字符的空格。

#content

.articles

.article.title

Doogie Howser Comes Out

.article.date

2006-11-05

.article.entry

Neil Patrick Harris would like to dispel any rumors that he is straight

轉換爲：

<div class="article title">Doogie Howser Comes Out</div>

Neil Patrick Harris would like to dispel any rumors that he is straight

</div>

Implicit Div Elements（隱藏DIV）

由於Div這個標籤常常被用，因此你僅用.and#這兩個符號來定義class和id的時候，一個div元素就會被自動的使用。例如：

#collection

.item

.description What a cool item!

和下面的這個類似：

%div{:id => collection}

%div{:class => 'item'}

%div{:class => 'description'} What a cool item!

都會被轉換爲：

</div>

等號符號用來插入ruby 代碼的值到模板中。

%p= "hello"

和下面的這種形式不太同樣：

= "hello"

XHTML Helpers

No Special Character

若是沒有這些特定的字符打頭的話，返回的只是一個普通的文本，好比下面的Wow this is cool!

%gee

%whiz

Wow this is cool!

轉換爲：

<gee>

<whiz>

Wow this is cool!

</whiz>

</gee>

!!!

當用haml來表示一個XHTML文檔，你能夠經過!!!這個符號來自動生成文檔類型和XML prolog。好比：

!!! XML

!!!

%html

%head

%title Myspace

%body

%h1 I am the international space station

%p Sign my guestbook

轉換爲：

<?xml version="1.0" encoding="utf-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Myspace</title>

</head>

<body>

<h1>I am the international space station</h1>

<p>Sign my guestbook</p>

</body>

</html>

你也能夠在！！！後面加版本號。好比：

!!! 1.1

轉換爲：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

and

!!! Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

若是你不想用UTF-8的編碼，你也能夠指定你想要的編碼：

!!! XML iso-8859-1

轉換爲：

<?xml version="1.0" encoding="iso-8859-1" ?>

若是這個斜線寫在打頭的位置，則會註釋這行。

%billabong

/ This is the billabong element

I like billabongs!

轉換爲：

I like billabongs!

</billabong>

放在代碼的上方，則註釋整個代碼：

%p This doesn't render...

%div

%h1 Because it's commented out!

轉換爲：

<!--

<p>This doesn't render...</p>

<div>

<h1>Because it's commented out!</h1>

</div>

-->

/[if IE]

%a{ :href => 'http://www.mozilla.com/en-US/firefox/' }

%h1 Get Firefox

轉換爲：

<!--[if IE]>

<h1>Get Firefox</h1>

</a>

<![endif]-->

反斜槓符號容許字符串前面的第一個符號做爲純文本使用。

%title

= @title

\- MySite

轉換爲：

<title>

MyPage

- MySite

</title>

管道符能夠容許把輸出爲一行的內容寫成多行。

%whoo

%hoo I think this might get |

pretty long so I should |

probably make it |

multiline so it doesn't |

look awful. |

%p This is short.

is compiled to:

<whoo>

<hoo>

I think this might get pretty long so I should probably make it multiline so it doesn't look awful.

</hoo>

</whoo>

冒號是指定一個過濾器。冒號後面是你要使用的那個過濾器的名字。For example,

:markdown

Textile

=======

Hello, *World*

轉換爲：

<p>

<h1>Textile</h1>

<p>Hello, <em>World</em></p>

</p>

Haml支持的過濾器定義

plain

ruby

preserve

erb

sass

redcloth

textile

markdown

Ruby evaluators （執行Ruby 代碼，前面說了）

等號容許執行 ruby代碼並返回一個值做爲顯示文本。

= ['hi', 'there', 'reader!'].join " "

= "yo"

編譯爲 :

<p>

hi there reader!

</p>

你也能使用雙等號來更容易的嵌入 ruby代碼。好比：

== 1 + 1 = #{1 + 1}

編譯爲：

<p>

1 + 1 = 2

</p>

橫槓符號，頗有性格，可使文本變爲」silent script」：意思是，代碼能夠執行，但並不輸出任何東西。

這裏不推薦使用這種擴展，全部的邏輯代碼都應該限制在controller ，helper 或partials 裏

For example:

- foo = "hello"

- foo << " there"

- foo << " you!"

%p= foo

轉換爲：

<p>

hello there you!

</p>

Blocks

Ruby中的塊，也不須要明顯的去關閉，haml會讓它自動關閉。這寫都是基於縮進的。千萬記住要縮進兩個空格。

- (42...47).each do |i|

%p= i

%p See, I can count!

編譯爲 :

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

Another example:

- case 2

- when 1

= "1!"

- when 2

= "2?"

- when 3

= "3."

is compiled to:

<p>

</p>

至關於一個註釋吧，跟在這個符號後面的文本沒法輸出。

For example:

%p foo -# This is a comment %p bar

is compiled to:

h2>Other Useful Things

Helpers

Haml offers a bunch of helpers that are useful for doing stuff like preserving whitespace, creating nicely indented output for user-defined helpers, and other useful things. The helpers are all documented in the Haml::Helpers and Haml::Helpers::ActionViewExtensions modules.

Haml提供了不少有用的helper方法。好比爲用戶定義的helper方法保留空格建立漂亮的縮進等其餘一些有用的東西。這些helpers方法都在Haml::Helpers和Haml::ActionViewExtensions這兩個modules裏。

Haml Options

Options can be set by setting the hash Haml::Template.options from environment.rb in Rails, or by passing an options hash to Haml::Engine. Available options are:

能夠在 Rails的environment.rb文件中經過設置Haml::Template.options的hash來設置Options，或者經過傳一個hash到Haml::Engine裏來設置。也就是你能夠設置以下option來自定義haml，可用的options以下所示：

:suppress_eval

:attr_wrapper

:filename

:filters

:locals

度娘提供的參看資料：

http://wenku.baidu.com/link?url=KYU0KlMzYXEg2lTA1Nxj0l9jPqypIQL7BCniNkYI8i0d4UhJxH66BWMFcTkjM28wgyite3dEVoqEnnS_bVT178v3LkTTBBuUcijd6wQ2Vca