我是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>
Code of 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" %>
答案 0 :(得分: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为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上了解有关布局的更多信息(fx如何使用多个布局)
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'布局模板(它甚至不是部分的,所以你不能这样做。)
答案 1 :(得分:1)
您可以使用here所述的嵌套布局。
答案 2 :(得分:0)
从5:18开始观看, 从我读过的内容来看,我认为这就是你可能正在寻找的东西。 希望它有所帮助。
此处还有Twitter的bootstrap导航栏链接,您可能需要查看。它将在所有页面上显示横幅和导航栏,并且相当容易设置。
答案 3 :(得分:-1)
本主题的最佳来源之一是The Rails View一书的开头。这是链接:The Rails View
这对content_for
辅助方法很有帮助,一旦您知道如何使用它,它将立即成为您的朋友。