Sinatra模板引擎集成指南：ERB、Haml与Slim实战
项目地址: https://gitcode.com/gh_mirrors/si/sinatra 你是否在寻找一种简单高效的方式来构建Web应用界面？Sinatra作为一款轻量级Ruby Web框架，提供了灵活的模板引擎支持，让你能够轻松创建动态网页。本文将详细介绍如何在Sinatra项目中集成并使用ERB、Haml和Slim三种主流模板引擎，帮助你快速掌握模板渲染技巧，提升Web开发效率。读完本文后，你将能够根据项目需求选择合适的模板引擎，并熟练运用它们构建美观的Web界面。
模板引擎简介
模板引擎是Web开发中的重要组件，它允许开发者将动态数据与静态HTML分离，提高代码的可维护性和可读性。Sinatra支持多种模板引擎，其中ERB、Haml和Slim是最常用的三种。
- ERB (Embedded Ruby)：Ruby官方推荐的模板引擎，语法简单直观，类似于PHP和JSP，适合Ruby开发者快速上手。
- Haml (HTML Abstraction Markup Language)：一种简洁的模板语言，使用缩进来表示HTML结构，减少了大量的尖括号和标签，代码更加简洁。
- Slim：与Haml类似，但更加精简，语法更加简洁，渲染速度也更快，适合追求极致简洁和性能的项目。
准备工作
在开始之前，确保你的Sinatra项目已经正确设置。如果还没有创建项目，可以按照以下步骤快速搭建一个基础的Sinatra应用：
- 创建项目目录并进入：
mkdir sinatra-templates && cd sinatra-templates
- 创建Gemfile文件，添加Sinatra依赖：
source 'https://rubygems.org'
gem 'sinatra'
- 安装依赖：
bundle install
- 创建一个简单的Sinatra应用文件app.rb：
require 'sinatra'
get '/' do
'Hello, Sinatra!'
end
- 运行应用：
ruby app.rb
访问 http://localhost:4567，你应该能看到"Hello, Sinatra!"的输出，说明基础应用已经搭建成功。
ERB模板引擎集成
ERB是Sinatra默认支持的模板引擎，使用起来非常简单。下面我们将通过一个实例来演示如何在Sinatra中使用ERB模板。
创建ERB模板文件
首先，在项目根目录下创建一个views目录，用于存放模板文件：
mkdir views
然后在views目录下创建一个index.erb文件：
<!DOCTYPE html>
<html>
<head>
<title>Sinatra ERB Example</title>
</head>
<body>
<h1>Hello, <%= @name %></h1>
<p>Current time: <%= Time.now.strftime("%Y-%m-%d %H:%M:%S") %></p>
</body>
</html>
在Sinatra应用中使用ERB模板
修改app.rb文件，添加路由处理：
require 'sinatra'
get '/' do
@name = 'Sinatra ERB'
erb :index
end
这里的erb :index表示渲染views目录下的index.erb模板文件。@name是一个实例变量，可以在ERB模板中直接访问。
ERB模板语法
ERB模板使用<% %>和<%= %>两种标签：
<% %>：用于执行Ruby代码，不输出结果<%= %>：用于执行Ruby代码并输出结果
例如，在模板中循环输出一个数组：
<ul>
<% ['Apple', 'Banana', 'Cherry'].each do |fruit| %>
<li><%= fruit %></li>
<% end %>
</ul>
运行应用后访问 http://localhost:4567，你将看到使用ERB模板渲染的动态页面。
Haml模板引擎集成
Haml是一种简洁的模板语言，它使用缩进来表示HTML结构，大大减少了代码量。要在Sinatra中使用Haml，需要先安装haml gem。
安装Haml依赖
修改Gemfile，添加haml依赖：
gem 'haml'
运行bundle install安装依赖：
bundle install
创建Haml模板文件
在views目录下创建一个haml_example.haml文件：
%html
%head
%title Sinatra Haml Example
%body
%h1 Hello, #{@name}
%p Current time: #{Time.now.strftime("%Y-%m-%d %H:%M:%S")}
%ul
- ['Apple', 'Banana', 'Cherry'].each do |fruit|
%li= fruit
在Sinatra应用中使用Haml模板
修改app.rb，添加Haml模板路由：
get '/haml' do
@name = 'Sinatra Haml'
haml :haml_example
end
Haml模板语法
Haml的基本语法规则：
- 使用缩进来表示HTML元素的嵌套关系
- 以
%开头的行表示HTML标签，标签名后面可以跟属性 -开头的行表示Ruby代码，不输出结果=开头的行表示Ruby代码，输出结果#表示id属性，.表示class属性，例如%div#content.container会生成<div id="content" class="container"></div>
访问 http://localhost:4567/haml，你将看到使用Haml模板渲染的页面。
Slim模板引擎集成
Slim是另一种简洁的模板引擎，它比Haml更加精简，渲染速度也更快。要在Sinatra中使用Slim，需要安装slim gem。
安装Slim依赖
修改Gemfile，添加slim依赖：
gem 'slim'
运行bundle install安装依赖：
bundle install
创建Slim模板文件
在views目录下创建一个slim_example.slim文件：
html
head
title Sinatra Slim Example
body
h1 Hello, #{@name}
p Current time: #{Time.now.strftime("%Y-%m-%d %H:%M:%S")}
ul
- ['Apple', 'Banana', 'Cherry'].each do |fruit|
li= fruit
在Sinatra应用中使用Slim模板
修改app.rb，添加Slim模板路由：
get '/slim' do
@name = 'Sinatra Slim'
slim :slim_example
end
Slim模板语法
Slim的语法与Haml类似，但更加简洁：
- 不需要使用
%来标识HTML标签 - 使用缩进来表示嵌套关系
-开头的行表示Ruby代码，不输出结果=开头的行表示Ruby代码，输出结果#和.分别表示id和class属性，例如div#content.container会生成<div id="content" class="container"></div>
访问 http://localhost:4567/slim，你将看到使用Slim模板渲染的页面。
三种模板引擎对比
为了帮助你选择适合项目的模板引擎，下面对ERB、Haml和Slim进行简单对比：
| 模板引擎 | 语法复杂度 | 代码量 | 渲染速度 | 学习曲线 |
|---|---|---|---|---|
| ERB | 简单 | 较多 | 中等 | 平缓 |
| Haml | 中等 | 较少 | 较快 | 适中 |
| Slim | 简洁 | 最少 | 最快 | 稍陡 |
- ERB：适合Ruby初学者，语法与HTML类似，容易上手，社区资源丰富。
- Haml：适合追求代码简洁的开发者，减少了HTML标签的冗余，提高开发效率。
- Slim：适合对性能有较高要求的项目，语法最为简洁，渲染速度也最快。
高级应用：布局模板
在实际项目中，我们通常会使用布局模板来统一页面的结构，如导航栏、页脚等。Sinatra支持布局模板，下面以ERB为例演示如何创建和使用布局模板。
创建布局模板
在views目录下创建layout.erb文件：
<!DOCTYPE html>
<html>
<head>
<title><%= @title || 'Sinatra App' %></title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/">Sinatra Templates</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="/">ERB</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/haml">Haml</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/slim">Slim</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-4">
<%= yield %>
</div>
<footer class="bg-light py-3 mt-5">
<div class="container text-center">
<p>© <%= Time.now.year %> Sinatra Templates Example</p>
</div>
</footer>
</body>
</html>
使用布局模板
Sinatra默认会使用views目录下的layout.erb作为布局模板。在布局模板中，<%= yield %>会被替换为具体的页面内容。
修改之前的模板文件，移除重复的HTML结构，例如修改index.erb：
<h1>Hello, <%= @name %></h1>
<p>Current time: <%= Time.now.strftime("%Y-%m-%d %H:%M:%S") %></p>
<ul>
<% ['Apple', 'Banana', 'Cherry'].each do |fruit| %>
<li><%= fruit %></li>
<% end %>
</ul>
同样修改haml_example.haml和slim_example.slim，移除重复的HTML结构。
重新启动应用，访问各个路由，你将看到统一的页面布局。
总结
本文介绍了如何在Sinatra中集成和使用ERB、Haml和Slim三种模板引擎，包括模板文件的创建、基本语法和实际应用。通过本文的学习，你应该能够根据项目需求选择合适的模板引擎，并熟练运用它们构建动态Web页面。
三种模板引擎各有特点，ERB简单直观，Haml和Slim则更加简洁高效。在实际开发中，你可以根据团队熟悉程度和项目需求来选择合适的模板引擎。
希望本文对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言讨论。同时也欢迎点赞、收藏和关注，获取更多关于Sinatra和Ruby Web开发的实用教程。
下期预告：我们将介绍Sinatra的中间件系统，探讨如何通过中间件扩展Sinatra应用的功能。敬请期待！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
