是否可以从amp-list内的JSON渲染AMP组件? [英] Is it possible to render AMP components from JSON inside of amp-list?

问题描述

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

I am working on creating an ASP.NET MVC application to transform content from a content management system and render it as an AMP-compliant page. The CMS has a concept called lists, which groups together content items of a particular template, each which can have custom fields of different types (plain text, boolean, HTML, etc.).

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

The amp-list component allows you to render raw HTML by using triple curly braces rather than double, for example {{{htmlProperty}}}. This works in general, but I'm running into an issue with it stripping out images, even if I modify them server-side to use proper amp-img syntax.

我有以下放大器清单组件:

I have the following amp-list component:

<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:

I have the following sample 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 进行演示.

Note that the title property is plain text while content is HTML. When the page is loaded, the bold from the <strong> tag in the first content item works, but you'll notice the amp-img is omitted from the output if you inspect in your browser's developer console. Please see this jsfiddle for a demonstration.

有什么办法可以使其正常工作?在官方文档中，我什么都没有看到.我什至在一个示例中看到了使用三括号来呈现原始HTML的信息， a>没有相应的文档.

Is there any way to get this to work properly? I didn't see anything about this in the official documentation. I only even found out about using the triple braces to render raw HTML by seeing it used in an example with no corresponding documentation.

推荐答案

"triple-mustache"的输出经过清理，仅允许以下标签:a，b，br，caption， colgroup，code，del，div，em，i，ins，li，mark，ol，p，q，，small，span，strong，sub，sup，table，tbody，time，td，th，thead，tfoot， tr，u，ul.

The output of "triple-mustache" is sanitized to only allow the following tags: a, b,br, caption, colgroup, code, del, div, em, i, ins, li, mark, ol, p, q, s, small, span, strong, sub, sup, table, tbody, time, td, th, thead, tfoot, tr, u, ul.

更多信息

这篇关于是否可以从amp-list内的JSON渲染AMP组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！