Creazione del bookend
Ora che abbiamo aggiunto tutte le pagine, diamo un'occhiata all'ultima schermata della storia, il "bookend". Quest'ultima schermata conclude la storia e offre strumenti di condivisione sui social e collegamenti a contenuti simili a quelli della storia, in modo che gli utenti possano condividerla e approfondire altri contenuti del sito.
Le informazioni sulla schermata di chiusura provengono da un file JSON specificato nel tag <amp-story-bookend>. La nostra esercitazione dispone già di un file JSON (bookend.json) che contiene i dati del bookend.
Il tag <amp-story-bookend> deve essere l'ultimo in <amp-story>. Quindi, aggiungiamo i componenti <amp-story-bookend></amp-story-bookend> subito prima del tag di chiusura</amp-story>. Nel tag amp-story-bookend, l'attributo src deve puntare al file bookend.json e occorre impostare l'attributo layout="nodisplay":
</amp-story-page>
<amp-story-bookend src="bookend.json" layout="nodisplay"></amp-story-bookend>
</amp-story>
Aggiornando il browser, l'ultima schermata avrà il seguente bookend:
Diamo un'occhiata al file JSON. Aprire il file bookend.json nell'editor di testo preferito.
Ogni schermata di bookend richiede un bookendVersion, che per questa esercitazione è v1.0:
"bookendVersion": "v1.0",
I pulsanti di condivisione sui social consentono ai lettori di condividere i contenuti attraverso piattaforme come Twitter, Facebook, Pinterest e simili. Occorre indicare i fornitori di condivisioni social in un oggetto shareProviders e creare un array contenente i nomi dei tipi per ciascuna delle piattaforme social.
Per questa esercitazione, abbiamo scelto Facebook, Twitter ed e-mail come nostri fornitori di condivisioni:
"shareProviders": [
"facebook",
"twitter",
"email"
],
Il resto della schermata di bookend è per i contenuti collegati. Tutti i contenuti collegati si trovano in un oggetto components.
Sono disponibili vari componenti che è possibile utilizzare per visualizzare contenuti rilevanti e collegamenti a pagine simili; ogni componente è specificato con un attributo di tipo. Diamo un'occhiata ai componenti disponibili:
| Tipo | Descrizione |
|---|---|
| heading | Permette di indicare un'intestazione per raggruppare articoli. { "type": "heading", "text": "More to read" }, |
| small | Consente di inserire un collegamento agli articoli simili con l'opzione di includere una piccola immagine associata. { "type": "small", "title": "Learn about cats", "url": "https://wikipedia.org/wiki/Cat", "image": "assets/bookend_cats.jpg" }, |
| landscape | Permette di inserire collegamenti ad articoli o altri contenuti come video. L'immagine associata a questo tipo è più grande e in formato orizzontale. { "type": "landscape", "title": "Learn about border collies", "url": "https://wikipedia.org/wiki/Border_Collie", "image": "assets/bookend_dogs.jpg", "category": "Dogs" }, |
| portrait | Permette di inserire collegamenti a storie o altri contenuti. L'immagine associata a questo tipo è più grande e in formato verticale. { "type": "portrait", "title": "Learn about macaws", "url": "https://wikipedia.org/wiki/Macaw", "image": "assets/bookend_birds.jpg", "category": "birds" }, |
| cta-link | Consente di indicare collegamenti di invito all'azione visualizzati sotto forma di pulsanti (ad es., altre informazioni, iscriviti). { "type": "cta-link", "links": [ { "text": "Learn more", "url": "https://amp.dev/about/stories.html" } ] } |
Ci sarebbe molto altro da dire sul componente bookend. Per i dettagli, consultare la documentazione di riferimento di amp-story.
La nostra storia è quasi completa. Prima di poter pubblicare il nostro contenuto, controlliamo che il formato AMP HTML sia valido.
-