我试图复制this example但没有成功。我想使用mustache
模板添加列表,如下所示:
<ul>
<amp-list width=auto
height=100
layout=fixed-height
src="/assets/popular.json">
<template type="amp-mustache"
id="amp-template-id">
<li>
<a href={{url}}>{{title}}</a>
</li>
</template>
</amp-list>
</ul>
我的/assets/popular.json
文件是:
{
"items": [
{
"title": "amp-carousel",
"url": "https://ampbyexample.com/components/amp-carousel"
},
{
"title": "amp-img",
"url": "https://ampbyexample.com/components/amp-img"
},
{
"title": "amp-ad",
"url": "https://ampbyexample.com/components/amp-ad"
},
{
"title": "amp-accordion",
"url": "https://ampbyexample.com/components/amp-accordion"
}
]
}
但我无法让它工作,json
中的值未在模板中被替换,我收到此错误:
Missing URL for attribute 'href' in tag 'a'
我不知道为什么价值{{url}}
没有被json
的内容正确替换。
我已经添加了必要的scripts
。
答案 0 :(得分:7)
最近我一直在从 Jekyll 迁移到 Hugo ,并且遇到了同样的问题。以下是两者的解决方案。
现在解决了,问题是我使用jekyll
,因此标记{{tag}}
被解释为liquid tag
。我解决了它写这样的代码:
<ul>
<amp-list width=auto
height=100
layout=fixed-height
src="/assets/popular.json">
<template type="amp-mustache"
id="amp-template-id">
<li>
<a href="{% raw %}{{url}}{% endraw %}">{% raw %}{{title}}{% endraw %}</a>
</li>
</template>
</amp-list>
</ul>
更新:我写了more detailed explanation
<ul>
<amp-list width=auto
height=100
layout=fixed-height
src="/assets/popular.json">
<template type="amp-mustache"
id="amp-template-id">
<li>
<a class="card related" id={{"{{id}}"}} {{ printf "href=%q" ""{url}}" | safeHTMLAttr }}>
{{"{{title}}"}}
</a>
</li>
</template>
</amp-list>
</ul>