Question

我是jade模板的新手，也是模板中存在的一些更复杂的功能。截至目前，我正在使用node和jade构建一个模拟投资组合网站。我有一个由所有其他玉文件继承的布局。布局中包含所有通用站点导航。我想要突出显示用户当前所在网站的哪个部分。我目前正在通过拥有一个独特的js文件来实现这一点，这些文件将在用户处于特定部分时加载。此js文件将在列表项中添加一个类，在该列表项中将突出显示添加到导航。

我的问题是，我是否需要创建并加载这些js文件才能实现此目的？是否有更好的方法在一个模板中获得通用导航，同时拥有独特的荧光笔？

Answer 1

如果突出显示没有功能目的（例如可访问性），或者使用URI片段（主题标签）完成，那么将它留给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

无论您将哪些属性传递给locals的{{1}}对象，都可以在Jade中作为变量使用。在jade中，当使用res.render格式时，您可以访问JS语法和公开的变量。

只要您根据输入的路由设置变量（例如tag(attr=value, attr2=value,...)，就可以使用它来设置标记的navHighlight属性。只需确保将类名与空格，如果你有多个类。

在jade中修改继承的模板

1 个答案: