Jade / Pug mixin扩展

Question

I've started to use Jade at work and I met a problem for which I couldn't find an answer to on Google.

I want write such a mixin:

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

This mixin works well for single name links like +menu('Contacts', 'FAQ') , but doesn't work for multi-word links like +menu('Contact Us', 'Our Price') .

I tried to write something like:

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

or:

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

but nothing works for me. Maybe it's the lack of JS skills, but I would be happy if somebody could help me.

Answer 1

The problem was with the way you pass in the href. Here's a working one and 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