2

次の例のように、 amp-listをamp-mustacheテンプレートと一緒に使用して、AMP ページにブログ記事のリストを表示しています。

<amp-list
  width="auto"
  height="100"
  layout="fixed-height"
  src="/data/blog-list.json"
>
  <template type="amp-mustache">
    <div class="blogitem blogitem--horizontal">
      <a href="{{url}}">{{title}}</a>
      ...
    </div>
  </template>
</amp-list>

ただし、リストの最初の項目を他の項目とは異なるように表示する必要があります。最初の項目の html が少し異なります。次のようなことを行うために使用できるループ変数の種類はありますか:

<amp-list
  width="auto"
  height="100"
  layout="fixed-height"
  src="/data/blog-list.json"
>
  <template type="amp-mustache">
    {{#if loop->first}}
      <div class="blogitem blogitem--vertical">
        <a href="{{url}}">{{title}}</a>
        ...
      </div>
    {{#else}}
      <div class="blogitem blogitem--horizontal">
        <a href="{{url}}">{{title}}</a>
        ...
      </div>
    {{/if}}
  </template>
</amp-list>

または、これを達成する別の方法はありますか?

ありがとう!

4

0 に答える 0