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)