以前用Sinatra写过API，没写过页面。在看《Jump Start Sinatra》这本书，有一节介绍如何使用erb模板来套页面，感觉挺方便。把里面的例子记录如下。
假如做一个网站，有三个基本页面：Home, About, Contact. 在主程序main.rb里，可以这样写：
require 'sinatra' set :bind, '0.0.0.0' get '/' do erb :home end get '/about' do erb :about end get '/contact' do erb :contact end
当用户访问网站根目录时，调用:home模板。当访问/about时，调用:about模板。当访问/contact时，调用:contact模板。模板位于主程序的views子目录下，文件名分别是home.erb, about.erb, contact.erb. 我们看下home.erb内容：
<p>Welcome to this website that's all about the songs of the great Frank Sinatra.</p> <img src="/images/sinatra.jpg" alt="Frank Sinatra">
显然这不是一个完整的HTML页面。这是因为，Sinatra在调用:home模板时，会先调用一个名为:layout的默认模板，由这个默认模板再载入:home模板。views子目录下有一个layout.erb文件，内容如下：
<% title="Songs By Sinatra" %> <!doctype html> <html lang="en"> <head> <title><%= title %></title> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1><%= title %></h1> <nav> <ul> <li><a href="/" title="Home">Home</a></li> <li><a href="/about" title="About">About</a></li> <li><a href="/contact" title="Contact">Contact</a></li> </ul> </nav> </header> <section> <%= yield %> </section> </body> </html>
主要技巧在这个文件里。erb模板有2种基本标签，<% … %> 这里面放置ruby语法，例如变量赋值。<% title=”Songs By Sinatra” %> 这里就是设置title变量的值。<%= … %> 表示引用变量的值。<%= title %> 这里就在HTML里回显title变量的值。
<%= yield %> 这里表示再次执行传进来的模板，例如:home。ruby的yield是语言设计里的一个关键函数，它的参数是个block，执行这个block并返回结果。这样，Sinatra在执行erb时，会先调用layout的默认模板（如果有），再由这个默认模板引用其他模板。
Sinatra默认将模板文件放在views子目录下，静态文件（例如JS、CSS、HTML）放在public子目录下，当然这些目录名是可以通过配置更改的。我们看到home.erb里，引用了一个图片sinatra.jpg，它就放在public/images/子目录下。在layout.erb里引用了一个样式表styles.css，它放在public/子目录下。
对这个小站点，目录结构如下：
./main.rb
./views/home.erb
./views/contact.erb
./views/about.erb
./views/layout.erb
./public/styles.css
./public/images/sinatra.jpg
main.rb, layout.erb, home.erb内容前面已展示了，补充一下样式表的内容：
h1 {
color: #903;
font: 32px/1 Helvetica, Arial, sans-serif;
}
header h1 {
font-size: 40px;
line-height: 80px;
background: transparent url(/images/logo.png) 0 0 no-repeat;
padding-left: 84px;
}
p{
font: 13px/1.4 Helvetica, Arial, sans-serif;
}
最后，网站效果图看起来如下：
