CODEWITHSUNDEEP
javascriptnode.jsexpresspug
Matt Wilkinson
Matt Wilkinson

Reputation: 590

Modification of an inherited template in jade

I am new-ish to jade templates and some of the more complex feature that exist in the templates. As of right now, I am building a mock portfolio site using node and jade. I have a layout that is inherited by all other jade files. The layout has all of the universal site navigation inside of it. I am wanting to highlight what section of the website the user is currently in. I am currently doing this by having a unique js files that will load when the user is in a particular section. This js file will add a class on to the list item in which will add the highlighting to the navigation.

My question, do I need to create and load these js files in order to accomplish this? Is there a better way to get a universal navigation in one template while having a unique highlighter?

Upvotes: 1

Views: 48

Answers (1)

Mihai Potra
Mihai Potra

Reputation: 858

If the highlighting does not have functional purposes (e.g. accessibility), or it's done using URI fragments (hashtags), it might be better to leave it to the JS.

If your navigation highlight is per page, you could set it up in nodejs/jade, for example:

app.get('/about', (req, res) => {
  var locals = {};
  locals.navHighlight = 'about';
  res.render('about', locals);
});

And in your jade template you could do something like this:

ul.navigation
  li(class=(navHighlight=== 'about' ? 'highlight' : '')) About Me
  li(class=(navHighlight=== 'blog' ? 'highlight' : '')) My Blog

Whatever you pass as properties to the locals object of res.render, is available in Jade as variables. And in jade, when using the tag(attr=value, attr2=value,...) format you have access to JS syntax and the exposed variables.

As long as you set a variable (e.g. navHighlight based on which route it enters, you can use that to set the class attribute of the tag. Just make sure to separate the class names with spaces, if you have multiple classes.

Upvotes: 2

Related Questions