4

我是 Rails 的新手。我正在使用 Aptana Studio 3 编写一个小型应用程序。

在 Views 文件夹中，我添加了一个新的 .html.erb 页面并添加了一个 jQuery 导航菜单栏。这个页面也有一个横幅。我想将此保留为所有其他页面的基本页面（如 .NET 中的母版页）。

我希望所有其他页面自动在顶部显示横幅和菜单栏。

这个怎么做？我正在使用 Rails 3.2。

已编辑

application.html.erb 的代码：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>

      <script type="text/javascript" src="..\Libraries\jquery.min.js"></script>
      <script type="text/javascript">
            $(document).ready(function(){
                    $('li.headlink').hover(
                        function() { $('ul', this).css('display', 'block'); },
                        function() { $('ul', this).css('display', 'none'); });
                });   
      </script>
      <style type="text/css" rel="stylesheet">
            /* General */
            #cssdropdown, #cssdropdown ul { list-style: none; }
            #cssdropdown, #cssdropdown * { padding: 0; margin: 0; }

            /* Head links */
            #cssdropdown li.headlink { width: 220px; float: left; margin-left: -1px; border: 1px black solid; background-color: #e9e9e9; text-align: center; }
            #cssdropdown li.headlink a { display: block; padding: 15px; }

            /* Child lists and links */
            #cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
            #cssdropdown li.headlink:hover ul { display: block; }
            #cssdropdown li.headlink ul li a { padding: 5px; height: 17px; }
            #cssdropdown li.headlink ul li a:hover { background-color: LightBlue; color:Black }

            /* Pretty styling */
            body { font-family: verdana, arial, sans-serif; font-size: 0.8em;}
            #cssdropdown a { color: white; } #cssdropdown ul li a:hover { text-decoration: none; }
            #cssdropdown li.headlink { background-color: Blue;}
            #cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; }
      </style>  
</head>
<body>
<%= yield %>

        <div id="divMain">
            <div id="divHeader">
                <img src="..\Images\W.png">                 
            </div>
            <div id="divMenu">
                <ul id="cssdropdown">
                <li class="headlink">
                    <a href="#">Task</a>
                     <ul>
                      <li><a href="#">Add New</a></li>
                     </ul>
                     </li>
                      <li class="headlink">
                      <a href="#">Reports</a>    
                         <ul>
                      <li><a href="#">Report</a></li>
                     </ul>
                 </li>
                </ul>               
            </div>
        </div>

<div id="content"><%= content_for?(:content) ? yield(:content) : yield %></div>         
</body>
</html>

Content.html.erb 的代码

<% content_for :stylesheets do %>
  <div id="divLogin">

  </div>
<% end %>

<% content_for :MainContent do %>
  <div id="divMain">

  </div>
<% end %>

<%= render :partial  => "layouts\application.html.erb" %>
4

4 回答 4

3

Rails 使用布局作为主模板。默认情况下，您将拥有一个名为 的主布局模板application，您可以在app/views/layouts/application.html.erb. 如果您查看此文件，您会看到如下内容：

 # app/views/layouts/application.html.erb
 <html>
   <head>
     ...
   </head>
   <body>
     ...
     <div id="content">
       # Your page content will be inserted here:
       <%= yield %>
     </div>
     ...
   </body>
 </html>

默认情况下，这将为所有页面呈现，并且每个页面的内容（fx your new.html.erb）将呈现在yield块中。

这意味着这application.html.erb是放置一般布局内容的正确位置，例如应该出现在所有页面上的菜单和横幅。

如果您想让每个页面的内容有所不同（fx 不同的横幅），您可以<%= yield(:banner) if content_for?(:banner) %>在application.html.erb文件中添加特殊内容。然后，您将能够在每个页面中为这样的横幅添加一个块：

# app/views/some_resource/some_page.html.erb
<% content_for(:banner) do %>
  # insert page specifik banner here
<% end %>
# normal content for page
...

我希望这回答了你的问题？

您还可以在http://guides.rubyonrails.org/layouts_and_rendering.html上阅读有关布局的更多信息（如何使用多个布局）

编辑：正确的实施方式content.html.erb

的内容content.html.erb应该是：

# What is this? This has nothing to do with stylesheets?
<% content_for :stylesheets do %>
  <div id="divLogin">

  </div>
<% end %>

<div id="divMain">

</div>

所以不要content_for :MainContent阻塞也不要渲染“application.html.erb”布局模板（它甚至不是部分的，所以你不能这样做）。

于 2013-05-31T10:41:09.087 回答
1

您可以使用此处描述的嵌套布局。

于 2013-05-25T19:01:49.893 回答
0

从 5:18 开始观看，根据我所读到的内容，我认为这就是您可能正在寻找的内容。希望能帮助到你。

Railscast #328

这里还有一个指向 Twitter 引导导航栏的链接，您可能想查看它。它将在所有页面上显示横幅和导航栏，并且相当容易设置。

http://twitter.github.io/bootstrap/components.html#navbar

于 2013-05-29T05:43:29.393 回答
-1

该主题的最佳来源之一是 The Rails View 一书的开头。这是链接：Rails 视图

这对content_for辅助方法很有帮助，一旦你知道如何使用它，它就会立即成为你的朋友。

于 2013-06-03T17:22:58.833 回答