Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Our site has many different ERB templates, each containing HTML code that should go in the middle of a document. But the code at the start and end of each page will always be the same. It would be a shame to have to replicate the same HTML head elements and CSS stylesheet link across every ERB template file in our app. That's why Sinatra offers a better way. We can move the shared outer wrapper code to a single ERB file, called a layout. Then we can embed any of the templates we need within the layout. We get the same wrapper code on every page of our site, but we only need one copy of the code.
We just set up our welcome.ERB
template as a proper HTML document.
0:00
And added a reference
to its CSS stylesheet.
0:05
As a result, our welcome page
looks much more stylish but
0:08
our other templates are still unstyled.
0:11
It looks like we'll have to make those
same changes in our other templates.
0:15
Or will we?
0:19
Our site has many different ERB templates,
0:21
each containing HTML code that should
go in the middle of a document.
0:23
But the code at the start and
end of a page will always be the same.
0:27
It would be a shame to have to replicate
the same HTML head elements and
0:31
CSS stylesheet link across every
ERB template file in or out.
0:34
That's why Sinatra offers a better way.
0:39
We can move the shared [INAUDIBLE] code
to a single ERB file called a layout.
0:40
Then we can embed any of the templates
we need within the layout.
0:45
We get the same wrapper code
on every page of our site.
0:48
But we only need one copy of the code.
0:51
Let's move our new header
code to a layout file so
0:54
we can have CSS styling
on every page of our app.
0:56
A Sinatra layout is really
just another erb template.
1:00
The only difference is in the way it's
used layout files reside in the views
1:03
directory with all the others and they
have a .erb extension like all the others.
1:07
So we'll just create a new file
within views called page.erb.
1:11
Then we'll go into our welcome.erb
file and cut the heading out.
1:20
Then we'll go back to welcome.erb and
cut out the footer text and
1:28
paste that into page.erb as well, making
sure that it's indented consistently.
1:33
Since there's no longer code surrounding
our welcome.erb template we should
1:43
probably go back and
un-indent the code there.
1:47
Then we can safely close
the welcome template.
1:50
Now we need to indicate where other
templates should be nested within
1:53
our layout.
1:56
For this app we're going to want our
templates inserted within the HTML
1:57
body element.
2:00
Because all our templates make up the body
of their respective HTML documents.
2:01
So we'll insert a line
between the body and
2:05
closed body tags and
add an ERB output tag.
2:07
Within that tag we're going
to use one keyword, yield.
2:13
This is the same keyword that sees
within a Ruby method to invoke a block.
2:17
Here it's invoking whatever ERB template
is being nested within this one.
2:21
Finally anywhere in our app that we render
an ERB template we need to specify that
2:25
our layout should be used.
2:29
The ERB method takes an optional second
argument with a hash of options.
2:32
If you specify a key of layout and
the name of
2:40
the layout file is a symbol,
it would look for
2:44
a template with that name in your views
directory and treat it as a layout.
2:47
So if we specify layout
with the symbol of page,
2:51
it'll load page study ERB
from our view sub directory.
2:55
Whatever template you've
specified in the call to ERB
2:59
will be ramped within
the layout you specified.
3:02
Let's use our page.ERB layout on the
welcome and new templates for starters.
3:05
We'll restart our server.
3:11
And reload the root path.
3:16
There is no change.
3:17
So you can see that our CSS
styling is still applied.
3:19
Even though we remove that header
from the Welcome.erb template.
3:22
Now let's click the button
to go to the new page form.
3:26
And you can see the style sheet
is being applied here too.
3:29
If we view the HTML source for
3:33
that page, you can see the HTML
from our new .ERB template.
3:35
And if we expand the head element,
we'll see the link to the style sheet.
3:43
That comes from the page .ERB layout
3:49
our template code is being
embedded within the layout code.
3:51
Now we could go through the rest of our
app finding all the calls to the ERB
3:55
method and specify that they should
use the Is the page .ERB layout.
3:58
But since we only have one layout for
our entire app,
4:04
we may as well make it the default.
4:06
That way, it'll automatically be
applied around every template,
4:08
even if we don't specify a layout.
4:11
An apps default layout is loaded
from a file named layout.ERB.
4:14
So we can just go to our page .ERB
file and rename it to layout .ERB.
4:18
Then we can go back to our app code and
remove the references to the page layout.
4:29
Layout .ERB should now be used by default.
4:39
Every time we were under
an ERB template on our app.
4:42
Let's restart the server.
4:45
And give it a try.
4:51
We can visit the welcome page
in the new wiki page form.
4:52
And CSS styling will still be applied.
4:58
We'll now also see styling when
viewing a page or when editing it.
5:01
Any template we render will still get
the headers from our layout above
5:06
the template code.
5:10
You need to sign up for Treehouse in order to download course files.
Sign up