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" }, |
| 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" }, |
| 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" }, |
| 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" }, |
| 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" } ] } |
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.
-