Preview

Start a free Courses trial
to watch this video

Layouts

5:12 with Jay McGavren

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.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

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.

You need to sign up for Treehouse in order to set up Workspace

Building Web Apps with Sinatra

Layouts

Related Discussions

Related Discussions