AMP

Création du serre-livre

Maintenant que vous avez ajouté toutes vos pages, regardons le dernier écran de l'histoire, le "serre-livre". Ce dernier écran résume la story et vous permet de le partager sur les réseaux sociaux et d'ajouter des liens connexes vers votre story, afin que les utilisateurs puissent partager votre story ou découvrir davantage de contenus sur votre site.

The information on the bookend screen comes from a JSON file that's specified in the <amp-story-bookend> tag. For our tutorial, we already have a JSON file (bookend.json) that contains the bookend data.

La balise <amp-story-bookend> doit être la dernière balise dans <amp-story>. Donc, ajoutons <amp-story-bookend></amp-story-bookend> juste avant la balise de fin </amp-story>. Dans la balise amp-story-bookend, pointez l'attribut src vers le fichier bookend.json et configurez layout="nodisplay" :

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

If you refresh your browser and go to the last screen, you'll see the following bookend:

Bookend

Let's look at the JSON file. Open the bookend.json file in your text editor.

Every bookend screen requires a bookendVersion, which is v1.0 for this tutorial:

"bookendVersion": "v1.0",

Social share buttons allow readers to share your content through social platforms, like Twitter, Facebook, Pinterest, and so on. You specify social share providers in a shareProviders object, and create an array containing type names for each of the social platforms.

For this tutorial, we chose Facebook, Twitter, and email for our share providers:

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

The rest of the bookend screen is for related content. All related content is contained in a components object.

There are various components that you can use to display related content and links; each component is specified with a type attribute. Let's look at the available components:

Type Description
heading Vous permet de spécifier un en-tête pour regrouper des articles.
  {
    "type": "heading",
    "text": "More to read"
  },
  

small Vous permet de créer un lien vers des articles connexes avec la possibilité d'inclure une petite image associée.
  {
    "type": "small",
    "title": "Learn about cats",
    "url": "https://wikipedia.org/wiki/Cat",
    "image": "assets/bookend_cats.jpg"
  },
  

landscape Vous permet de créer un lien vers des articles ou d'autres contenus, tels que des vidéos. L'image associée à ce type est plus grande et au format paysage.
  {
    "type": "landscape",
    "title": "Learn about border collies",
    "url": "https://wikipedia.org/wiki/Border_Collie",
    "image": "assets/bookend_dogs.jpg",
    "category": "Dogs"
  },
  

portrait Vous permet de créer des liens vers des stories ou d'autres contenus. L'image associée à ce type est plus grande et au format portrait.
  {
    "type": "portrait",
    "title": "Learn about macaws",
    "url": "https://wikipedia.org/wiki/Macaw",
    "image": "assets/bookend_birds.jpg",
    "category": "birds"
  },
  

cta-link Vous permet de spécifier des liens d'appels à l'action qui s'affichent sous forme de boutons (par exemple, en savoir plus, S'abonner).
  {
    "type": "cta-link",
    "links": [
      {
        "text": "Learn more",
        "url": "https://amp.dev/about/stories.html"
      }
    ]
  }
  

There's more to learn about the bookend component. For details, see the amp-story reference documentation.

Our story is nearly complete. Before we can publish our content, let's check that our AMP HTML is valid.