翡翠/ Pugミックスインエクステンション

Question

私は仕事で翡翠を使い始めましたが、私はGoogleで答えが見つからないという問題を発見しました。

私は、このようなミックスインを書きたい：

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

このミックスインは+menu('Contacts', 'FAQ')のような単一の名前リンクに適していますが、+menu('Contact Us', 'Our Price')のようなマルチワードリンクでは動作しません。

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

か：：

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

が、何も私の作品

は、私のような何かを書くことを試みました。たぶんそれはJSのスキルの欠如ですが、誰かが私を助けることができたら嬉しいです。

Answer 1

問題はhrefで渡す方法に問題がありました。ここには有効なものがあります​​

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