haml入门

发布于 2016-01-10 07:07:55 | 666 次阅读 | 评论: 0 | 来源: PHPERZ

Haml 描述 XHTML 的标记语言

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上的实现。

1.什么是Haml

Haml是HTML abstraction markup language，遵循的原则是标记应该是美的。Haml可以加速和简化模版，优点是简洁、可读、高效。

2.erbm模板和haml模板对比

.erb模板代码：

<section class=”container”>
  <h1><%= post.title %></h1>
  <h2><%= post.subtitle %></h2>
  <div class=”content”>
    <%= post.content %>
  </div>
</section>

同样的代码使用haml：

%section.container
  %h1= post.title
  %h2= post.subtitle
  .content
    = post.content

3.安装haml

haml是一个命令行工具，gem安装明令：

gem install  haml

安装最新版本：

gem install haml --pre

在rails项目中更新Gemfile，添加haml依赖：

gem 'haml'

4.erb转haml

haml是erb的一个替代品，app/views下的.erb文件都可以直接修改后缀名更改为haml模板：

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

5.使用haml

5.1 erb代码转haml代码

ERB：

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

Haml：

%strong= item.title

在haml中通过％加标签名的方式表示一个html标签，比如%strong, %div, %body, %html; 标签名后跟＝，＝告诉haml去计算ruby代码，返回值作为标签的内容。Haml的会自动检测返回值的换行符并且格式化标签。

5.2给标签添加属性：

HTML：

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

HAML：

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

5.3简化Div

Html：

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

Haml：

.content Hello, World!

5.5 示例一

ERB：

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

HAML：

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

5.2 示例2

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使用缩进来表示层级关系

最新网友评论 共有(0)条评论发布评论返回顶部