Jade HTML - Adding to the layout.jade body

Question

I have the following layout.jade code

!!!
html
    head
        title= title
        link(rel='stylesheet', href='/vendor/bootstrap.min.css')
        link(rel='stylesheet', href='/css/style.css')
        script(type='text/javascript')
            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
    body!= body

And the following page which appears once you are logged in:

div.navbar.navbar-fixed-top
    div.navbar-inner
        div.container-fluid
            ul#global-nav.nav.pull-left
                a(href='#').brand Control Panel
            button#btn-logout.btn.btn-primary
                i.icon-lock.icon-white
                | Sign Out

include account
include modals/alert
include modals/confirm

script(src='/js/views/home.js')
script(src='/js/controllers/homeController.js')

The div's on the home.jade page are creating a header to put the control panel title into and an option to sign out of your account. I would like to take these div's and put them on the home screen even if you aren't logged in. I have successfully done this by simply moving them to the layout.jade page.

My problem then is that Control Panel appears outside of the header. So the home.jade page does not simply add onto the code in the body of my layout.jade page as I thought it would, any ideas on how to do that?

ie

layout.jade
body
    div.header

home.jade
    p hello

I assumed this kind of code would simply create a home page with the body

body
    div.header
        p hello

inside the header.

Ideally I would like this pseudo code to be in place and for the Sign Out text to only appear when logged in and for a Login functionality to be in place when you are not logged in as eventually I would like the main login container in the middle to pop out from the button.

Answer 1

You need to look into Jade blocks. Here is a good tutorial on the subject, thorough and short , and the Jade Github readme regarding the matter.

You'll use a combination of "include" and "block" to create a mixture of files that can work the way you want. Just be careful to make sure you're alert to the file structure and directory that your includes are in relative to the file you are calling them from.