С чего начать историю

Веб-история представлена в виде компонента amp-story, который служит контейнером для всех входящих в историю страниц. Компонент amp-story также отвечает за создание оболочки пользовательского интерфейса, включающей обработку жестов и навигацию.

Компонент amp-story — это специальный компонент AMP, поэтому для работы с ним в документ AMP нужно добавить его скрипт.

Откройте файл pets.html в текстовом редакторе и добавьте следующий скрипт в раздел <head>:

<head>
  <script
    async
    custom-element="amp-story"
    src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
  ></script>
</head>

Добавьте элемент <amp-story> в <body> вашего документа и укажите обязательный атрибут standalone:

<body>
  <amp-story standalone> </amp-story>
</body>

Чтобы мы получили корректно сформированную AMP-историю, элемент <body> должен иметь всего один дочерний элемент — компонент amp-story; все остальные элементы содержатся внутри amp-story.

Добавление метаинформации

Чтобы истории можно было найти в Интернете, требуется указать определенные метаданные для предоставления миниатюрных деталей истории, например:

Название истории, представляемое атрибутом title (например, «Домашние питомцы»).
Имя издателя, представляемое атрибутом publisher (например, «Уроки по AMP»).
Логотип издателя, представленный атрибутом publisher-logo-src . Это URL-адрес изображения логотипа в квадратном формате с соотношением сторон 1x1.
Обложка истории, представленная атрибутом poster-portrait-src. Это URL-адрес обложки; само изображение должно быть в портретном формате с соотношением сторон 3x4.

Давайте добавим эти атрибуты в наш тег amp-story:

<amp-story
  standalone
  title="Joy of Pets"
  publisher="AMP tutorials"
  publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
  poster-portrait-src="assets/cover.jpg"
></amp-story>

Помимо этих обязательных атрибутов, вы можете применять другие атрибуты. Дополнительную информацию см. в разделе атрибуты в справочной документации amp-story.

ПРИМЕЧАНИЕ. Эти атрибуты метаданных дополняют, но не заменяют какие-либо структурированные данные (например, JSON-LD) на странице. Чтобы ваши веб-истории обнаруживались на всех платформах, вы должны добавить структурированные данные на все свои AMP-страницы, включая AMP-истории.

На данный момент у нас есть оболочка истории без какого-либо контента. Давайте создадим его.

Предыдущая глава Следующая глава

Written by @bpaduch