Do you build things with AMP? Fill out the AMP Developer Survey!
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ę.

cover page has two layers

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

element 1

element 2

element 3

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.
   

element 1

element 2

element 3

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

element 1

element 2

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.