標籤: 暫無標籤

Haml是一種用來描述任何XHTML web document的標記語言,它是乾淨,簡單的。而且也不用內嵌代碼。Haml的職能就是替代那些內嵌代碼的page page templating systems,比如PHP,ERB(Rails的模板系統),ASP。

1 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上的實現。

2 haml -語言特點

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

  2.良好的標籤格式

  3.DRY(Don』t repeat yourself)

  4.遵循CSS標準

  5.集成了Ruby代碼

  6.用.haml擴展名代替了rails模板(.rhtml)

3 haml -Haml的使用

  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"

4 haml -XTML Tag

  下面這些字元會渲染出相應的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&#91;@user&#93;

  %bar&#91;290&#93;/

  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>

  -->

  /&#91;if IE&#93;

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

  %h1 Get Firefox

  轉換為:

  <!--&#91;if IE&#93;>

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

  <h1>Get Firefox</h1>

  </a>

  <!&#91;endif&#93;-->

反斜杠()

  反斜杠符號允許字元串前面的第一個符號作為純文本使用。

  %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,

  %p

  :markdown

  Textile

  =======

  Hello, *World*

  轉換為:

  <p>

  <h1>Textile</h1>

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

  </p>

5 haml -Haml支持的過濾器定義

  plain

  ruby

  preserve

  erb

  sass

  redcloth

  textile

  markdown

  Ruby evaluators(執行Ruby代碼,前面說了)

  =

  等號允許執行ruby代碼並返回一個值作為顯示文本。

  %p

  = &#91;'hi', 'there', 'reader!'&#93;.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

Helper

  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 Option

  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

上一篇[hdashcut]    下一篇 [Guest許可權提升]

相關評論

同義詞:暫無同義詞