尝试实施 amp-mustache 时出错

Question

我正在尝试复制 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。

Answer 1

最近我从 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>

尝试实施 amp-mustache 时出错

Error trying to implement amp-mustache

json

jekyll

mustache

amp-html

amp-mustache

杰基尔

雨果