当前位置: 代码迷 >> Web前端 >> haml参照大全
  详细解决方案

haml参照大全

热度:693   发布时间:2012-11-01 11:11:31.0
haml参考大全

原文来自:?http://blackanger.blog.51cto.com/140924/47642

Haml是一种用来描述任何XHTML web document的标记语言,它是干净,简单的。而且也不用内嵌代码。Haml的职能就是替代那些内嵌代码的page?page templating systems,比如PHP,ERB(Rails的模板系统)ASP。不过,?haml避免了直接coding XHTML到模板,因为它实际上是一个xhtml的抽象描述,内部使用一些code来生成动态内容。
?
它有什么特点呢?
1.????空格标识层次嵌套关系
2.???????良好的标签格式
3.???????DRYDon’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?[url]http://svn.hamptoncatlin.com/haml/tags/stable[/url]
一旦安装好以后,你必须以.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可以完全从railsActionView里拿出来单独使用。下下面这样做:
??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}" }
编译后为:
??<head name="doc_head">
????<script src='javascripts/script_9' type='text/javascript'>
????</script>
??</head>
?
方括号跟在一个标签定义之后,包含一个Ruby?对象,被用来为这个标签设置classid属性。这个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!
转换为:
??<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里借鉴来的。他们被用来表示一个元素的classid属性。
看例子:
?
??%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#这两个符号来定义classid的时候,一个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>
等号符号用来插入