教學

在我們開始這篇教學之前，我想先說清楚一件事。在你閱讀完這篇教學後，請去將你的 ERB 檔案轉換成 Haml。就試試看吧。只要打開檔案，開始刪除內容即可。如果你不喜歡，可以不用保留檔案，但看完這篇教學後，請至少嘗試轉換一個檔案。

Haml 在最初的 20 分鐘會讓你覺得很奇怪，但之後你的速度會變快。

開始使用

首先，取得 Haml 並安裝 gem（本教學假設你使用 Rails，但它也適用於其他架構和獨立的 Haml）。Haml 是 ERB 的替代品。這表示你可以透過變更檔案的副檔名，將 app/views 資料夾中的任何檔案轉換成 Haml。

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

現在，當你檢視該頁面時，模板不再由 ERB 處理，而是由 Haml 處理。你可以在你的網站中混用 ERB 和 Haml。

如何轉換

讓我們從一些我們想要轉換的基本 ERB 開始。

ERB

<strong><%= item.title %></strong>

Haml

%strong= item.title

在 Haml 中，我們使用百分比符號和標籤名稱來撰寫標籤。這適用於 %strong、%div、%body、%html；任何您想要的標籤。然後，在標籤名稱之後是 =，它告訴 Haml 評估右側的 Ruby 程式碼，然後將回傳值列印為標籤的內容。與上述 ERB 不同，Haml 會自動偵測回傳值中的換行符，並正確格式化標籤。

新增屬性

簡單的標籤很好，但如何為標籤新增屬性呢？

HTML

<strong class="code" id="message">Hello, World!</strong>

Haml

%strong{:class => "code", :id => "message"} Hello, World!

屬性只是一個標準的 Ruby hash。class 屬性為「code」，id 屬性為「message」。請注意，在此範例中，我們沒有使用 =，因此「Hello, World!」會被解釋為一個常規字串，而不是 Ruby 程式碼。

由於 class 和 id 是常見的屬性，而且大多數設計師（和開發人員）都熟悉 CSS，因此我們可以使用類似的符號來描述此標籤，這是一個在 Haml 中定義此標籤的更簡單方法。

Haml

%strong.code#message Hello, World!

不僅如此，由於 div 標籤非常常見，因此您可以省略標籤定義，並將其預設為 %div。

Haml

.content Hello, World!

HTML

<div class='content'>Hello, World!</div>

提升複雜度

現在，如何處理一些更複雜的事情呢？

ERB

<div class='item' id='item<%= item.id %>'>
  <%= item.body %>
</div>

非常基本。這可能是部分內容或其他內容。讓我們將其轉換為 Haml。

Haml

.item{:id => "item#{item.id}"}= item.body

這很有趣！現在，Haml 會透過空白處理巢狀結構。

ERB

<div id='content'>
  <div class='left column'>
    <h2>Welcome to our site!</h2>
    <p><%= print_information %></p>
  </div>
  <div class="right column">
    <%= render :partial => "sidebar" %>
  </div>
</div>

Haml

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"

看看那。這難道不讓你微笑嗎？

還有很多東西要學習，所以我強烈建議查看參考。它包含我們新增到 Haml 中的許多很棒的小技巧，讓建置網站變得更加有趣。