Question

我试图在Expressjs中为应用程序做一个简单的菜单。我希望将“活动”类设置为您当前访问的页面的菜单列表项... 我在Express.js中有一个Jade视图文件，代码如下：

li(class = path === "/id/admin" ? "active" : "")
  a(href='/id/admin', title='admin') Admin
li(class = path === "/id/admin/services" ? "active" : "")
  a(href='/id/admin/services', title='services') Services
li(class = path === "/id/admin/staff" ? "active" : "")
  a(href='/id/admin/staff', title='staff') Staff

这不会起作用，因为slug的“id”部分应该是动态的，具体取决于登录的客户端。另一个问题是一些slu ,,如“/ id / admin / staff “，最后可能包含额外的slu ,,例如：”/ id / admin / staff / new“或”/ id / admin / staff / staff-id / edit“。

我认为我需要某种正则表达式来匹配slug的特定部分。喜欢：如果slug包含短语“/ services”somwhere，则激活菜单中的列表项。但我不知道我是如何写这个并融入Jade的观点的。

你可以帮帮我吗？

Answer 1

如果你只是想做一个简单的正则表达式来验证部分路径，那么一个非常基本的正则

li(class = path.match(/^\/id\/admin$/) ? "active" : "") //string has to end with "admin"
  a(href='/id/admin', title='admin') Admin
li(class = path.match(/^\id\/admin\/services/) ? "active" : "")
  a(href='/id/admin/services', title='services') Services
li(class = path.match(/^\/id\/admin\/staff/) ? "active" : "")
  a(href='/id/admin/staff', title='staff') Staff

将完全匹配管理员，然后另外两个它只是在路径字符串的开头查找这些模式。

这也假设您正在将路径从Express传递到Jade模板以进行渲染。

快捷菜单中的活动菜单项

1 个答案: