Reputation: 21
I'm using amp-list together with amp-mustache templates to display a list of blog articles on my AMP page, like this example:
<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>
However, I need the first item in my list to appear different than the others. I have slightly different html for the first item. Is there some kind of loop variable available that I can use to do something like this:
<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>
Or is there another way to accomplish this?
Thanks!
Upvotes: 2
Views: 560