Можно ли рендерить AMP компоненты из JSON внутри amp-list? - PullRequest
Новая
       5

Можно ли рендерить AMP компоненты из JSON внутри amp-list?

0 голосов
/ 07 ноября 2018

Я работаю над созданием приложения 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 для демонстрации.

Есть ли способ заставить это работать должным образом? Я ничего не видел в официальной документации 1020 *. Я даже узнал об использовании тройных скобок для рендеринга необработанного HTML, увидев его в примере без соответствующей документации.

1 Ответ

0 голосов
/ 08 ноября 2018

Вывод «тройной усы» очищается, чтобы разрешить только следующие теги: 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.

Для получения дополнительной информации

...