是否可以从 amp-list 中的 JSON 渲染 AMP 组件?
Is it possible to render AMP components from JSON inside of amp-list?
我正在创建一个 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. I only even found out about using the triple braces to render raw HTML by seeing it used in an example 中没有看到任何关于此的信息,没有相应的文档。
"triple-mustache" 的输出经过清理,只允许使用以下标签: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
.
我正在创建一个 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. I only even found out about using the triple braces to render raw HTML by seeing it used in an example 中没有看到任何关于此的信息,没有相应的文档。
"triple-mustache" 的输出经过清理,只允许使用以下标签: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
.