3

現在 Handlebars 1.3 を使用しているAssembleを使用しています。私のテンプレートでは、現在の仕様構文を使用するPicturefillで picture 要素を使用しています。<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 2.0 のネイティブであることは知っていますが、残念ながら Assemble に統合されているため、そのバージョンに更新することはできません。または、これを行う別の推奨される方法はありますか?

{{> picture this}} ps: hereの使用について読んだことがありますが、1 ページに複数の画像 (および 1 つのパーシャルに複数の変数) がある場合に、それがどのように機能するかはわかりません。また、parseJSON ブロック ヘルパーを使用してみましたが、その構文は少しぎこちなく、上で説明したものよりも少し冗長なので、このようなことを行うためのより効率的な方法があるかどうか疑問に思っています。

4

1 に答える 1

0

これを assemble がデータ ファイルを処理する方法と組み合わせると、 (データをどのように管理したいかによって)pictures.jsonまたはという名前のデータ ファイルを持つことができます。pictures.yaml

で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 を使用するように更新されるまで、これが役立つことを願っています。

于 2014-06-30T14:06:15.880 に答える