1

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!

hailton
  • 591
  • 1
  • 3
  • 15

3 Answers3

2

Alternatively you can structure your Jade to use inheritance to achieve what you want.

E.g.,

layout.jade:

doctype html
html
  body
    block header
    block content
      h1 My Site
      p Welcome to my super lame site.
    block footer
      include ./includes/foot.jade

homepage.jade:

extends ./layout.jade

block header
  include ./includes/HOMEPAGE-head.jade

normal.jade:

extends ./layout.jade

block header
  include ./includes/NORMAL-head.jade

And then have all your normal pages use normal.jade and your homepage to use homepage.jade.

dule
  • 17,798
  • 4
  • 39
  • 38
1

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.

Community
  • 1
  • 1
Peter Lyons
  • 142,938
  • 30
  • 279
  • 274
  • Thank you for the answer. But despite that idea of check the actual page. Can I have something like sections, just like in "Laravel Blade Template"? I mean, define the "header" or "top" section in master-template.jade and insert the "header" or "top" only in the page that I want it to appear? Can you give me some example of how to do it this way? Thank you – hailton Aug 04 '14 at 05:14
  • I cannot use the way you explain in you answer because I am using the Harp (static site generator and server) and It do not allow me to create the app.js. Here is the Blade example http://laravel.com/docs/templates – hailton Aug 04 '14 at 05:27
0

An option that I'd suggest is using separate layouts. It takes advantage of the system that Harp already has in place, and helps maintain the concept of "different content, different file." Using Harp, you can specify an explicit layout for any given page in the _data.json or _harp.json files.

From http://harpjs.com/docs/development/layout

Layouts other than _layout can be specified in a _data.json. This is useful if you need even finer control of Layouts, or if you want to name your Layout something other than _layout.

myapp.harp.io/
    |- _layout.ejs
    |- index.ejs
    |- about.md
    +- articles/
      |- _data.json
      |- _an-example-layout.ejs
      |- _another-one.jade
      |- article-one.md
      +- article-two.md 

Here, it’s possible to make article-one.md use _an-example-layout.ejs by specifying layout in the _data.json file in that folder:

{
  "article-one": {
    "layout": "_an-example-layout",
    "title": "Example Title"
  },
  "article-two": {
    "layout": "_another-one",
    "title": "Another Example Title"
  }
}

Now, each article will use the specified Layout.

If it's a minor difference you want to make and you can't justify having a completely separate template, you can also pass data through to the include if you use Harp's partial() function instead of Jade's include keyword. Then the logic for handling the different variable value would be in a single head.jade file. Your example might look like this.

foo.jade:

doctype html
html
  body
    != partial("./includes/head.jade", { page: bar })

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

head.jade should now have access to the page variable.

A third option can take advantage of the current object that Harp injects into the templates. If you're accessing //site.com/foo/bar, current.source === "bar" and current.path === ["foo", "bar"]. You can use this object to dynamically set class names, etc. You can read more about it here: http://harpjs.com/docs/development/current