Google AMP и пользовательские Javascript - PullRequest
1 голос
/ 26 февраля 2020

В соответствии с документами все, что мне нужно сделать, это обернуть блок, с которым я бы хотел "поговорить", через Javascript следующим образом:

<amp-script layout="container" src="language-toggle.js">
    // Some basic HTML
</amp-script>

Файл Javascript есть, я тестировал с простым console.log. Тем не менее, тег amp-script имеет opacity: 0.7 (стиль AMP по умолчанию). Видимо, ему нужен класс i-amphtml-hydrated, чтобы он был полностью виден. Я пытался обдумать это несколько часов назад, даже Google не мог помочь мне с этим.

В консоли есть куча ошибок ServiceWorker, которые также все генерируются AMP , Я понятия не имею, почему они появляются или как от них избавиться. Вся эта вещь AMP для меня беспорядок.

enter image description here

Это сценарии AMP, которые я сейчас добавил:

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Карусель и YouTube работают нормально.

Кто-нибудь может пролить свет на это?

1 Ответ

2 голосов
/ 27 февраля 2020

Я настоятельно рекомендую включить режим разработки AMP, добавив #development=1 к URL.

Относительные URL не допускаются в атрибуте sr c тега amp-script (параметр разработки сказал бы вам об этом).

Вы можете иметь что-то вроде этого:

<amp-script  width="1" height="1" script="demo"></amp-script>
<script type="text/plain" target="amp-script" id="demo">
  console.log('Foobar');
</script>

Но вам понадобится соответствующий ha sh в метатеге в вашей голове:

<head>
  ...
<meta
  name="amp-script-src"
  content="sha384-hash"
/>
</head>

Опять же, параметр развития сообщит вам ha sh вы должны использовать, хотя вы также можете отключить проверки ha sh во время разработки.

Все вышеперечисленное по-прежнему не приведет к увлажнению вашего элемента amp-script. Для того чтобы ваш элемент был увлажнен, скрипт должен фактически что-то связать с DOM, как, например, добавить div при нажатии кнопки:

<amp-script  layout="container" script="demo">
  <button id="hello">Add headline</button>
</amp-script>
<script type="text/plain" target="amp-script" id="demo">
  console.log('Foobar');
  const button = document.getElementById('hello');
  button.addEventListener('click', () => {
    const h1 = document.createElement('h1');
    h1.textContent = 'Hello World!';
    document.body.appendChild(h1);
  });
</script>

Имейте в виду, что вы весьма ограничены тем, что вы разрешено делать. Например, приведенный выше фрагмент не будет работать без прослушивателя событий, поэтому вы не можете просто добавить элемент без взаимодействия с пользователем.

Сообщения, касающиеся ссылок, можно смело игнорировать - примеры AMP точно так же действуют, AMP все еще проходит проверку.

...