我如何将变量传递到Handlebars (v1.3 with Assemble)中的部分

How can I pass variables to a partial in Handlebars (v1.3 with Assemble)?

本文关键字：Assemble with v1 变量 Handlebars      更新时间：2023-09-26

我使用的是Assemble，目前使用的是Handlebars 1.3。在我的模板中，我使用pictufill的图片元素，它使用当前规范的<picture>语法:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="assets/img/responsive/example-xl.jpg" media="(min-width: 1000px)">
  <source srcset="assets/img/responsive/example-l.jpg" media="(min-width: 800px)">
  <source srcset="assets/img/responsive/example-m.jpg">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="assets/img/responsive/example-m.jpg" alt="An example responsive image">
</picture>

由于部分内容可能会发生变化(例如，我可能会添加媒体查询)，我希望能够轻松地在整个网站上更新此片段。我觉得局部的比较合适。例如，像这样:

{{> picture name="example" ext=".jpg" alt="Example image" }}

与这个部分

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="assets/img/responsive/{{name}}-xl{{ext}}" media="(min-width: 1000px)">
  <source srcset="assets/img/responsive/{{name}}-l{{ext}}" media="(min-width: 800px)">
  <source srcset="assets/img/responsive/{{name}}-m{{ext}}">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="assets/img/responsive/{{name}}-m{{ext}}" alt="{{alt}}">
</picture>

我的Handlebars版本有办法做到这一点吗?我知道这在Handlebars 2.0中是原生的，但不幸的是，我无法将其更新到该版本，因为它集成在Assemble中。或者有其他推荐的方法吗?

注。:我在这里读过关于使用{{> picture this}}的文章，但我不确定是否以及如何在一个页面中使用多个图片(以及一个部分中的多个变量)。此外，我尝试使用parseJSON块助手，但语法有点笨拙，比我上面描述的更啰嗦，所以我想知道是否有更有效的方法来做这样的事情。

如果您将此与汇编处理数据文件的方式结合起来，您可以拥有一个名为pictures.json或pictures.yaml的数据文件(取决于您想如何管理数据)。

In pictures.json:

{
  "example": {
    "name": "example",
    "ext": ".jpg",
    "alt": "Example image"
  },
  "another": {
    "name": "another",
    "ext": ".png",
    "alt": "Another example image"
  }
}

然后是handlebars文件，您可以使用上面提到的语法调用部分:

{{> picture pictures.example}}
{{> picture pictures.another}}

现在picture部分的上下文是传入的json对象，所以你可以一般地引用片段:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="assets/img/responsive/{{name}}-xl{{ext}}" media="(min-width: 1000px)">
  <source srcset="assets/img/responsive/{{name}}-l{{ext}}" media="(min-width: 800px)">
  <source srcset="assets/img/responsive/{{name}}-m{{ext}}">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="assets/img/responsive/{{name}}-m{{ext}}" alt="{{alt}}">
</picture>

我希望这有助于我们组装更新到使用车把2.0。

相关文章：