how to pass variables between jade templates

TemplatesVariablesPug

Templates Problem Overview


I am using a template as a base, and want it to be aware of some variables set in the page that is using it...

File: template.jade

vars = vars || {some:"variables"}
!!! 5
head
    title vars.some

File: page.jade

vars = {some:"things"} //- this does not get used from within template.jade
extends template

I want the compiled page.jade to have a title "things"

Templates Solutions


Solution 1 - Templates

I find solution here

pass block with variables

template.jade:

!!!
html
  block vars
  head
      title #{pageTitle} - default www title
  body

page.jade

extends template
block vars
  - var pageTitle = 'Home'

Solution 2 - Templates

You can use blocks:

template.jade:

!!! 5
head
    block title
        title variables

page.jade:

extends template
block title
    title things

Else you have to define the variables in your script (for example express). As far as I know, variables can only be passed around via includes, but not upwards to the layout (template.jade in your case).

Solution 3 - Templates

I thought that blocks wouldn't work for me because I needed to use the variable in multiple places.

// base.jade
pageTitleVar = "Parent's Title"
!!!
title !{pageTitleVar}
h1 !{pageTitleVar}

Turns out you can actually specify the same block twice in the parent template and whatever the child template passes to it gets duplicated.

// base.jade
pageTitleVar = "Parent's Title"
!!!
title
  block pageTitleBlock
    !{pageTitleVar}
h1
  block pageTitleBlock
    !{pageTitleVar}

// child.jade
extends base
pageTitleVar = "Child's Title"
block pageTitleBlock
   !{pageTitleVar}

Blocks FTW

Solution 4 - Templates

A great and commented solution to add title like this:
"My Project - The Page".

Or just this:
"My Project"

template: template.jade

doctype 5
html(lang="en")
head
	//- setting the page title to be dynamic
	block vars
		- var defaultTitle = "My Project"
		- var pageTitle = pageTitle
	title #{defaultTitle}#{pageTitle}

some page: page.jade

extends base
//- custom page title
block append vars
    pageTitle = " - The Page"

Solution 5 - Templates

How about using template includes?

// vars.jade
- var name = "Chris"
#{ nick = "StackOverflow"  }


// page.jade
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1= title
    include vars
    p Welcome to #{title} #{name} #{nick}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBilly MoonView Question on Stackoverflow
Solution 1 - TemplatesRoman Rhrn NesterovView Answer on Stackoverflow
Solution 2 - TemplatesrokaView Answer on Stackoverflow
Solution 3 - TemplatesJesse HattabaughView Answer on Stackoverflow
Solution 4 - TemplatesromulobastosView Answer on Stackoverflow
Solution 5 - TemplatesChris JeongView Answer on Stackoverflow