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:

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.