Google AMP - Page suivante

Amp page suivante est un composant amp qui peut charger dynamiquement plus de pages lorsque l'utilisateur atteint la fin du document. Ce chapitre traite ce concept en détail.

Pour travailler avec le composant amp-next-page, nous devons ajouter le script suivant - 

<script async custom-element = "amp-next-page" 
   src = "https://cdn.ampproject.org/v0/amp-next-page-0.1.js">
</script>

De plus, amp-next-page n'est pas complètement lancé, donc pour que la page de test fonctionne, ajoutez la balise Meta suivante -

<meta name = "amp-experiments-opt-in" content = "amp-next-page">

Pour charger les pages dynamiquement, nous devons donner les URL de page à la balise de script de type = "application / json" comme indiqué ci-dessous -

<amp-next-page>
   <script type = "application/json">
      {

         "pages": [
            {
            "title": "Page 2",
            "image": "images/christmas1.jpg",
            "ampUrl": "ampnextpage1.html"
            },
            {
            "title": "Page 3",
            "image": "images/christmas1.jpg",
            "ampUrl": "ampnextpage2.html"
            }
         ]
      }
   </script>
</amp-next-page>

Dans la balise ci-dessus, nous essayons de charger 2 pages ampnextpage1.html et ampnextpage2.html.

Voyons maintenant la sortie finale. Toutes les pages qui doivent être chargées doivent être ajoutées au tableau de pages avec titre, image et ampUrl.

Exemple

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Google Amp - Next Page</title>
      <link rel = "canonical" href = "ampnextpage.html">
      <meta name = "amp-experiments-opt-in" content = "amp-next-page">
      <meta name = "viewport" content ="width = device-width,
      minimum-scale = 1,initial-scale = 1">

      <style amp-boilerplate>
         body {
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
         
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
         <script async src="https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-next-page" 
         src = "https://cdn.ampproject.org/v0/amp-next-page-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google Amp - Next Page</h1>
      <h1>Page 1</h1>
      <p>Start of page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>End of page 1</p>
      
      <amp-next-page>
         <script type = "application/json">
            {
               "pages": [
                  {
                     "title": "Page 2",
                     "image": "images/christmas1.jpg",
                     "ampUrl": "ampnextpage1.html"
                  },
                  {
                     "title": "Page 3",
                     "image": "images/christmas1.jpg",
                     "ampUrl": "ampnextpage2.html"
                  }
               ]
            }  
         </script>
      </amp-next-page>
   </body>
</html>

Production

Vous pouvez remarquer que lorsque vous faites défiler la page, la page suivante à charger est affichée, ainsi que l'URL de la page dans la barre d'adresse est modifiée.