如何在循环中包含 mixin 并在 pug 中获取数据

Question

我有以下 mixins，其中包含 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。

如有任何帮助，我们将不胜感激。

Answer 1

您不能将 mixin 结果存储在 javascript 变量中。解决方法是将混入存储在 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}.

如何在循环中包含 mixin 并在 pug 中获取数据

How to include mixins in a loop and fetch data in pug

html

foreach

for-loop

mixins

pug