Member Avatar for germainelol1

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 ? '' : '') + '.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?

i.e

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.

  • 2 Contributors
  • 1 Reply
  • 404 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

A concise fix and explanation for the layout vs. page-content issue (ties to 's symptom and 's Express hint).

Jade/Pug uses template inheritance: the layout declares named blocks and child pages extend that layout and fill those blocks. To guarantee that a page’s HTML lands inside a specific container (for example, a site header), the layout must contain the header markup and a block placeholder where page content belongs; the page must use extends and define that block. This is the canonical way to keep header markup in the layout while letting pages supply their inner content. (docs.w3cub.com)

Example pattern (layout, page, and a small Express middleware to make a user variable available to templates):

/* layout.pug */
doctype html
html
  head
    title #{title}
    link(rel='stylesheet', href='/css/style.css')
  body
    header.navbar
      .container
        a.brand(href='/') Control Panel
        if user
          button#btn-logout.btn.btn-primary Sign Out
        else
          a.btn.btn-primary(href='/login') Login
    main
      block content
    block scripts
/* home.pug */
extends layout

block content
  .container
    p Hello
    include account
    include modals/alert
    include modals/confirm

append scripts
  script(src='/js/views/home.js')
  script(src='/js/controllers/homeController.js')
/* Express middleware */
app.use((req, res, next) => {
  res.locals.user = req.user || null;
  next();
});
app.get('/', (req, res) => res.render('home', { title: 'Home' }));

Passing user via res.locals (or via the object given to res.render) enables the if user / else check in the layout. Also use append/prepend for script blocks so page-specific scripts end up where the layout expects them rather than accidentally breaking the header/content structure. (expressjs.com)

Troubleshooting notes: verify the header is actually inside body, confirm the child file uses extends layout plus a block (top-level, unindented content in an extending template has nowhere to go), and avoid including the same navbar in both layout and page (that creates duplicated or "floating" content).

Member Avatar for Member #949455

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.

I think you are getting really close to solving this by yourself

Read this and follow the instructions:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.