Search code examples
javascriptnode.jspugharp

Jade Includes conditionals to check the actual page


Is there a way to check which page are you in Jade and include something (a partial page or a specific CSS Style) based in that page? For example:

If I am in homepage, then include just the HOMEPAGE-head.jade

Else - include the NORMAL-head.jade

Here is an in context example:

doctype html
html
  body
    if HOMEPAGE
      include ./includes/HOMEPAGE-head.jade
    else
      include ./includes/NORMAL-head.jade

    h1 My Site
    p Welcome to my super lame site.
    include ./includes/foot.jade

Thank you!


Solution

  • There are two approaches I know of.

    Option A: 2 layouts and extends

    Make two layouts: layout.jade and layout-homepage.jade, changing the include line accordingly. Most of your pages will extends layout, but index.jade will extends layout-homepage.

    Option B: variables block

    in layout.jade:

    - var HOMEPAGE = false;
    block variables
    doctype html
    html
      body
        if HOMEPAGE
          include ./includes/HOMEPAGE-head.jade
        else
          include ./includes/NORMAL-head.jade
    
        h1 My Site
        p Welcome to my super lame site.
        include ./includes/foot.jade
    

    Then in index.jade:

    block variables
      - HOMEPAGE = true;
    h1 This is your home page template...
    

    All the rest of your pages will default to HOMEPAGE = false so they don't need any changes to make this approach work.