Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Layout inheritance in jade

Layout inheritance in jade


If you don't know what jade is.
I am having problem with the template inheritance system.My file structure is like so

   |-- layout.jade
      |-- index.jade
      |-- product.jade
      |-- style.css

The problems is that when loading the product page which receives an id as param (localhost:3000/product/:id if not for the /id it would load just fine), although the Layout still extends correctly it does not load the stylesheet properly (the path is broken). I am doing half of it right though, in the index page of products the stylesheet loads just fine.


    link(rel='stylesheet', href='stylesheets/style.css')
Problem courtesy of: andrei


It's probably the relative path in your href. Digging around the express documentation, I'm finding that the most popular approach is to reference the stylesheet from the base of the site like this (notice the / preceding stylesheets):


This has the benefit of being easy, and working across routes of multiple depths (/about, /about/me, etc). However, it has the negative of not supporting app directory depth. For example, if you wanted to host your app at: http://yourserver/yourapps/yourapp this would be a problem. I don't know if you care about this or not, most of the examples for express certainly don't :-)

However, if you want to do this the right way, there is one example on the express github site: blog.

The approach here is to use a Middleware Component to grab the base url, and stuff it in the locals passed down to the layout view. Here's what your HTML would look like:

!!! 5
    title Blog
    link(rel='stylesheet', href=base + '/style.css')
    #container!= body

The important parts to check out if you require this approach are middleware/locals.js, app.js where the middleware component is wired up, and layout.jade where the base href is used.

Happy Coding!

Solution courtesy of: Justin Beckwith


View additional discussion.

This post first appeared on Node.js Recipes, please read the originial post: here

Share the post

Layout inheritance in jade


Subscribe to Node.js Recipes

Get updates delivered right to your inbox!

Thank you for your subscription