AMP

Tworzenie strony tytułowej

Strona w relacji internetowej jest reprezentowana przez składnik <amp-story-page>. W składniku stamp-story można mieć jeden lub wiele składników <amp-story-page>, zawierających poszczególne ekrany relacji. Pierwszą stroną wyświetlaną w relacji internetowej będzie pierwsza strona, którą określisz w kolejności dokumentów.

Aby utworzyć stronę, dodaj element jako element podrzędny składnika amp-story. Przypisz stronie unikalny identyfikator. Do naszej pierwszej strony, która jest stroną tytułową, przypiszmy unikalny identyfikator 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>

Teraz mamy powłokę na reklamę. Nasza relacja nadal jednak nie jest prawidłowa. W naszej stronie musimy określić co najmniej jedną warstwę.

Warstwy w stronie

Podobnie jak w grafice, warstw można używać w stronach relacji AMP do tworzenia efektów wizualnych. Warstwy są układane jedna na drugiej, pierwsza warstwa jest więc warstwą dolną, następna jest nad nią i tak dalej.

Nasza strona tytułowa składa się faktycznie z dwóch warstw:

  • Warstwa 1: obraz, który służy nam za tło
  • Warstwa 2: tytuł i autor relacji

Tworzenie warstwy 1

Dodajmy pierwszą warstwę do strony tytułowej. Warstwa ta zawiera obraz, który wypełnia ekran.

Utwórz warstwę, dodając element <amp-story-grid-layer> jako element podrzędny elementu <amp-story-page>. Chcemy, aby obraz wypełniał ekran, należy więc określić atrybut template="fill" dla elementu amp-story-grid-layer. W warstwie dodaj element amp-img pliku cover.jpg i ustaw go jako responsywny (tj. layout="responsive") z wymiarami obrazu równymi 720 x 1280 px. Nasza warstwa wygląda tak:

<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>

Zobaczmy, jak wygląda strona. Otwórz w przeglądarce stronę: http://localhost:8000/pets.html.

Powinna wyglądać tak:

Tworzenie warstwy 2

Mamy więc tło, ale teraz potrzebujemy drugiej warstwy, znajdującej się nad tłem i zawierającej nasz nagłówek i autora. Aby dodać naszą drugą warstwę, wykonajmy te same zadania, które wykonaliśmy w przypadku warstwy 1, ale zamiast używać szablonu fill, użyjemy szablonu vertical. Zanim jednak przejdziemy dalej, dowiedzmy się nieco o szablonach i o tym jak możemy ułożyć elementy AMP i HTML w elemencie <amp-story-grid-layer>.

Układanie elementów za pomocą szablonu

Element <amp-story-grid-layer> układa swoje elementy podrzędne w siatce (na podstawie siatki CSS). Aby wskazać, jak mają być rozmieszczone elementy podrzędne, należy określić jeden z następujących szablonów układu:

Szablon: fill
Szablon fill wypełnia ekran pierwszym elementem podrzędnym w warstwie. W tej warstwie nie zostaną pokazane żadne inne elementy podrzędne. Szablon fill dobrze sprawdza się w przypadku tła, w tym obrazów i filmów.
<amp-story-grid-layer template="fill">   <amp-img src="dog.png" width="720" height="1280" layout="responsive">   </amp-img> </amp-story-grid-layer>
Szablon: vertical
Szablon vertical układa elementy podrzędne wzdłuż osi Y. Elementy są wyrównywane do góry ekranu i zajmują cały ekran wzdłuż osi X. Szablon vertical jest przydatny, gdy chcesz układać elementy jeden nad drugim w pionie.
<amp-story-grid-layer template="vertical">   <p>element 1</p>   <p>element 2</p>   <p>element 3</p> </amp-story-grid-layer>
Szablon: horizontal
Szablon horizontal układa elementy podrzędne wzdłuż osi X. Elementy są wyrównane do góry ekranu i zajmują cały ekran wzdłuż osi Y. Szablon horizontal jest przydatny, gdy chcesz układać elementy jeden za drugim w poziomie.
<amp-story-grid-layer template="horizontal">   <p>element 1</p>   <p>element 2</p>   <p>element 3</p> </amp-story-grid-layer>
Szablon: thirds
Szablon thirds dzieli ekran na trzy równe wiersze i pozwala na wstawienie zawartości do każdego z nich. Możesz również określić nazwany atrybut grid-area, aby wskazać jedną trzecią, w której ma się znaleźć treść — upper-third, middle-third, lub lower-third. Nazwane obszary siatki są przydatne do zmiany domyślnego sposobu działania elementów. Jeśli na przykład masz dwa elementy w warstwie, możesz określić pierwszy element, który ma się znaleźć w obszarze grid-area="upper-third" i drugi element, który ma się znaleźć w obszarze grid-area="lower-third".
<amp-story-grid-layer template="thirds">   <h1 grid-area="upper-third">element 1</h1>   <p grid-area="lower-third">element 2</p> </amp-story-grid-layer> 

Kończenie strony tytułowej

Teraz, gdy już znasz szablony warstw, ukończmy naszą drugą warstwę strony tytułowej.

W warstwie 2 chcemy, aby nagłówek i dane autora znajdowały się u góry, a elementy następowały jeden po drugim, więc określamy szablon vertical. Nasz drugi szablon amp-story-grid-layer następuje po pierwszym, tak jak tu:

<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>

Odśwież przeglądarkę i sprawdź swoje dzieło. Strona tytułowa jest ukończona.