zoukankan      html  css  js  c++  java
  • haml参考大全

     
    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里常用的插件安装方式了:
    一旦安装好以后,你必须以.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可以完全从rails和ActionView里拿出来单独使用。下下面这样做:
      gem  install  haml
     
    然后用Haml::Engine:
    engine = Haml::Engine.new("%p Haml code!")
    engine.render #=> "<p>Haml code!</p> "
     
    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 对象,被用来为这个标签设置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!
    转换为:
      <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里借鉴来的。他们被用来表示一个元素的class和id属性。
    看例子:
     
      %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#这两个符号来定义class和id的时候,一个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>
    等号符号用来插入
  • 相关阅读:
    软件工程网络15个人阅读作业1
    团队课程设计博客
    计时器(何雨柔201521123040)
    软工网络15个人作业4——alpha阶段个人总结
    软工网络15个人作业3——案例分析
    软件工程网络15结对编程作业
    软工网络15个人作业2
    软件工程网络15个人阅读作业1(201521123032 黄登峰)
    计时器(黄登峰 201521123032)
    201521123032 《Java程序设计》第14周学习总结
  • 原文地址:https://www.cnblogs.com/wangyuyu/p/3385784.html
Copyright © 2011-2022 走看看