На AMP страницах по умолчанию css компонентов не работает - PullRequest
Новая
       6

На AMP страницах по умолчанию css компонентов не работает

0 голосов
/ 24 июня 2018

Код моего HTML-файла: 

 <!DOCTYPE html>
    <html ⚡="">
    <head>
      <meta charset="utf-8">
      <title>Amp</title>
      <link rel="canonical" href="">
      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
      <script async="" src="https://cdn.ampproject.org/v0.js"></script>
      <style amp-boilerplate=""></style>
      <script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp- 
                     carousel-0.1.js" async=""></script>
      <style amp-custom=""></style>
    </head>
    <body> 
      <header class="ampstart-headerbar">
             Amp pages
      </header>
    </body>
    </html>

Когда я открываю этот файл в своем браузере, style для header не внедряется. На страницах AMP Если я хочу задать собственный стиль, тогда мне нужно задать его во внутреннем стиле с атрибутом amp-custom, но почему стиль компонента AMP не внедряется? Я не могу понять, какая библиотека отсутствует в этом коде? Я исследую AMP впервые. Если есть еще предложения, о которых мне нужно позаботиться, пожалуйста, дайте мне знать.

1 Ответ

0 голосов
/ 24 июня 2018

Это способ определения amp-custom.

Попробуйте добавить CSS из файла ниже из строки 39 - 41. Это должно решить проблему.https://github.com/saichandu415/AMP-Ecommerce-Apsara/blob/master/Website/templates/landing.amp.html

<!doctype html>
  <head>
            <script custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" async></script>  
    ...
    <style amp-custom>
      /* any custom styles go here. */
      body {
        background-color: white;
      }
      amp-img {
        border: 5px solid black;
      }

      amp-img.grey-placeholder {
        background-color: grey;
      }
    </style>
    ...
  </head>

Проверьте эту ссылку ниже для получения более подробной информации

https://www.ampproject.org/docs/design/responsive_amp

Дайте нам знать, если это помогло.Спасибо!

...