Haml模板语言完全指南：简洁高效的HTML抽象语法

Haml模板语言完全指南：简洁高效的HTML抽象语法

haml HTML Abstraction Markup Language - A Markup Haiku 项目地址: https://gitcode.com/gh_mirrors/ha/haml

什么是Haml

Haml（HTML Abstraction Markup Language）是一种革命性的模板语言，它通过简洁优雅的语法结构，彻底改变了传统HTML的编写方式。作为PHP、ERB和ASP等内联模板系统的现代替代方案，Haml采用基于缩进的语法，让开发者能够以更少的代码量生成结构良好的HTML文档。

Haml核心优势

1. 基于缩进的语法：通过严格的缩进规则组织文档结构，自动生成格式良好的HTML
2. DRY原则：消除重复的闭合标签，减少代码量
3. CSS友好：采用类似CSS选择器的语法定义元素类和ID
4. Ruby集成：无缝嵌入Ruby代码，特别适合Ruby on Rails项目
5. 多种使用方式：可作为命令行工具、Rails插件或独立Ruby模块使用

安装与基础使用

安装方法

gem install haml

基本转换示例

#content
  .title
    %h1= @title
    = link_to 'Home', home_url

转换为HTML：

<div id='content'>
  <div class='title'>
    <h1>页面标题</h1>
    <a href='/'>Home</a>
  </div>
</div>

核心语法详解

1. 元素定义

使用%符号定义HTML元素：

%div
  %p 这是一个段落
  %strong 强调文本

2. 类与ID快捷方式

#container        // <div id="container">
.main.content    // <div class="main content">

3. 属性设置

Haml提供多种属性定义方式：

哈希风格

%a{href: "/posts", title: "文章列表"}

HTML风格

%a(href="/posts" title="文章列表")

布尔属性

%input(disabled checked)

4. 动态内容嵌入

%h1= article.title
%p= truncate(article.content, length: 100)

5. 文本处理

多行文本使用|或>控制空白：

%pre
  | 保留格式的
  | 多行文本

6. 特殊标记

• !!! 生成DOCTYPE声明
• / 创建自闭合标签
• [] 对象引用（特别适合ActiveRecord对象）

高级特性

1. 条件注释

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

2. 过滤器

支持多种文本过滤器：

:javascript
  alert('Hello World');
  
:markdown
  # 标题
  这是*markdown*内容

3. 空白控制

使用<和>精确控制空白：

%p> 紧密连接的
%span 文本

4. 数据属性

%div{data: {user_id: 123, role: "admin"}}

最佳实践

1. 保持缩进一致：使用2个空格作为标准缩进
2. 合理拆分模板：将大型模板分解为局部视图
3. 善用助手方法：将复杂逻辑移至助手方法
4. 注释策略：使用Haml注释(-#)而非HTML注释
5. 性能优化：预编译常用模板

常见问题解决方案

问题1：如何输出纯文本等号？ 方案：使用反斜杠转义

\= 这不会被解析

问题2：如何处理大量属性？ 方案：多行书写

%script{type: "text/javascript",
        src: "app.js",
        "data-turbolinks-track": "reload"}

问题3：如何混合静态和动态类？ 方案：数组语法

%div{class: ["static-class", dynamic_class_if(true)]}

Haml通过其简洁的语法和强大的功能，显著提高了前端开发的效率和可维护性。无论是小型项目还是大型应用，Haml都能帮助开发者以更优雅的方式构建HTML结构。

haml HTML Abstraction Markup Language - A Markup Haiku 项目地址: https://gitcode.com/gh_mirrors/ha/haml