Layouts

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