关闭

haml入门

标签: haml
4671人阅读 评论(2) 收藏 举报
分类:

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

1
0
查看评论

Rails 中 View 层 haml 初步

ruby on rails 中 View 层
  • liiuijkiuu
  • liiuijkiuu
  • 2016-07-30 11:11
  • 578

haml入门

1.什么是HamlHaml是HTML abstraction markup language,遵循的原则是标记应该是美的。Haml可以加速和简化模版,优点是简洁、可读、高效。2.erbm模板和haml模板对比.erb模板代码:<section class=”container”> &...
  • napoay
  • napoay
  • 2016-01-10 10:30
  • 4671

Haml 参考大全

Haml是一种用来描述任何XHTML web document的标记语言,它是干净,简单的。而且也不用内嵌代码。Haml的职能就是替代那些内嵌代码的page page templating systems,比如PHP,ERB(Rails的模板系统),...
  • menxu_work
  • menxu_work
  • 2013-03-12 18:05
  • 1287

Haml 参考大全

Haml是一种用来描述任何XHTML web document的标记语言,它是干净,简单的。而且也不用内嵌代码。Haml的职能就是替代那些内嵌代码的page page templating systems,比如PHP,ERB(Rails的模板系统),ASP。不过, haml避...
  • v1v1wang
  • v1v1wang
  • 2013-08-25 22:15
  • 1264

将已有项目下的html转为haml

安装haml html2haml gem install haml gem install html2haml 转换 find ./app/views -name \*.erb -print | sed 'p;s/.erb$/.haml/' | xargs -n2 html2ham...
  • SeekChance
  • SeekChance
  • 2017-07-30 20:40
  • 232

Rails Minitest style 指南

In the test,  we should use the ‘describe’,  ‘context’, ‘it’ structure. Here I use a controller test as an example. I have this my_control...
  • cs08211317dn
  • cs08211317dn
  • 2015-06-23 08:46
  • 527

rails常用插件

常用rails插件(可去https://github.com上搜索得到): 1.rest-authentication、devise:用户验证插件 2.attachment_fu、carrierwave、Paperclip :文件上传插件 3.random_finders:数据库随机查找辅助插件 4...
  • u011345213
  • u011345213
  • 2013-07-09 15:23
  • 1376

Ruby On Rails 框架下的常用插件介绍 --- haml

主页:http://haml-lang.com/ 作用:替换掉rails自带的erb,此插件可以使得view代码变得非常简洁。 安装: 在Gemfile文件中追加如下代码: gem 'haml' 然后运行如下指令安装: bundle install 用法: 1...
  • kunshan_shenbin
  • kunshan_shenbin
  • 2012-02-28 17:09
  • 894

html的简化写法-haml和emmet的简单介绍

关于HAML和HTML 下面是一个html的范例: 你可以看见,这只是标准的HTML/ERb的代码片断。对于你来说,这可能不会那么刺激审美神经。然而,正如Grigsby在他的文章中巧妙地解释到的,不仅仅里面会存在许多重复,而且也会出现很多不必要...
  • zhengwish
  • zhengwish
  • 2016-01-26 17:31
  • 954

rails最简单调试

rails调试: 1.三种最简单直接的,直接页面输出调试信息 xxx.html.haml: =debug object =object.inspect =simple_format object.to_yaml 2.logger :debug :info :warn :erro...
  • SeekChance
  • SeekChance
  • 2017-08-15 14:00
  • 266
    《从Lucene到Elasticsearch:全文检索实战》
    Lucene、ES、ELK开发交流群:370734940
    Lucene、ES、ELK开发交流
    个人资料
    • 访问:927925次
    • 积分:9196
    • 等级:
    • 排名:第2398名
    • 原创:209篇
    • 转载:2篇
    • 译文:6篇
    • 评论:467条
    StackOverFlow
    http://stackoverflow.com/users/6526424
    统计
    博客专栏
    文章分类
    最新评论