PugsJs 添加额外的类到 mixin

Question

如何向已有类的混入添加一些额外的类。这是我的代码，我正在尝试添加第三个参数，但它不起作用。

mixin item(title, url, extraClasses)
    mixin linkA
        a.nav-link(href=url)= title
    li.nav-item.mr-auto.#{extraClasses}(class=title === activeMenu ? 'active' : '')
        +linkA

ul.navbar-nav.ml-auto
    each val in ['Menu1', 'Menu2', 'Menu3', 'Menu4']
      if val !=='Menu1'      
        +item(val, href='/' + val.toLowerCase() + '.html', 'test1')
      else
        +item(val, href='/' + val.toLowerCase() + '.html', 'test2')

现场观看： https://codepen.io/Bizboss/pen/zYYwoZP?editors=1011

Answer 1

您可以使用 &attributes mixin 语法轻松地将额外的类传递给 mixin 中的元素。

这是一个简化的例子：

mixin item(title, url, isActive)
  li(class= isActive ? 'active' : '')&attributes(attributes)
    a(href= url) #{title}

ul
  +item('Home', '/', true).myClass
  +item('About', '/about', false)
  +item('Contact', '/contact', false).foo.bar

这将呈现：

<ul>
  <li class="active myClass">
    <a href="/">Home</a>
  </li>
  <li>
    <a href="/about">About</a>
  </li>
  <li class="foo bar">
    <a href="/contact">Contact</a>
  </li>
</ul>

PugsJs 添加额外的类到 mixin

PugsJs add extra classes to mixin

navigation

pug

PugsJs 添加额外的 类 到 mixin

PugsJs add extra classes to mixin

navigation

pug

PugsJs 添加额外的类到 mixin