Search code examples
expresspug

include template within jade's html

I would like to know how to 'include templateName' within a jade template if i am using the dot notation in jade to use actual html tags.

doctype html
html
  head
    link(rel='stylesheet', href='/stylesheets/header.css')
  body.
     <div class="logo-container">
            include someTemplate
     </div>

Doing the above example will display the text 'include someTemplate' and not the template itself.

Any ideas on how I can accomplish this?

Solution

  • The include won't work inside a Plain Text block as it's a Jade statement and not a JavaScript expression, so it would be easier for you to shift the Plain Text blocks line by line so you can use both:

    body
  | <div class="logo-container">
  include someTemplate
  | </div>

    The thing that makes this more complex is the wrapping <div class="logo-container">. This could also work if you have large chunks of raw HTML to output and don't want a lot of pipe characters:

    body
  div.
    (raw html goes here)
  .logo-container
    include someTemplate
  div.
    (more raw html goes here)

    If your template doesn't need jade/pug rendering (i.e. if it's just constant/static text) then you can use interpolation to output variables:

    body.
     <div class="logo-container">
            !{someTemplate}
     </div>

    This only works if you read the template file in your router and pass it to the template as a variable. There are more complicated ways to dynamically render this, but by then you're just better off using one of the methods above.