logo标签列表

在所有页面上显示横幅和菜单导航栏

ruby-on-railsruby-on-rails-3
4

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

在Views文件夹中，我添加了一个新的.html.erb页面，并添加了一个jQuery导航菜单栏。这个页面还有一个横幅。我想将其保留为所有其他页面的基础页面（类似于.NET中的Master Page）。

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

如何做到这一点？我正在使用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>

内容代码.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个回答
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>

作为默认设置，这将在所有页面上呈现，并且每个页面的内容（例如您的new.html.erb）将呈现在yield块中。
这意味着application.html.erb是放置通用布局内容的正确位置，例如菜单和横幅，这些内容应出现在所有页面上。
如果您想要一些针对每个页面略有不同的内容（例如不同的横幅），可以在application.html.erb文件中添加特殊的<%= yield(:banner) if content_for?(:banner) %>。然后，您将能够在每个页面中添加一个横幅块，如下所示：
# 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´布局模板（它甚至不是一个部分，因此您无法这样做）。
我的application.html.erb文件包含了jQuery菜单代码，就像我在原始帖子中展示的那样。但是在内容页面中它并不可见。我已经更新了我正在使用的内容页面代码，请查看编辑过的原始帖子。我的内容页面代码需要做哪些更改？ - RKh
1
首先，如果可以避免的话，不应该有内联JavaScript！将其提取到您的´app/assets/javascripts´目录中的js文件中。CSS也是如此。其次，如果您的application.html.erb文件中没有关联的yield(:stylesheets)，则无法使用content_for :stylesheets。对于content_for :MainContent也是如此。Rails将整个页面（所有content.html.erb）放入yield（无参数）块中的application.html.erb文件中，因此无需将其包装在MainContent块中。 - jokklan
我尝试了你提供的所有建议，但仍然无法正常工作。当我直接打开内容页面时，既没有显示横幅也没有菜单。我还想知道是否需要包含任何渲染行来告诉内容页面从哪里呈现布局？ - RKh
布局默认为 application.html.erb。您可以在控制器中更改它，通过在顶部调用 layout "another_layout"，这将适用于控制器中的所有操作。或者您可以在一个操作中调用 render "some_action", :layout => "another_layout"，以仅更改该操作的布局。 - jokklan
你是想要实现什么功能吗？如果需要帮助，我们可以开始聊天 :) - jokklan
1

你可以按照这里的说明使用嵌套布局。

我需要将这个横幅和菜单栏移动到application.html.erb吗？ - RKh
如果您想在“主页面”中拥有横幅和菜单，那么是的。 - Tom Naessens
所有的内容页面也会放在Layout文件夹中吗？ - RKh
我猜，我不知道你究竟想做什么：如果你希望整个应用程序都使用横幅和菜单，那么是的，请将其放在应用程序中，并让其他模板从该应用程序页面继承。如果你只想让应用程序的一部分有菜单，请将其放在一个单独的html.erb文件中，并让你想要拥有菜单和横幅的页面扩展该文件。它非常灵活！ - Tom Naessens
好的，我已经将横幅和菜单移动到application.html.erb文件中。我看到了你发送的链接，但不知道如何在其他页面定义内容区域并在application.html.erb中访问横幅和菜单。 - RKh
显示剩余5条评论
0

从5:18开始观看， 根据我所读的，我认为这可能是你正在寻找的东西。 希望它有所帮助。

Railscast #328

此外，这里有一个链接到Twitter的Bootstrap导航栏，你可能想要了解一下。它将在所有页面上显示横幅和导航栏，并且设置起来相当容易。

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

-1

关于这个主题，最好的资料之一是书籍《The Rails View》的开头部分。以下是链接: The Rails View

这对于content_for辅助方法非常有帮助，一旦你知道如何使用它，它将立即成为你的好朋友。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接