前幾篇有關快寫HTML的解決方案，
都是聚焦在有哪些編輯器，
可以快速寫HTML的方式。
這些方式簡而言之，
就是透過編輯器上辨識縮寫然後做擴展的動作達成。
而 HAML 是輕量而簡潔易讀的標示語言，
可透過編輯 HAML 檔後，
再轉成 HTML。
如何用HAML
HAML的官方原是用ruby環境實作出來的，
之後各程式語言版本也實作HAML的編譯轉換工具。
就已有ruby的環境而言，
只要執行 gem install haml，
就裝好了 HAML 的套件。
之後就不直接編輯HTML檔，
而是編輯 .haml 檔，
例如編輯index.haml
裡面都以 HAML 語法來維護，
然後用 haml 指令編譯出 html 檔案出來：

haml index.haml index.html

再來需熟悉了解 HAML 的語法，
就可都只維護 HAML 版本檔案。
完整的 HAML 語法可參考此網頁：
http://haml.info/docs/yardoc/file.REFERENCE.html

從HTML反推成HAML的語法
以現成的例子來試試看，本站的 鐵人賽裡 還在蘊釀中的鐵人 的部份HTML碼像這樣：

<h2>還在蘊釀中的鐵人</h1>   
<div id="ready-list">
    <div class="item">
    <img class="avatar" src="http://ithelp.ithome.com.tw/avatars/20006132.jpg" /><br />
        <span class="group-dev">開發</span>
        <p class="username">sunallen</p>
  </div>
    <div class="item">
    <img class="avatar" src="http://ithelp.ithome.com.tw/images/avatar_200.gif" /><br />
        <span class="group-dev">開發</span>
        <p class="username">patchagain</p>
  </div>
</div>

所有的HTML看起來難免雜亂，
看看怎樣一步一步變成較簡潔的HAML語法。

把成對封閉的標籤變成非封閉，並縮排兩格

<h2>還在蘊釀中的鐵人   
<div id="ready-list">
  <div class="item">
    <img class="avatar" src="http://ithelp.ithome.com.tw/avatars/20006132.jpg" />
  <br />
    <span class="group-dev">開發
    <p class="username">sunallen

  <div class="item">
    <img class="avatar" src="http://ithelp.ithome.com.tw/images/avatar_200.gif" />
  <br />
    <span class="group-dev">開發
    <p class="username">patchagain

再把那不大順眼的大於小於的符號改掉，會比較漂亮些

%h2還在蘊釀中的鐵人   
%div(id="ready-list")
  %div(class="item")
    %img(class="avatar")(src="http://ithelp.ithome.com.tw/avatars/20006132.jpg")
    %br
    %span(class="group-dev") 開發
    %p(class="username")sunallen

  %div(class="item")
    %img(class="avatar")(src="http://ithelp.ithome.com.tw/images/avatar_200.gif")
    %br
    %span(class="group-dev") 開發
    %p(class="username")patchagain

其實此語法就可讓HAML順利編譯出完整的HTML內容，
但class, id還不夠簡潔，可再修改成：

%h2還在蘊釀中的鐵人   
%div#ready-list
  %div.item
    %img.avatar(src="http://ithelp.ithome.com.tw/avatars/20006132.jpg")
    %br
    %span.group-dev 開發
    %p.username sunallen

  %div.item
    %img.avatar(src="http://ithelp.ithome.com.tw/images/avatar_200.gif")
    %br
    %span.group-dev 開發
    %p.username patchagain

整個語法更簡潔了些，但%div還是重覆太多，可以省略掉：

%h2還在蘊釀中的鐵人   
#ready-list
  .item
    %img.avatar(src="http://ithelp.ithome.com.tw/avatars/20006132.jpg")
    %br
    %span.group-dev 開發
    %p.username sunallen

  .item
    %img.avatar(src="http://ithelp.ithome.com.tw/images/avatar_200.gif")
    %br
    %span.group-dev 開發
    %p.username patchagain

跟原來的HTML碼比較起來更是漂亮而簡潔。

如果是動態網頁的話，
且在ruby erb的環境下，
各個值是塞變數，
可能看起來會是像這樣：

%h2還在蘊釀中的鐵人   
#ready-list
- @users.each do |user|
  .item
    %img.avatar(src=<%= user.icon %>)
    %br
    %span.group-dev <%= user.subject %>
    %p.username <%= user.name %>

要修改維護這樣的程式碼，
可能比原來複雜的HTML碼，
更有動力想去修改吧！
不只是ruby，只要是有支援HAML的程式語言環境，
都可用到HAML的簡潔易維護的好處。

系列文章列表