`

《zz》haml 参考

阅读更多

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 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
 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>
=
等号符号用来插入ruby 代码的值到模板中。
 
 %p= "hello"
和下面的这种形式不太一样:
 
 %p
    = "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!
转换为:
 <billabong>
    <!-- This is the billabong element -->
    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]>
    <a href='http://www.mozilla.com/en-US/firefox/'>
      <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,
 
 %p
    :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代码并返回一个值作为显示文本。
 
 %p
    = ['hi', 'there', 'reader!'].join " "
    = "yo"
编译为:
 <p>
    hi there reader!
    yo
 </p>
你也能使用双等号来更容易的嵌入ruby代码。比如:
 %p
    == 1 + 1 = #{1 + 1}
编译为:
 <p>
    1 + 1 = 2
 </p>
-
横杠符号,很有性格,可以使文本变为”silent script”:意思是,代码可以执行,但并不输出任何东西。
 
这里不推荐使用这种扩展,所有的逻辑代码都应该限制在controllerhelperpartials
 
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>
    42
 </p>
 <p>
    43
 </p>
 <p>
    44
 </p>
 <p>
    45
 </p>
 <p>
    46
 </p>
Another example:
 
 %p
    - case 2
    - when 1
      = "1!"
    - when 2
      = "2?"
    - when 3
      = "3."
is compiled to:
 
 <p>
    2?
 </p>
 
-#
相当于一个注释吧,跟在这个符号后面的文本无法输出。
 
For example:
 
%p foo -# This is a comment %p bar
 
is compiled to:
 
<p>foo</p> <p>bar</p>
 
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::HelpersHaml::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:
可以在Railsenvironment.rb文件中通过设置Haml::Template.optionshash来设置Options,或者通过传一个hashHaml::Engine里来设置。也就是你可以设置如下option来自定义haml,可用的options如下所示:
:suppress_eval
:attr_wrapper
:filename
:filters
:locals

分享到:
评论

相关推荐

    Ruby-Haml是一个HTML的模板引擎

    Haml是一个HTML的模板引擎

    MtHaml:PHP实现的HAML模板语言类库.zip

    PHP实现的HAML模板语言类库,感兴趣的朋友们可以下载下来,用到自己的项目中。

    为什么要使用HAML和SASS

    NULL 博文链接:https://hlee.iteye.com/blog/602211

    前端项目-clientside-haml-js.zip

    前端项目-clientside-haml-js,Haml compiler for client side javascript and coffeescript view templates

    haml-to-php:PHP的haml实现

    请参阅如果您将对haml-to-php.com的支持添加到框架中,我想参考您的工作。 我知道的相关工作 请参阅此处。 最引人注目。 可能也很有趣。 如果您知道更多值得注意的HAML PHP实现,请告诉我 链接 (可能已过时) 捐款 ...

    haml:HTML抽象标记语言-标记Haiku

    将Haml与Rails一起使用要将Haml与Rails一起使用,只需将Haml添加到您的Gemfile中并运行bundle 。 gem 'haml' 如果您想用Haml替换基于Rails基于Erb的生成器,请将也添加到您的Gemfile中。格式化Haml的最基本元素是...

    ruby-haml-loader:使用实际Ruby`haml`的Webpack Haml加载器

    用于Webpack的Ruby Haml加载程序 将Haml文件作为模块导入Webpack项目中。 返回渲染的模板。 这很慢。 它是为临时使用而创建的,直到转换为Jade。 此自述文件基于自述文件。 设置 添加到您的webpack配置模块....

    Haml2Html:一个易于使用的编译器,用于使用Haml&Sass开发静态页面

    用法将所有.haml文件保存在/app/views 将所有.sass文件保存在/app/styles 要观看文件运行(在终端中): ./watch要停止观看: Control + C就是这样! 所有已编译的Haml文件都存储在/compiled/ 所有已编译的Sass文件...

    herbalizer:转换HAML到ERB

    用Haskell编写的HAML到ERB转换器。 该程序将模板转换为 。 为什么 很多人更喜欢HAML而不是ERB。 但不是每个人,也不是每个情况都如此。 ERB更简单,更容易记住规则,并且对HTML熟悉的人都可以访问。 ERB模板更易于...

    yii-haml:Yii 框架的 HAML 视图渲染器

    Yii 框架的 HAML 视图渲染器 yii-haml是扩展,它为您的视图带来了功能。 基于项目的分支。 使用 Composer 安装 将此添加到您的composer.json : " repositories " : [ { " type " : " composer " , " url " : ...

    前端开源库-ewg-haml-coffee-gulp

    前端开源库-ewg-haml-coffee-gulpEWG HAML咖啡吞咽,EWG HAML咖啡模块

    MtHaml:PHP实现的HAML模板语言类库

    PHP实现的HAML模板语言类库

    gulp-ruby-haml:用于Gulp的Haml插件,使用Ruby Haml gem

    gulp-ruby-haml 这是一个,将使用该插件haml命令行脚本编译Haml的文件转换成HTML。 您需要同时安装Ruby和Haml才能使用此功能。 尝试gem install haml 。 如果使用 ,请将gem 'haml'添加到Gemfile中,然后运行bundle...

    haml-lint:编写干净且一致的HAML的工具

    HAML-Lint haml-lint是一种帮助保持文件清洁和可读的工具。 除了特定于 HAML 的样式和 lint 检查之外,它还与集成以将其强大的静态分析工具带到您的 HAML 文档中。 您可以从命令行手动运行haml-lint ,也可以将其...

    haml:CakePHP HAML模板引擎

    CakePHP HAML视图类 CakePHP 2.x的模板引擎。 基于 ,这是PHP的HAML实现。 安装 将插件包含在您的作曲家文件中: { " require " : { " tiutalk/haml " : " dev-master " } } 该软件包具有Composer依赖性,请...

    jekyll-haml-markup:用于haml标记的Jekyll插件

    杰基尔·哈姆尔(Jekyll Haml Markup) 插件,使成为布局,局部和页面的标记选项。 安装 添加到您的Gemfile: gem 'jekyll-haml-markup' , group : :jekyll_plugins 用法 用.haml扩展名命名布局,分页和页面。 该...

    Laravel开发-laravel-blade-haml

    Laravel开发-laravel-blade-haml 使用Blade语法样式包装mthaml以便于在Laravel 5中使用

    HAML.jl:JuliaHTML抽象标记语言。 受Ruby的HAML启发

    HAML.jl JuliaHTML抽象标记语言。 受启发。 建立状态测试范围概要在Julia中使用HAML的最简单方法是haml""宏的形式。 只需内联编写HAML代码,它将扩展为字符串: julia &gt; using HAMLjulia &gt; link = " ...

    haml-coffee:Haml模板,您可以在其中编写内联CoffeeScript

    Haml Coffee模板 Haml Coffee是一个JavaScript模板解决方案,它使用作为标记,了解内联并生成呈现为HTMLJavaScript函数。 它可以在使用 , , , 等的客户端JavaScript应用程序中使用,也可以在框架的服务器端使用...

    haml-rs:Haml模板语言的纯Rust实现

    要将haml-rs包含在您的项目中,请在Cargo.toml中添加以下内容: [dependencies] hamlrs = "0.4.2" 然后将以下内容添加到您的代码中: extern crate haml; 例子 图书馆 extern crate haml; fn main () { let test_...

Global site tag (gtag.js) - Google Analytics