Создание титульной страницы
Страница в веб-истории представлена компонентом <amp-story-page>. В amp-story у вас может быть один или несколько компонентов <amp-story-page>, каждый из которых содержит отдельный экран истории. Первая страница, которую вы указываете в порядке тегов документа, — это первая страница, отображаемая в веб-истории.
Чтобы создать страницу, добавьте элемент <amp-story-page> в качестве дочернего элемента amp-story. Назначьте странице уникальный идентификатор. Для нашей первой страницы, которая является титульной страницей, давайте назначим уникальный идентификатор cover:
<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-page id="cover"> </amp-story-page>
</amp-story>
Теперь у нас есть оболочка для нашей титульной страницы. Однако наша история все еще не является корректно сформированной. На странице нужно указать хотя бы один слой.
Слои на странице
Вы можете использовать слои на страницах AMP-истории для создания визуальных эффектов, подобно слоям в графических редакторах. Слои накладываются друг на друга, поэтому первый слой является нижним, следующий отображается поверх него и так далее.
Наша титульная страница состоит из двух слоев:
- Слой 1. Изображение, выполняющее функции фона
- Слой 2. Название статьи и ее автор
Создание слоя 1
Давайте добавим первый слой на нашу титульную страницу. Слой содержит изображение, заполняющее экран.
Создайте слой, добавив элемент <amp-story-grid-layer> в виде дочернего элемента <amp-story-page>. Поскольку мы хотим, чтобы изображение заполняло экран, укажите для элемента amp-story-grid-layer атрибут template="fill". Внутри слоя добавьте элемент amp-img для файла cover.jpg и убедитесь, что он является адаптивным (т. е. содержит layout="responsive") и имеет размеры 720 x 1280 px. Вот как будет выглядеть наш слой:
<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-img
src="assets/cover.jpg"
width="720"
height="1280"
layout="responsive"
>
</amp-img>
</amp-story-grid-layer>
</amp-story-page>
Посмотрим, как будет отображаться страница. Откройте страницу в своем браузере: http://localhost:8000/pets.html.
Вот как она должна выглядеть:
Создание слоя 2
Итак, у нас есть фон, но теперь нам нужен второй слой, который размещается поверх фона и содержит наш заголовок и имя автора. Чтобы добавить второй слой, давайте выполним те же задачи, что и для слоя 1, но вместо использования шаблона fill мы будем использовать шаблон vertical. Однако, прежде чем идти дальше, давайте подробнее изучим шаблоны и то, как мы можем упорядочить элементы AMP и HTML внутри элемента <amp-story-grid-layer>.
Размещение элементов с помощью шаблона
Элемент <amp-story-grid-layer> размещает свои дочерние элементы в сетке (на основе сетки CSS). Чтобы указать, как вы хотите расположить дочерние элементы, вам необходимо указать один из следующих шаблонов макета:
Шаблон: Fill |
|
Шаблон fill заполняет экран первым дочерним элементом слоя. Остальные дочерние элементы слоя не отображаются. Шаблон fill хорошо подходит для создания фона с помощью изображений и видео. | |
Шаблон: Vertical |
|
Шаблон vertical размещает дочерние элементы вдоль оси Y. Элементы выравниваются по верху экрана и занимают весь экран по оси X. Шаблон vertical подходит для ситуаций, когда вы хотите расположить элементы «стопкой» сверху вниз. | |
Шаблон: Horizontal |
|
Шаблон horizontal размещает дочерние элементы вдоль оси X. Элементы выравниваются по начальной стороне экрана и занимают экран целиком по оси Y. Шаблон horizontal подходит для того, чтобы размещать элементы в виде горизонтальной очереди. | |
Шаблон: Thirds |
|
Шаблон thirds делит экран на три равных горизонтальных части и позволяет вам вставлять контент в каждую из них. Вы также можете использовать именованный элемент grid-area, чтобы указать, какую треть вы хотите использовать для контента: верхнюю (upper-third), среднюю (middle-third) или нижнюю (lower-third). Именованные элементы grid-area полезны для изменения стандартного порядка размещения элементов. Например, если в вашем слое два элемента, вы можете заставить первый отображаться в верхней трети (grid-area="upper-third"), а второй — в нижней (grid-area="lower-third"). |
|
Завершение нашей титульной страницы
Теперь, когда вы освоили шаблоны слоев, давайте завершим наш второй слой для титульной страницы.
Для слоя 2 мы хотим, чтобы заголовок и имя были вверху, а элементы следовали друг за другом, поэтому мы укажем шаблон vertical. Наш второй элемент amp-story-grid-layer следует за первым:
<amp-story-grid-layer>
<!--our first layer -->
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>The Joy of Pets</h1>
<p>By AMP Tutorials</p>
</amp-story-grid-layer>
Обновите браузер и посмотрите, что получилось. Наша титульная страница готова.
-