我正在创建一个ASP.NET MVC应用程序,以转换内容管理系统中的内容,并将其呈现为符合AMP的页面。CMS有一个称为列表的概念,它将特定模板的内容项组合在一起,每个内容项都可以有不同类型的自定义字段(纯文本、布尔值、HTML等(
amp列表组件允许您通过使用三个大括号而不是双大括号(例如{{{htmlProperty}}}
(来呈现原始HTML。这通常是有效的,但我遇到了剥离图像的问题,即使我在服务器端修改它们以使用正确的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演示。
有什么办法让它正常工作吗?我在官方文件中没有看到这方面的任何信息。我甚至只是在一个没有相应文档的例子中看到了使用三个大括号来呈现原始HTML。
"三胡子"的输出经过净化,只允许使用以下标签: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
。
有关更多信息