Question

我正在编写一个带有HTML页面的Sinatra应用程序。我创建了一个加载到每个页面的.htm标题。这是标题的代码以及我如何将其加载到每个页面中：

标题

<html>
  <head>
    <link type="text/css" rel="Stylesheet" href="/stylesheets/center.css" />
  </head>
  <body>
    <div>
      <div style="height:80%">
        <div style="height:75%">
        </div>
        <div style="height:25%;">
          <a href="/" style="padding-right:20px;padding-left:20px;vertical-align:bottom;">Home</a>
          <a href="/page1" style="padding-right:20px;padding-left:20px;">Page 1</a>
          <a href="/page2" style="padding-right:20px;padding-left:20px;">Page 2</a>
          <a href="/page3" style="padding-right:20px;padding-left:20px;">Page 3</a>
          <a href="/page4" style="padding-right:20px;padding-left:20px;">Page 4</a>
          <a href="/page5" style="padding-right:20px;padding-left:20px;">Page 5</a>
          <a href="/page6" style="padding-right:20px;padding-left:20px;">Page 6</a>
          <div style="90%;">
          </div>
      </div>
      <div style="height:10%">
        <hr>
      </div>
    </div>
  </body>
</html>

索引

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/stylesheets/background.css">
  </head>
  <body>
    <div>
      <iframe name='header' id="header" src="header" frameborder="0" border="0" cellspacing="0" width="100%"></iframe>
    </div>
    "Something is coming!!"
  </body>
</html>

我的web.rb文件对每个页面都有以下内容：

get '/page2' do
  send_file 'views/page2.html'
end

但是，使用此当前设置。当我点击链接时，它会在＆＃34;标题＆＃34;中加载整个新页面。区域。我希望它能加载整个新页面。我是Sinatra和网络编程的新手。关于它为什么会在标题区域加载而不是替换页面的任何想法都会非常有用。

谢谢！

Answer 1

您好像想要使用erb或haml等模板。

他们有布局的概念，这意味着你可以创建一个布局文件。

对于erb，您可以创建一个名为layout.erb

的文件

$cat views/layout.erb
<html>
  <head>
     somethings
  </head>
  <body>
    your navigation
    <div id="content">
      <%= yield %>
    </div>
  </body>
<html>

现在创建像index.erb这样的视图

$cat views/index.erb
<span>Something is coming!!</span>

您可以使用erb代替send_file

进行渲染

get '/page2' do
  erb :index
end

现在发生的是您的布局引擎会处理它并将您的视图与您的布局相结合。如此简单的解释说明他们会将您的视图复制到布局中<%= yield %>标记所在的位置。

我建议查看views的sinatra文档。

标题链接加载到“标题”区域

1 个答案: