使用 haml 模板语言

haml 是一种简洁优美的模板语言，主要智能用来替代基于ruby框架的模版系统，例如：替换Ruby on Rails的erb模版，可以大大缩减模板代码，减少冗余，提高可读性。并且Haml是一种完备的模板语言，没有牺牲当前模板语言的任何特性。Haml由Hampton Catlin发明并且开发了Ruby on Rails上的实现。

一、概述

1.常见语法规则


序号	haml	html
----	------	------
1.	!!!5
2.	%tag	代表HTML标签
3.	%tag#id	代表id属性
4.	%tag.class	代表class属性
5.	%tag(attr="xxx")	代表某一个特定属性
6.	%tag xxx	代表插入标签的内容
7.	%E %N	代表N是E的子元素。N如果写在第二行，需要缩进‘二格’
8.	\|	haml标签，多行连接符
9.	-#	haml注释
10.	/	haml标签，前面加单行或多行注释，后面加关闭标签

tag,E可以替换为html标签 <p>,<a>,<ul>,<li>,<stong>,<title>...

　
2.haml 范例

!!! 5
　　%html{lang: 'en'}
　　　　%head
　　　　　　%title Haml Demo
　　　　%body
　　　　　　%h1 Hello World
　　　　　　%a(href="http://wikipedia.org" title="Wikipedia") 维基百科

to HTML：

　　<!DOCTYPE html>
　　<html lang='en'>
　　　　<head>
　　　　　　<title>Haml Demo</title>
　　　　</head>
　　　　<body>
　　　　　　<h1>Hello World</h1>
　　　　　　<a href='http://wikipedia.org' title='Wikipedia'>维基百科</a>
　　　　</body>
　　</html>

二、语法 (on rails)

1.% 百分号符号是一行的开始，紧接着一个元素的名字，它会创建一个这样的形式：, 默认的元素是div;

%strong test to HTML：<strong>test</strong>

strong= item.title to ERB：<strong><%= item.title %></strong>

2.# 代替 id

#id= item.title to ERB: <div id="id"><%= item.title %></div>

3."." 代替 class

%strong.code#message Hello, World! to ERB:

<strong><class=code id="message">Hello, World!<strong>

 3,4,5标题中"" 是为了方便读者看清，语句实际使用中并不需要;

4.**"="** 代替 **<%= %>** 相当于插入ruby代码,并输出结果;

.my-class= item.title to ERB: <div class="my-class"><%= item.title %></div>

%p= Time.now to HTML:<p>Sat Aug 06 15:06:09 +0100 2011</p>

5."-" 代替 <% %>相当于执行ruby代码,但不输出结果;

  - if @opportunities.any?
    = render @opportunities
  - else
    = render "shared/empty"

to ERB:

<%if @opportunities.any? %>
  <%= render @opportunities %>
<%else%>
  <%= render "shared/empty" %>
<%end%>

6.**#{}** 表示插入ruby代码,并计算结果;

%script(type="text/javascript" src="javascripts/script_#{2 + 7}") to HTML:

<script type="text/javascript" src="javascripts/script_9"></script>

常见的a标签和span标签:

%a(title=@title){:href => @link.href} Stuff

%span(class="widget_#{@widget.number}")

7.**{}** 添加的ruby hash 属性或 html 复杂代码,hash属性和值之间用 **{:属性1=> 值1,:属性2=> 值2 }**表示;

%strong{:class=>"code",:id=>"message"} Hello, World! to ERB:

<strong><class="code" id="message">Hello, World!<strong>

8.**img**标签hash

%img{ :src => "/path/to/image", :alt => "Description of image" } or

%img ( src="/path/to/image", alt="Description of image")

to HTML：

<img src="/path/to/image" alt="Description of image">

9.HTML5 DOCTYPE

!!!5 to HTML: <!DOCTYPE html>

%meta{ :charset => "utf-8" } to HTML:<meta charset="utf-8">

%link{ :rel => "stylesheet", :href => "/css/master.css" } to HTML:

<link rel="stylesheet" href="/css/master.css">

%script{ :src => "/js/site.js" } to HTML:

<script src="/js/site.js"></script>

10.注释语句

/ 表示注释,分为行注释和块注释;

/ A forward slash at the start of a line wraps that line in a comment  
%blockquote  
  %p Roads? Where we're going we don't need roads
  
/  
  A forward slash at the start of a nested block wraps the whole block in a comment  
  %blockquote  
    %p Roads? Where we're going we don't need roads

<!-- Only this line will be wrapped in a comment --> 
<blockquote> 
  <p>Roads? Where we're going we don't need roads</p> 
</blockquote> 

<!-- 
  Now the whole block will be commented out 
  <blockquote> 
    <p>Roads? Where we're going we don't need roads</p> 
  </blockquote> 
-->

- **/[ ]**表示条件注释;

/[if IE] %link { :rel => "stylesheet", :href => "/css/ie.css" } to HTML:

-#表示haml自带注释;

%p The line below won't appear in the HTML 
-# The rest of this line is a comment 
%p The line above won't appear in the HTML, nor will the lines underneath 
-# 
  None of this nested text will appear 
  in our rendered output either

<p>The line below won't appear in the HTML</p> 
<p>The line above won't appear in the HTML, nor will the lines underneath</p>

三、安装 Installing Haml

gem install haml or

Gemfile中添加:

  gem 'haml'
  gem "haml-rails"

安装后可以运行halm使用命令行：

haml input.html.haml output.html

### 参考

1、HTML代码简写法：Emmet和Haml；

2、An Introduction to Haml

posted @ 2023-01-02 14:55 Cloudhan 阅读(163) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？

密涅瓦的猫头鹰在黄昏起飞

——人们创造思想，却又为思想所束缚

使用 haml 模板语言

一、概述

二、语法 (on rails)

三、安装 Installing Haml

我的标签

随笔档案

文章档案