使用 extends、mixins 和 includes 的 Jade 图片库不起作用

Question

我正在尝试使用 mixins 和 include 构建一个 Jade 图片库，但无法正常工作。这是我的设置：

layout-template.jade（基本布局模板）

block vars
doctype html
  (head and all it's meta tags)...
block body
      (body content)...
block main-content
      h1 This is the default layout             
block footer
      script(src='/js/min/app-min.js')

image-gallery-page.jade（包含图片库的页面）

extends ../../__JADE/_layout-template.jade

block vars
    - var pageTitle = 'New page title'

block body
    body

block main-content
     (main page content...)

     include ../../__JADE/_include-view-original.jade
     +originalImage('http://placehold.it/800x400', 'Original Image 1')
     +originalImage('http://placehold.it/800x400', 'Original Image 2')
     +originalImage('http://placehold.it/800x400', 'Original Image 3')

image-gallery-include.jade（使用 mixin 将包含文件拉入图像库页面）

.row
    .large-10.columns
         .text-center Click for larger view
              .owl-carousel.owl-theme.popup-gallery#owl-carousel-original-article
                   mixin originalImage(originalLink, originalTitle)
                        a(href="#{originalLink}" title="#{originalTitle}")
                            img(src="#{originalLink}")

mixin 中的原始图像 1-3 出现了，但不在 owl-carousel div 中，我需要它们在其中。如果我在 include 下缩进 mixin，它们不要编译。

我做错了什么？谢谢！

Answer 1

就我个人而言，我会为我的 mixins 或个人 mixins 专门创建一个文件，并将它们包含在我希望使用它们的文件的顶部。

然后您可以在必要时简单地调用 mixin。

目前，您有以下内容；

.row .large-10.columns .text-center Click for larger view .owl-carousel.owl-theme.popup-gallery#owl-carousel-original-article mixin originalImage(originalLink, originalTitle) a(href="#{originalLink}" title="#{originalTitle}") img(src="#{originalLink}")

但改为；

mixin originalImage(originalLink, originalTitle) a(href="#{originalLink}" title="#{originalTitle}") img(src="#{originalLink}") .row .large-10.columns .text-center Click for larger view .owl-carousel.owl-theme.popup-gallery#owl-carousel-original-article

会有不同。

但是，如果您选择这样做，您可以稍微改组并得到类似的结果；

extends ../../__JADE/_layout-template.jade
include ../../__JADE/_mixins.jade

block vars
    - var pageTitle = 'New Page Title'
block body
    body
block main-content
    (main page content...)
    .row
        .large-10.columns
            .text-center Click for larger view
                .owl-carousel.owl-theme.popup-gallery#owl-carousel-original-article
                    +originalImage('http://placehold.it/800x400', 'Original Image 1')
                    +originalImage('http://placehold.it/800x400', 'Original Image 2')
                    +originalImage('http://placehold.it/800x400', 'Original Image 3')

此外，您可以定义一个映射并循环遍历它们以调用您的混合宏以节省更多代码。

像下面这样的东西可能会起作用；

- var images = ['http://placehold.it/800x400', 'http://placehold.it/800x400', 'http://placehold.it/800x400']
each val, index in images
    +originalImage(val, 'Original Image ' + index)

最后一点可能需要稍微调整一下，因为它不在我的脑海中，但希望这会对你有所帮助。

我尝试将我的 Jade 文件分成许多可管理的模块和片段，以便于维护。随着项目的增长，可能会考虑为不同的标记组件创建文件夹。例如，拥有一个用于不同混音的文件夹，并能够为项目的不同部分包含特定的混音。

@jh3y

使用 extends、mixins 和 includes 的 Jade 图片库不起作用

Jade image gallery using extends, mixins and includes not working

image-gallery

include

mixins

photo-gallery

pug