在玉器中修改一个inheritance的模板

我对模板和模板中存在的一些更复杂的function是新颖的。 截至目前,我正在使用节点和玉build立一个模拟投资组合网站。 我有一个由所有其他玉文件inheritance的布局。 它的布局中包含了所有的通用站点导航。 我想要突出显示用户目前在哪个网站的部分。我目前正在通过具有一个独特的js文件,当用户在一个特定的部分时加载。 这个js文件将添加一个类到列表项中,在这个列表项中将突出显示添加到导航栏中。

我的问题,我是否需要创build和加载这些js文件来完成这个? 有一个更好的方法来获得一个通用的导航在一个模板中,同时拥有一个独特的荧光笔吗?

如果突出显示没有function目的(如可访问性),或者使用URI片段(hashtags)完成,则最好将其留给JS。

如果您的导航突出显示每页,您可以在nodejs / jade中设置它,例如:

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

在你的玉模板中,你可以做这样的事情:

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

无论你作为res.renderlocals对象传递什么属性,都可以在Jade中作为variables使用。 在jade中,当使用tag(attr=value, attr2=value,...)格式时,您可以访问JS语法和公开的variables。

只要你设置一个variables(例如navHighlight基于它进入的路线),就可以使用它来设置标签的class属性。只要确保使用空格分隔类名(如果有多个类)。