javascript - Jade conditional based on page url? - Stack Overflow

admin管理员组

文章数量:1315810

Is it possible to setup a jade conditional in my layout template based on page path? Is there a page path variable? I am looking to do things like:

if page = "/about"
  link(rel='stylesheet', href='css/about')
else
  link(rel='stylesheet', href='css/main')

Where this is part of the layout template. Where and how do I define the variables to drive this?

Is it possible to setup a jade conditional in my layout template based on page path? Is there a page path variable? I am looking to do things like:

if page = "/about"
  link(rel='stylesheet', href='css/about')
else
  link(rel='stylesheet', href='css/main')

Where this is part of the layout template. Where and how do I define the variables to drive this?

• javascript
• node.js
• pug

Share Improve this question Follow asked Apr 24, 2015 at 21:45 user2022284user2022284 44311 gold badge99 silver badges2424 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Yes, it is possible:

- var page = window.location.pathname

if page === "/about"
   link(rel='stylesheet', href='css/about.css')
else
   link(rel='stylesheet', href='css/main.css')

Please note that above snippet assumes the template is executed in browser environment. If this is not the case, you can get the pathname using the language that you are using and pass it to the template as a datum. As an example, if you are using the Express framework, path property of the request object returns the path part of the URL.

I would set the path dynamically with req.path in express:

res.locals.path = req.path;
res.render('about');

and then using path in jade file:

if path === "/about/"
   link(rel='stylesheet', href='css/about.css')
else
   link(rel='stylesheet', href='css/main.css')

Depends on your setup

In express:

res.locals.cssPath = 'css/about.css';
res.render('about');

Jade: Not sure about the syntax here since i don't use jade but you have access to locals

link(rel='stylesheet', href=cssPath)

本文标签： javascriptJade conditional based on page urlStack Overflow