haml

haml

Haml是一種用來描述任何XHTML web document的標記語言,它是乾淨,簡單的。而且也不用內嵌代碼。Haml的職能就是替代那些內嵌代碼的page page templating systems,比如PHP,ERB(Rails的模板系統),ASP。不過,haml避免了直接coding XHTML到模板,因為它實際上是一個xhtml的抽象描述,內部使用一些code來生成動態內容。Haml 是一種簡潔優美的模板語言,可以套用於Ruby on Rails、 PHP等Web開發平台,可以大大縮減模板代碼,減少冗餘,提高可讀性。並且Haml是一種完備的模板語言,沒有犧牲當前模板語言的任何特性。Haml由 Hampton Catlin發明並且開發了Ruby on Rails上的實現。

基本介紹

  • 中文名:Haml
  • 類型:XHTML web document標記語言
  • 發明者:Hampton Catlin
  • 實現平台:Ruby on Rails
語言特點,使用場景,標籤,百分號,括弧,方括弧,斜線,. and #,=,!!!,!!! Strict,注釋斜線,反斜槓,管道符,冒號,過濾器定義,

語言特點

1.空格標識層次嵌套關係
2.良好的標籤格式
3.DRY(Don’t repeat yourself)
4.遵循CSS標準
5.集成了Ruby代碼
6.用.haml擴展名代替了rails模板(.rhtml)

使用場景

Haml的使用有兩種方式:
作為Ruby on Rails的外掛程式來使用。
作為一個獨立的Ruby module來使用。
Rails 外掛程式方式
這是使用Haml最常用的方式。當然,安裝Haml的方式,就是Rails里常用的外掛程式安裝方式了:
./script/plugin
install http:// svn. hamptoncatlin .com/haml/tags/stable
一旦安裝好以後,你必須以.haml為擴展名來使用。
你在ERB模板里可以使用的實例變數在Haml里照樣可以使用,Helper方法也不例外。比如:
# file: app/controllers/movies_controller.rb
class MoviesController < ApplicationController
def index
@title = "Teen Wolf"
end
end
# file: app/views/movies/index.haml
#content
.title
%h1= @title
= link_to 'Home', home_url
上面的haml代碼會被編譯為:
<div id='content'>
<div class='title'>
<h1>Teen Wolf</h1>
<a href='/'>Home</a>
</div>
</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}" }
編譯後為:
<head name="doc_head">
<script src='javascripts/script_9' type='text/javascript'>
</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!
轉換為:
<div class="crazy_user" id="crazy_user_15">
<bar class="fixnum" id="fixnum_581" />
Hello!
</div>
這是基於RailsConf Europe 2006 大會上DHH提出的SimpleHelpful語法

斜線

這個斜線字元,放在一個tag定義之後,可以讓這個標籤自我關閉。例子:
%br/
%meta{'http-equiv' => 'Content-Type', :content => 'text/html'}/
轉換為:
<br />
<meta http-equiv='Content-Type' content='text/html' />
有一些標籤(meta, img, link, script, br, and hr tags等)當沒有內容的時候會自動關閉。看例子:
%br
%meta{'http-equiv' => 'Content-Type', :content => 'text/html'}
轉換為:
<br />
<meta http-equiv='Content-Type' content='text/html' />

. and #

這兩個符號是從CSS里借鑑來的。他們被用來表示一個元素的class和id屬性。
看例子:
%div#things
%span#rice Chicken Fried
%p.beans{ :food => 'true' } The magical fruit
%h1.class.otherclass#id La La La
轉換為:
<div id='things'>
<span id='rice'>Chicken Fried</span>
<p class='beans' food='true'>The magical fruit</p>
<h1 class='class otherclass' id='id'>La La La</h1>
</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 id="content">
<div class="articles">
<div class="article title">Doogie Howser Comes Out</div>
<div class="article date">2006-11-05</div>
<div class="article entry">
Neil Patrick Harris would like to dispel any rumors that he is straight
</div>
</div>
</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 id='collection'>
<div class='item'>
<div class='description'>What a cool item!</div>
</div>
</div>

=

等號符號用來插入ruby 代碼的值到模板中。
%p= "hello"
和下面的這種形式不太一樣:
%p
= "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!
轉換為:
<billabong>
<!-- This is the billabong element -->
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]>
<a href='http://www.mozilla .com/en-US/firefox/'>
<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.<p This is short.</p>
</hoo>
</whoo>

冒號

冒號是指定一個過濾器。冒號後面是你要使用的那個過濾器的名字。For example,
%p
Textile
=======
Hello, *World*
轉換為:
<p>
<h1>Textile</h1>
<p>Hello, <em>World</em></p>
</p>

過濾器定義

plain
ruby
preserve
erb
sass
redcloth
markdown
Ruby evaluators(執行Ruby代碼,前面說了)
=
等號允許執行ruby代碼並返回一個值作為顯示文本。
%p
= ['hi', 'there', 'reader!'].join " "
= "yo"
編譯為:
<p>
hi there reader!
yo
</p>
你也能使用雙等號來更容易的嵌入ruby代碼。比如:
%p
== 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>
42
</p>
<p>
43
</p>
<p>
44
</p>
<p>
45
</p>
<p>
46
</p>
Another example:
%p
- case 2
- when 1
= "1!"
- when 2
= "2?"
- when 3
= "3."
is compiled to:
<p>
2?
</p>
<
-#
相當於一個注釋吧,跟在這個符號後面的文本無法輸出。
For example:
%p foo -# This is a comment %p bar
is compiled to:
<p>foo</p> <p>bar</p>
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

相關詞條

熱門詞條

聯絡我們