Jade模板条件类nodejs express.js [英] jade template conditional class nodejs expressjs

问题描述

我的头有一个玉模板文件，并使用引导标记.根据用户所在的页面，导航栏需要将.active类添加到该导航项.避免这种长代码的最佳方法是什么?

I have a jade template file for my header and uses bootstrap markup. Depending on what page the user is on, the navigation bar needs to add class .active to that nav item. What is the best way to do this avoiding long code like this.

header.jade

if nav=='home'
   li.active
      a(href="/") Home
else
   li
      a(href='/') Home
if nav=='about'
   li.active
      a(href='/about') About
else
   li
      a(href='/about') About

路线

router.get('/about', function(req, res) {
   res.render('about', { nav:'about' });
});

请注意，如果标头中还有更多链接，它将变得更长.是否有更好的方法将活动"类添加到正在查看的页面?

Notice how if there are many more links in the header, it will get much longer. Is there a better method to add class 'active' to the page that is being viewed?

谢谢泰勒

推荐答案

您可以创建一个处理列表项呈现的混合.这样，您的逻辑代码就不必重复:

You could create a mixin that handles the rendering of a list item. This way your logic code does not have to be repeated:

mixin header-item(name, url)
  if name.toLowerCase() == nav
    li.active
      a(href=url)= name
  else
    li
      a(href=url)= name

+header-item('Home', '/')
+header-item('About', '/about')

这篇关于Jade模板条件类nodejs express.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！