《zz》haml 参考

Haml：一种简洁高效的XHTML描述语言

最新推荐文章于 2021-06-03 00:49:29 发布

horace_lee

最新推荐文章于 2021-06-03 00:49:29 发布

阅读量123

点赞数

文章标签： Ruby Rails Firefox XHTML MySpace

Haml是一种用于描述XHTML网页文档的标记语言，它提供了一种更干净、更简单的方法来替代传统的内嵌代码。通过使用空格来表示层次嵌套关系、良好的标签格式以及遵循CSS标准，Haml旨在减少重复代码（DRY原则），并集成Ruby代码。本文将介绍Haml的使用方式，包括作为Ruby on Rails插件和独立Ruby模块的使用方法，以及如何利用其独特的标签语法进行HTML代码的高效编写。

Haml是一种用来描述任何XHTML web document的标记语言，它是干净，简单的。而且也不用内嵌代码。Haml的职能就是替代那些内嵌代码的page page templating systems，比如PHP,ERB(Rails的模板系统)，ASP。不过， haml避免了直接coding XHTML到模板，因为它实际上是一个xhtml的抽象描述，内部使用一些code来生成动态内容。

它有什么特点呢？

1. 空格标识层次嵌套关系

2. 良好的标签格式

3. DRY （ Don’t repeat yourself ）

4. 遵循 CSS 标准

5. 集成了 Ruby 代码

6. 用 .haml 扩展名代替了 rails 模板（ .rhtml ）

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

# file: app/views/movies/index.haml

#content

.title

%h1= @title

= link_to 'Home', home_url

上面的haml 代码会被编译为：

</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}" }

编译后为：

</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!

转换为：

Hello!

</div>

这是基于RailsConf Europe 2006 大会上DHH 提出的SimpleHelpful 语法

这个斜线字符，放在一个tag 定义之后，可以让这个标签自我关闭。例子：

%br/

%meta{'http-equiv' => 'Content-Type', :content => 'text/html'}/

转换为：

<br />

有一些标签（meta, img, link, script, br, and hr tags 等）当没有内容的时候会自动关闭。看例子：

%br

%meta{'http-equiv' => 'Content-Type', :content => 'text/html'}

转换为：

<br />

. and #

这两个符号是从CSS 里借鉴来的。他们被用来表示一个元素的class 和id 属性。

看例子：

%div#things

%span#rice Chicken Fried

%p.beans{ :food => 'true' } The magical fruit

%h1.class.otherclass#id La La La

转换为：

<span id='rice'>Chicken Fried</span>

<p class='beans' food='true'>The magical fruit</p>

</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 class="article title">Doogie Howser Comes Out</div>

Neil Patrick Harris would like to dispel any rumors that he is straight

</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>

等号符号用来插入ruby 代码的值到模板中。

%p= "hello"

和下面的这种形式不太一样：

= "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!

转换为：

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]>

<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.

</hoo>

</whoo>

冒号是指定一个过滤器。冒号后面是你要使用的那个过滤器的名字。For example,

:markdown

Textile

=======

Hello, *World*

转换为：

<p>

<h1>Textile</h1>

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

</p>

Haml 支持的过滤器定义

plain

ruby

preserve

erb

sass

redcloth

textile

markdown

Ruby evaluators （执行Ruby 代码，前面说了）

等号允许执行ruby 代码并返回一个值作为显示文本。

= ['hi', 'there', 'reader!'].join " "

= "yo"

编译为:

<p>

hi there reader!

</p>

你也能使用双等号来更容易的嵌入ruby 代码。比如：

== 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>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

Another example:

- case 2

- when 1

= "1!"

- when 2

= "2?"

- when 3

= "3."

is compiled to:

<p>

</p>

相当于一个注释吧，跟在这个符号后面的文本无法输出。

For example:

%p foo -# This is a comment %p bar

is compiled to:

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