Rails Guide — Part 8 View Files Continued
In our last guide, we took a look at how to manually add a view file in our Rails application, how to modify the application layout, and implement basic CSS to it. This week we will discuss how to make our own layout file and incorporate partials.
Starting up the Rails server and navigating to localhost:3000/home/latest, we can see this is what we have so far:
Suppose our restaurant is expanding to Canada and we want our Canadian part of the website to have a different layout in order to distinguish it from the regular website, instead of the food categories on the left hand side, now we want each item to be horizontal below the search bar. This is where we can create our own custom layout.
Following the general Rails design principle, we will create a new route first:
Afterwards, we will create the locations controller and the canada action:
Then we need to make the locations folder and a canada.html.erb file inside of it:
Restart the Rails server (because we changed our routes), and going to localhost:3000/ca, this is what you should see:
To make our own layout file, we will create a canada.html.erb file inside of the views/layouts folder. The naming of canada for our layout file here is irrelevant, we could have named it whatever we want. It does not have to be the same as the controller action.
Most of the content in the canada.html.erb layout will be the same as the application.html.erb layout. We can copy and paste everything from the latter to our new file.
On line 4, I’ve changed the text in the <title> tag. Line 9, instead of linking to the application.css file, we will link to canada.css (which we will create shortly). Inside of the <header>, I’ve grouped the search bar and the button into a <div>, and move the <nav> list from main to the header.
The next step is adding the canada.css file in the assets/stylesheets folder, otherwise Rails will complain this file does not exist. The css file can be blank for now.
The last step is to actually bring in our new layout file from our locations controller. As you can see, it’s as simple as calling the layout method, and passing to it as argument the name of the layout file inside of the views/layouts folder we want to use:
Now if we go to localhost:3000/ca, this is what we should see:
Now we can move on to adding styles to the canada.css file.
The nav unordered list is no longer part of the <main>, it’s now part of the <header>. I’ve added display property to make each item flow horizontally. For styling of the <main>, we only have a single child element which is <%= yield %>, thus I’ve removed the flex property to it.
The end result should look similarly to this:
We are doing great so far! If you look at our application and canada layout files, you will notice although they are difference, a lot of the codes remain the same: they have the same search bar, a navigation list, and a copyright footer. This is exactly where partials are helpful.
A partial may sound cryptic at first, but in a Rails app, it’s nothing more than some HTML codes that we extract into its own file, and whenever we need to use or reuse these codes, we can use a Rails view helper method named render. Let’s see how this works.
Inside of the views folder, let’s create a folder named shared. This is where we will put our partials. This step is only for better file organization, the partial files can be placed directly inside of the views folder.
From the shared folder, we create a _nav.html.erb file, notice the file name MUST start with an underscore to signalize that it’s a partial file. I’ve chosen to call it nav, but any other name is valid. Then all we need to do is put our <nav> content into it:
Now from our application and canada layout files, and not just those layout files, we can call <%= render %> to display the partial in ANY of the view files. It’s also important to remember when you call render, you don’t need to write the underscore. Since our partial is inside of the shared folder, our relative path is ‘shared/nav’, if it was placed in the views folder, we can simply use <%= render ‘nav’ %>
Refreshing both the home/latest and ca pages, we can see both are still working perfectly. The styles for the partials are still in effect:
We can achieve the same for our footer:
Now our application and canada layout files are looking much cleaner! And when we need to add more items to the nav list or change or footer, we only need to do it in our partials now, instead manually updating those changes in every page where we had those codes.
Next week we will look at the various view helper methods in Rails and how we can use them to generate HTML codes for us! See you!
