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

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:

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

{amp-img3}{/amp-img3}
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"   },   

{amp-img3}{/amp-img3}
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"   },   

{amp-img3}{/amp-img3}
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"   },   

{amp-img3}{/amp-img3}
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"       }     ]   }   

{amp-img3}{/amp-img3}

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.