JADE / PUG：无法使用两个mixins

Question

我在我的玉文件中使用mixin。 要求是有两个div。 如果我只创建一个div它渲染，但如果我使用两个mixin来呈现内容我得到错误：“undefined jade_mixins.selectedImage-card不是一个函数”

这是玉代码：

.container
        .allThumbs
          h2 All 
          .row
           mixin allImage-card(photo)
            .col-lg-4.col-md-4.col-sm-4.col-xs-6
              .imgThumb
                img.thumb(src=photo.URL, alt="")

        for photo in _allPhotos
          +allImage-card(photo)

        .allThumbs
          h2 Selected
          .row
            mixin selectedImage-card(photo)
            .col-lg-4.col-md-4.col-sm-4.col-xs-6
              .imgThumb
                img.thumb(src=photo.URL, alt="")

        for photo in _selected
          +selectedImage-card(photo)

Answer 1

错误是你的缩进。 将代码放入编译器会导致以下错误：

  > 24|             mixin selectedImage-card(photo)
--------------------^
    25|             .col-lg-4.col-md-4.col-sm-4.col-xs-6
    26|               .imgThumb
    27|                 img.thumb(src=photo.URL, alt="")

Mixin selectedImage-card declared without body

在声明mixin之后给出一个额外的领先空间，它会起作用。

理想情况下，您应该在文件的开头定义mixins，并在评论中建议的稍后阶段引用它们。

Answer 2

将mixin代码放在​​缩进之外。

例：

mixin allImage-card(photo)
   .example 
      !{photo.name}

mixin selectedImage-card(photo)
   .test 
      !{photo.name}


.container
    -var _allPhotos = [{'name':'john'}, {'name': 'fred'}]
    -var _selected = [{'name':'luka'}, {'name': 'lisa'}]

    for photo in _allPhotos
      +allImage-card(photo)

    .allThumbs
      h2 Selected
      .row
    for photo in _selected
      +selectedImage-card(photo)