We just set up our welcome.ERB template as a proper HTML document.

And added a reference to its CSS stylesheet.

As a result, our welcome page looks much more stylish but

our other templates are still unstyled.

It looks like we'll have to make those same changes in our other templates.

Or will we?

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 a 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 or out.

That's why Sinatra offers a better way.

We can move the shared [INAUDIBLE] 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.

Let's move our new header code to a layout file so

we can have CSS styling on every page of our app.

A Sinatra layout is really just another erb template.

The only difference is in the way it's used layout files reside in the views

directory with all the others and they have a .erb extension like all the others.

So we'll just create a new file within views called page.erb.

Then we'll go into our welcome.erb file and cut the heading out.

Then we'll go back to welcome.erb and cut out the footer text and

paste that into page.erb as well, making sure that it's indented consistently.

Since there's no longer code surrounding our welcome.erb template we should

probably go back and un-indent the code there.

Then we can safely close the welcome template.

Now we need to indicate where other templates should be nested within

our layout.

For this app we're going to want our templates inserted within the HTML

body element.

Because all our templates make up the body of their respective HTML documents.

So we'll insert a line between the body and

closed body tags and add an ERB output tag.

Within that tag we're going to use one keyword, yield.

This is the same keyword that sees within a Ruby method to invoke a block.

Here it's invoking whatever ERB template is being nested within this one.

Finally anywhere in our app that we render an ERB template we need to specify that

our layout should be used.

The ERB method takes an optional second argument with a hash of options.

If you specify a key of layout and the name of

the layout file is a symbol, it would look for

a template with that name in your views directory and treat it as a layout.

So if we specify layout with the symbol of page,

it'll load page study ERB from our view sub directory.

Whatever template you've specified in the call to ERB

will be ramped within the layout you specified.

Let's use our page.ERB layout on the welcome and new templates for starters.

We'll restart our server.

And reload the root path.

There is no change.

So you can see that our CSS styling is still applied.

Even though we remove that header from the Welcome.erb template.

Now let's click the button to go to the new page form.

And you can see the style sheet is being applied here too.

If we view the HTML source for

that page, you can see the HTML from our new .ERB template.

And if we expand the head element, we'll see the link to the style sheet.

That comes from the page .ERB layout

our template code is being embedded within the layout code.

Now we could go through the rest of our app finding all the calls to the ERB

method and specify that they should use the Is the page .ERB layout.

But since we only have one layout for our entire app,

we may as well make it the default.

That way, it'll automatically be applied around every template,

even if we don't specify a layout.

An apps default layout is loaded from a file named layout.ERB.

So we can just go to our page .ERB file and rename it to layout .ERB.

Then we can go back to our app code and remove the references to the page layout.

Layout .ERB should now be used by default.

Every time we were under an ERB template on our app.

Let's restart the server.

And give it a try.

We can visit the welcome page in the new wiki page form.

And CSS styling will still be applied.

We'll now also see styling when viewing a page or when editing it.

Any template we render will still get the headers from our layout above

the template code.