时间戳

首页 > 解决方案 > 如何在循环中包含 mixins 并在 pug 中获取数据

html - 如何在循环中包含 mixins 并在 pug 中获取数据

问题描述

我有以下包含svg文件的混合。

mixin gift_icon
   svg ..

mixin leat_icon
   svg ..

mixin pyramid_icon
   svg ..

在我的index.pug档案中。我正在尝试mixins通过循环获取上面的内容。

    .grid-container
        - 
            grid_items = [
                {icon: +leaf_icon, title: "Title 01"},
                {icon: +gift_icon, title: "Title 02"},
            ]

        each item in grid_items
            .grid
                figure
                    item.icon
                a(href="")= item.title

但该mixin部分未正确获取。它只是创建一个class.

输出

任何帮助将非常感激。

标签： htmlfor-loopforeachpugmixins

解决方案

您不能将mixin结果存储在 javascript 变量中。一种解决方法可能是将 mixin 存储在 javascript 对象中。

- 
  var mixins = {
    gift_icon: '<span>svg</span>',
    leat_icon: '<span>svg</span>',
    pyramid_icon: '<span>svg</span>',
  }

.grid-container
  - 
    grid_items = [
      {icon: mixins.gift_icon, title: "Title 01"},
      {icon: mixins.leat_icon, title: "Title 02"},
      {icon: mixins.pyramid_icon, title: "Title 03"},
    ]

each item in grid_items
  .grid
    figure !{item.icon}
  a(href="")= item.title

顺便说一句：要获得作为转义 html 输出的变量，请使用figure !{item.icon}.

推荐阅读