3

我正在使用Assemble，它目前使用 Handlebars 1.3。在我的模板中，我使用带有Picturefill的图片元素，它使用当前的规范<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 中。或者有另一种推荐的方法吗？

ps：我已经阅读了有关使用{{> picture this}} here的信息，但我不确定它是否以及如何在一页中处理多张图片（以及一个部分中的多个变量）。另外，我尝试使用parseJSON block helper，但这种语法有点尴尬，而且比我上面描述的更冗长，所以我想知道是否有更有效的方法来做这样的事情。

4

1 回答 1

0

如果将此与 assemble 处理数据文件的方式相结合，则可以有一个名为pictures.jsonor的数据文件pictures.yaml（取决于您要如何管理数据）。

在pictures.json：

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

然后你的车把文件，你可以使用上面提到的语法调用部分：

{{> 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。

于 2014-06-30T14:06:15.880 回答