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:

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": "heading",
    "text": "More to read"
  },
  

  {
    "type": "small",
    "title": "Learn about cats",
    "url": "https://wikipedia.org/wiki/Cat",
    "image": "assets/bookend_cats.jpg"
  },
  

  {
    "type": "landscape",
    "title": "Learn about border collies",
    "url": "https://wikipedia.org/wiki/Border_Collie",
    "image": "assets/bookend_dogs.jpg",
    "category": "Dogs"
  },
  

  {
    "type": "portrait",
    "title": "Learn about macaws",
    "url": "https://wikipedia.org/wiki/Macaw",
    "image": "assets/bookend_birds.jpg",
    "category": "birds"
  },
  

  {
    "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.

• Written by @bpaduch