Haml模板语言完全指南：简洁高效的HTML抽象语法
项目地址: https://gitcode.com/gh_mirrors/ha/haml 引言：为什么选择Haml？
在Web开发的世界中，HTML是构建页面的基础，但传统的HTML语法冗长、重复且难以维护。你是否曾经为以下问题困扰过？
- 繁琐的闭合标签让代码变得臃肿
- 嵌套结构导致的缩进混乱
- 重复的class和id属性定义
- Ruby代码与HTML混合时的语法冲突
Haml（HTML Abstraction Markup Language）正是为了解决这些问题而生。它是一种优雅的模板语言，通过简洁的语法和强大的功能，让HTML编写变得更加高效和愉悦。
通过本文，你将掌握：
- Haml的核心语法和最佳实践
- 与Ruby on Rails的无缝集成
- 高级特性和实用技巧
- 性能优化和常见问题解决方案
环境搭建与安装
基础安装
Haml可以通过多种方式安装和使用：
# 通过RubyGems安装
gem install haml
# 在Rails项目中添加到Gemfile
gem 'haml'
# 验证安装
haml --version
命令行使用
Haml提供了强大的命令行工具：
# 编译Haml文件为HTML
haml render input.haml > output.html
# 监视文件变化并自动编译
haml render --watch input.haml
# 查看所有可用选项
haml --help
核心语法详解
基础元素结构
Haml使用简洁的符号系统替代传统的HTML标签：
/ 传统HTML
<div class="container" id="main">
<h1>标题</h1>
<p>段落内容</p>
</div>
/ Haml等价写法
.container#main
%h1 标题
%p 段落内容
元素命名与属性
基本标签语法
%html
%head
%title 页面标题
%body
%h1 主要标题
%p 段落文本
属性定义方式
Haml支持多种属性定义语法：
/ Hash样式属性（Ruby风格）
%input{type: "text", name: "username", value: @user.name}
/ HTML样式属性
%input(type="text" name="username" value=@user.name)
/ 混合样式
%a(href=post_url){data: {id: @post.id, category: "blog"}} 阅读全文
Class和ID快捷方式
/ 传统方式
%div{:class => "user profile", :id => "user_123"}
/ Haml快捷方式
.user.profile#user_123
/ 自动div元素
#header
.navigation
.menu-item 首页
内容嵌套与缩进
Haml使用严格的缩进来表示嵌套关系：
%ul#navigation
%li
%a{href: "/"} 首页
%li
%a{href: "/about"} 关于我们
%li
%a{href: "/contact"} 联系我们
%ul.submenu
%li
%a{href: "/contact/email"} 邮件
%li
%a{href: "/contact/phone"} 电话
Ruby代码集成
输出Ruby表达式
%header
%h1= @page_title
%p
当前用户：
%strong= current_user.name
= "，欢迎回来！"
执行Ruby代码
- if user_signed_in?
%p 欢迎回来，#{current_user.name}！
- unless current_user.profile_complete?
.alert
%strong 请完善您的个人资料
= link_to "编辑资料", edit_profile_path
- else
%p
= link_to "登录", new_session_path
或
= link_to "注册", new_registration_path
循环和条件语句
/ 循环示例
- @products.each do |product|
.product
%h3= product.name
%p.price= number_to_currency(product.price)
- if product.on_sale?
.sale-badge 特价！
/ 条件语句
- case @user.role
- when "admin"
%p.admin-warning 管理员控制面板
- when "moderator"
%p.moderator-notice 版主功能
- else
%p.default-message 普通用户界面
高级特性与技巧
过滤器（Filters）
Haml提供了多种内置过滤器来处理特定类型的内容：
/ Markdown过滤器
:markdown
# 标题
**粗体文本** 和 *斜体文本*
[链接文字](http://example.com)
/ JavaScript过滤器
:javascript
$(document).ready(function() {
console.log("页面加载完成");
$('#button').click(function() {
alert('按钮被点击！');
});
});
/ CSS过滤器
:css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
/ CoffeeScript过滤器
:coffee
square = (x) -> x * x
list = [1, 2, 3, 4, 5]
squares = (square num for num in list)
/ Ruby过滤器（执行Ruby代码）
:ruby
require 'date'
current_date = Date.today
puts "当前日期: #{current_date}"
空白处理控制
Haml提供了精确的空白控制机制：
/ 移除外部空白
%div>
%p 这个div外部没有空白
/ 移除内部空白
%pre<
这 些 空 白 会 被 保 留
但元素内部的空白会被移除
/ 空白保留
~ "这\n些\n换\n行\n会\n被\n保\n留"
注释系统
/ HTML注释（会出现在输出中）
/ 这是可见的注释
%p 这个段落被注释掉了
/ 条件注释
/[if IE]
%p 您正在使用Internet Explorer
/![if !IE]
%p 您没有使用IE浏览器
/ Haml注释（不会出现在输出中）
-# 这是不可见的注释
%p 这个段落正常显示
Doctype和XML声明
/ HTML5 Doctype
!!! 5
%html
%head
%title 页面标题
/ XHTML Strict
!!! Strict
%html(xmlns="http://www.w3.org/1999/xhtml")
%head
%title XHTML页面
/ XML声明
!!! XML iso-8859-1
%root
%element 内容
与Rails框架集成
控制器和视图集成
在Rails中使用Haml非常简单：
# Gemfile
gem 'haml'
gem 'haml-rails' # 可选：用于生成Haml模板
# app/controllers/posts_controller.rb
class PostsController < ApplicationController
def show
@post = Post.find(params[:id])
@comments = @post.comments.approved
end
end
/ app/views/posts/show.html.haml
.article
%h1= @post.title
.meta
%span.author 作者：#{@post.author.name}
%span.date= @post.published_at.strftime("%Y年%m月%d日")
.content= simple_format(@post.content)
- if @post.comments.any?
#comments
%h3 评论（#{@post.comments.count}）
- @comments.each do |comment|
.comment
%strong= comment.user.name
%span= comment.created_at.strftime("%m-%d %H:%M")
%p= comment.content
局部模板（Partials）
/ app/views/shared/_header.html.haml
.header
.logo
= link_to "网站Logo", root_path
%nav
= link_to "首页", root_path
= link_to "关于", about_path
= link_to "联系", contact_path
/ app/views/layouts/application.html.haml
!!!
%html
%head
%title= yield(:title) || "默认标题"
= stylesheet_link_tag 'application'
= javascript_include_tag 'application'
%body
= render 'shared/header'
.container
= yield
= render 'shared/footer'
表单处理
/ 使用form_for
- form_for @user do |f|
.field
= f.label :name, "姓名"
= f.text_field :name
.field
= f.label :email, "邮箱"
= f.email_field :email
.field
= f.label :password, "密码"
= f.password_field :password
.actions
= f.submit "注册"
/ 使用form_tag
- form_tag search_path, method: :get do
= text_field_tag :query, params[:query], placeholder: "搜索..."
= submit_tag "搜索"
性能优化与最佳实践
代码组织原则
/ 不好的实践：过多的内联逻辑
- @products.each do |product|
- if product.available?
- if product.discount > 0
.product.on-sale
%h3= product.name
%p.price
%s= number_to_currency(product.original_price)
= number_to_currency(product.current_price)
- else
.product
%h3= product.name
%p.price= number_to_currency(product.price)
/ 好的实践：使用辅助方法和局部模板
- @products.each do |product|
= render 'products/product', product: product
缓存策略
/ 片段缓存
- cache @product do
.product
%h2= @product.name
%p= @product.description
%p.price= number_to_currency(@product.price)
/ 俄罗斯娃娃缓存
- cache [@user, @products] do
.user-profile
%h1= @user.name
.products
- @products.each do |product|
- cache product do
= render product
安全考虑
/ 自动HTML转义
= @user_input # 自动转义HTML特殊字符
/ 手动控制转义
!= safe_html_content # 明确不转义
&= user_content # 明确转义
/ 使用Rails的sanitize方法
= sanitize @user_generated_content
常见问题与解决方案
缩进错误处理
/ 错误的缩进
%ul
%li 项目1 # 错误：缺少缩进
%li 项目2
/ 正确的缩进
%ul
%li 项目1
%li 项目2
特殊字符处理
/ 处理大括号
%span= "#{'{'}" # 正确的方式
%span #{'{'} # 可能出错
/ 处理插值语法
%p 价格：#{number_to_currency(@price)}
%p 日期：#{Time.now.strftime("%Y-%m-%d")}
多行代码处理
/ 使用逗号续行
= link_to "复杂的链接",
controller: "products",
action: "show",
id: @product.id,
category: @product.category.slug
/ 使用管道符续行
- very_long_method_name. |
with_many_arguments( |
first: "value", |
second: 123, |
third: true) |
实战案例：构建一个完整的页面
让我们通过一个完整的博客页面示例来展示Haml的强大功能：
/ app/views/posts/index.html.haml
!!!
%html
%head
%title 我的博客
%meta{charset: "utf-8"}
%meta{name: "viewport", content: "width=device-width, initial-scale=1"}
= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'
= csrf_meta_tags
%body
#layout
%header
.container
%h1
= link_to "我的博客", root_path
%nav
= link_to "首页", root_path
= link_to "文章", posts_path
= link_to "关于", about_path
- if user_signed_in?
= link_to "写文章", new_post_path
= link_to "退出", destroy_session_path, method: :delete
- else
= link_to "登录", new_session_path
= link_to "注册", new_registration_path
.container
- if flash.any?
.flash-messages
- flash.each do |type, message|
.flash{class: type}
= message
%main
= yield
%footer
.container
%p © #{Time.now.year} 我的博客。保留所有权利。
%p
由
= link_to "Haml", "https://haml.info"
和
= link_to "Rails", "https://rubyonrails.org"
强力驱动
/ app/views/posts/_post.html.haml
.article
%h2
= link_to post.title, post
.meta
%span.author 作者：#{post.author.name}
%span.date= post.published_at.strftime("%Y年%m月%d日")
%span.comments
= link_to "#{post.comments.count}条评论", post_path(post, anchor: 'comments')
.excerpt= truncate(post.content, length: 200)
.actions
= link_to "阅读全文", post
- if can?(:edit, post)
= link_to "编辑", edit_post_path(post)
- if can?(:destroy, post)
= link_to "删除", post, method: :delete, data: { confirm: "确定要删除这篇文章吗？" }创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
