Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Tworzenie ekranu końcowego

Wszystkie strony zostały już dodane, spójrzmy więc na ostatni ekran relacji. Ten ostatni ekran kończy relację i umożliwia zamieszczenie linków do udostępniania w mediach społecznościowych i linków związanych z relacją, dzięki którym użytkownicy będą mogli udostępniać Twoją relację lub zagłębić się w innych treściach w Twojej witrynie.

Informacje na ekranie końcowym pochodzą z pliku JSON określonego w znaczniku <amp-story-bookend>. Do celów naszego samouczka mamy już przygotowany zawierający dane ekranu końcowego plik JSON (bookend.json).

Znacznik <amp-story-bookend> musi znajdować się w ostatnim znaczniku w sekcji <amp-story>. Dodajmy zatem znaczniki <amp-story-bookend></amp-story-bookend> tuż przed zamykającym znacznikiem </amp-story>. W znaczniku amp-story-bookend wskaż w atrybucie src plik bookend.json i ustaw atrybut layout="nodisplay":

  </amp-story-page>
  <amp-story-bookend src="bookend.json" layout="nodisplay"></amp-story-bookend>
</amp-story>

Jeśli odświeżysz przeglądarkę i przejdziesz do ostatniego ekranu, zobaczysz następujący ekran końcowy:

Bookend

Spójrzmy na plik JSON. Otwórz plik bookend.json w edytorze tekstów.

Każdy ekran końcowy wymaga podania wartości bookendVersion, którą w tym samouczku jest v1.0:

"bookendVersion": "v1.0",

Przyciski udostępniania w mediach społecznościowych umożliwiają czytelnikom dzielenie się treścią na platformach społecznościowych, takich jak Twitter, Facebook, Pinterest itd. Użytkownik określa dostawców usług społecznościowych w obiekcie shareProviders i tworzy tablicę zawierającą nazwy typów każdej z platform społecznościowych.

W tym samouczku jako dostawców usług udostępniania wybieramy Facebook, Twitter i pocztę elektroniczną:

"shareProviders": [
  "facebook",
  "twitter",
  "email"
],

Pozostała część ekranu końcowego jest przeznaczona na powiązane treści. Cała powiązana treść jest zawarta w obiekcie components.

Dostępne są różne składniki, których można używać do wyświetlania powiązanej treści i linków; każdy składnik należy określić za pomocą atrybutu type. Przyjrzyjmy się dostępnym składnikom:

Typ Opis
heading Umożliwia określenie nagłówka w celu grupowania artykułów.
   {     "type": "heading",     "text": "More to read"   },   

{amp-img3}{/amp-img3}
small Umożliwia podanie linków do powiązanych artykułów z opcją dołączenia powiązanego małego obrazu.
   {     "type": "small",     "title": "Learn about cats",     "url": "https://wikipedia.org/wiki/Cat",     "image": "assets/bookend_cats.jpg"   },   

{amp-img3}{/amp-img3}
landscape Umożliwia podanie linków do artykułów lub innych treści, takich jak filmy. Obraz powiązany z tym typem jest większy i ma orientację poziomą.
   {     "type": "landscape",     "title": "Learn about border collies",     "url": "https://wikipedia.org/wiki/Border_Collie",     "image": "assets/bookend_dogs.jpg",     "category": "Dogs"   },   

{amp-img3}{/amp-img3}
portrait Umożliwia umieszczanie linków do relacji lub innych treści. Obraz powiązany z tym typem jest większy i ma orientację pionową.
   {     "type": "portrait",     "title": "Learn about macaws",     "url": "https://wikipedia.org/wiki/Macaw",     "image": "assets/bookend_birds.jpg",     "category": "birds"   },   

{amp-img3}{/amp-img3}
cta-link Umożliwia określenie linków wezwań do działania, wyświetlanych jako przyciski (np. Czytaj więcej, Subskrybuj).
   {     "type": "cta-link",     "links": [       {         "text": "Learn more",         "url": "https://amp.dev/about/stories.html"       }     ]   }   

{amp-img3}{/amp-img3}

Dostępnych jest więcej informacji o składniku bookend. Szczegółowe informacje znajdują się w dokumentacji referencyjnej składnika amp-story.

Nasza relacja jest już niemal ukończona. Zanim będziemy mogli opublikować nasze treści sprawdźmy, czy nasz kod AMP HTML jest prawidłowy.