如何将数组从 pug 传递到 pug mixin？答案

【问题标题】：How to pass array from pug to pug mixin?如何将数组从 pug 传递到 pug mixin？
【发布时间】：2018-07-02 16:48:39
【问题描述】：

我有一个 pug 模板，其中包含一个数组，我想将它传递给一个用于填充一些 schema.org (json) 标记的 mixin。

代码如下：

profile.pug

include ../components/bio-seo

- var person = {}
- person.title = "Name, title of person"
- person.url = "https://page.url..."
- person.image = "https://images.url..."
- person.links = ["https://link.one...","https://link.two..."]

+bio-seo(person)

然后在 mixin 中，我有：

mixin.pug

mixin bio-seo(person)
  title= title
  link(rel='canonical', href=url)

  script(type="application/ld+json").
    {
      "@context": "http://schema.org",
      "@type": "Person",
      "image": "#{person.image}",
      "url": "#{person.url}",
      "sameAs": #{person.links}
    }

一切都很好，除了“sameAs”链接数组。编译后得到：

"sameAs": https://link.one,https://link.two

而不是我需要的，这是

"sameAs": ["https://link.one","https://link.two"]

【问题讨论】：

顺便说一句，这一切都在 HTML 文档的头部。
"sameAs": [!{person.links.map(link => '"' + link.toString() + '"')}] 这似乎可行，但是.... dam！我真的需要这一切吗？
^ 这是我知道的最简洁的方法
为什么不能只是!{person.links}？甚至person.links?
!{...} 是未转义的字符串插值，它只是将其包含的任何值打印为字符串。数组标记（括号、引号）不是数组值的一部分。每当我必须像这样使用 js 时，我喜欢使用单独的 .pug 文件中的代码块将其编写为函数。这样你就可以只包含你的函数文件并通过编写类似printArray(person.links)的东西来保持你的哈巴狗更干净

标签： html arrays pug interpolation

【解决方案1】：

您可以将JSON.stringify 与Unescaped interpolation !{} 结合使用，以将您的数组作为字符串：

"sameAs": !{JSON.stringify(person.links)}

【讨论】：