javascript - Jade/Pug mixin 扩展

Question

我开始在工作中使用 Jade，但遇到了一个问题，在 Google 上找不到答案。

我想写一个这样的mixin:

mixin menu(...MenuList) 
  ul.main-menu
    each item in MenuList
      li: a(href='##{item.toLowerCase()}.html')= item  

此 mixin 对于单名称链接(如 +menu('Contacts', 'FAQ'))效果很好，但不适用于多词链接(如 +menu('Contact))我们”，“我们的价格”)。

我试着写一些类似的东西:

li: a(href='##{item.toLowerCase().replace(' ', '_')}.html')= item  

或者:

li: a(href='##{item.toLowerCase(function(x){ return x.replace(' ', '_')})}.html')= item

但对我来说没有任何作用。也许是缺乏 JS 技能，但如果有人能帮助我，我会很高兴。

Answer 1

问题在于您传递 href 的方式。这是一个工作的和 Codepen.io link

mixin menu(...MenuList)
  - var patt = /\s+/i; // This checks for whitespace.

  ul.main-menu
    each item in MenuList
     if patt.test(item)
       - var newitem = item.split(' ').join('_');

       li: a&attributes({ href: '#' + newitem.toLowerCase() + '.html' })= item
     else
       li: a&attributes({ href: '#' + item.toLowerCase() + '.html' })= item

+menu('my-list', 'Contact Us', 'Hello', 'Our Price', 'My Price')

// result
- my-list
- Contact Us
- Hello
- Our Price
- My Price