Question

我正在创建一个ASP.NET MVC应用程序，以转换内容管理系统中的内容并将其呈现为AMP兼容页面。 CMS具有称为列表的概念，该列表将特定模板的内容项分组在一起，每个模板都可以具有不同类型（纯文本，布尔值，HTML等）的自定义字段。

使用amp-list组件，您可以使用三重花括号而不是双花括号来呈现原始HTML，例如{{{htmlProperty}}}。这通常可以正常工作，但是即使在服务器端修改它们以使用正确的amp-img语法，我也会遇到剥离图像的问题。

我具有以下放大器清单组件：

<amp-list layout="fixed-height" height="500" src="https://jsonblob.com/api/jsonBlob/56eb207e-e2c3-11e8-a8cb-676415a24d50" single-item>
    <template type="amp-mustache">
        {{#contentItems}}
        <section>
            <header>
                {{title}}
            </header>
            <div>
                {{{content}}}
            </div>
        </section>
        {{/contentItems}}
    </template>
</amp-list>

我有以下示例JSON：

{
  "totalRecords": 2,
  "pageSize": 0,
  "pageNumber": 1,
  "items": {
    "contentItems": [
      {
        "row": 1,
        "title": "What is your favorite sport?",
        "content": "<p><strong>Hockey</strong></p>"
      },
      {
        "row": 2,
        "title": "What is your favorite country?",
        "content": "<p>Canada</p><amp-img src=\"http://www.flagblvd.com/wp-content/uploads/2015/09/canadian-flag-medium.png\" alt=\"\" layout=\"fill\"></amp-img>"
      }
    ]
  }
}

请注意，title属性是纯文本，而content属性是HTML。加载页面后，第一个内容项中的<strong>标记中的粗体起作用，但是如果您在浏览器的开发人员控制台中进行检查，则会发现输出中省略了amp-img。请查看此jsfiddle进行演示。

有什么办法可以使其正常工作？在official documentation中我什么都没看到。我什至没有看到有关在an example中使用三元括号来呈现原始HTML的信息，而没有相应的文档。

Answer 1

将“三重胡子”的输出清理为仅允许以下标签：a，b，br，caption，colgroup， code，del，div，em，i，ins，li，mark，{{ 1}}，ol，p，q，s，small，span，strong，{{1} }，sub，sup，table，tbody，time，td，th，thead， tfoot，tr。

For More Information

是否可以从amp-list内的JSON渲染AMP组件？

1 个答案: