Show banner and menu navigation bar on all pages

I am new to Rails. I use Aptana Studio 3 to write a small application.

In the Views folder, I added a new .html.erb page and added a jQuery navigation menu bar. There is also a banner on this page. I want to save this as a base page (like the main page in .NET) for all other pages.

I want all other pages to automatically display the banner and menu bar at the top.

How to do it? I am using Rails 3.2.

Edited

Application Code .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 Code .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
source share
4 answers

Rails uses layouts as master templates. By default, you will have one layout template called application , which you can find in app/views/layouts/application.html.erb . If you look at this file, you will see something like:

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

By default, this will be displayed for all pages, and the contents of each page (fx your new.html.erb ) will be displayed in the yield block.

This means that application.html.erb is the right place, but as a rule, the creation of layouts, such as menus and banners, that should be displayed on all pages.

If you want to have something that changes slightly for each page (fx different banners), you can add a special <%= yield(:banner) if content_for?(:banner) %> to your application.html.erb file. Then you can add a block on each of your pages for such a banner:

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

Hope this answers your question?

You can also learn more about layouts (fx, how to use more than one layout) at http://guides.rubyonrails.org/layouts_and_rendering.html

Edit: The correct way to implement content.html.erb

The content of content.html.erb should be:

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

So no content_for :MainContent block and not display the layout template 'application.html.erb' (it is not even partial, so you cannot do this).

+3
source

You can use nested layouts as described here .

+1
source

See 5:18, from what I read, I think this is what you can look for. Hope this helps.

Railscast # 328

There is also a link to Twitter bootstrap navbar that you might want to watch. It will display a banner and navigation bar on all pages and will be quite easy to set up.

http://twitter.imtqy.com/bootstrap/components.html#navbar

0
source

One of the best sources for this topic is the start of The Rails View. Here is the link: View Rails

It really helps with the helper method content_for , which will immediately become your friend as soon as you learn how to use it.

-1
source

Source: https://habr.com/ru/post/1482748/


All Articles