代码之家 › 专栏 › 技术社区 › Danny Lewandowski

Jade图像库使用extends、mixins和includes不工作

photo-gallery image-gallery mixins pug include

Danny Lewandowski · 技术社区 · 10 年前

我正在尝试使用mixin和includes构建一个Jade图像库,但无法正常工作。这是我的设置:

布局模板。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')

图像库页面。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')

图像库包括。jade(include文件被拉入图像库页面,带有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,它们不会编译。

我做错了什么?非常感谢。

1 回复 | 直到 10 年前

Jhey 10 年前

就我个人而言,我会将一个文件专用于我的混合或单个混合,并将它们包含在我希望使用它们的文件的顶部。

然后,您可以在必要时调用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