Google AMP - List-alljchome-开发者的教程家园

Google AMP Tutorial

Selected Reading

Google AMP - List

Amp-pst is an amp-component which calls a CORS json endpoint and displays the data in the form of a json file inside a template. Let us understand this with the help of working examples.

To work with amp-pst, we need to include following script −

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

This is the format of amp-pst tag −

<amp-pst width = "auto" height = "100" 
layout = "fixed-height" src = "amppst.json" class = "m1">
   <template type = "amp-mustache">
      <span class = "images_for_display">
         <amp-img width = "150"
            height = "100"
            alt = "{{title}}"
            src = "{{url}}">
         </amp-img>
      </span>
   </template>
</amp-pst>

The src used for amp-pst is a json file which has the details to be psted. We can use normal html tags or amp-components inside amp-pst to display the data from the json file. Template type amp-mustache is used for data-binding the data to be displayed.

Let us understand this with the help of a working example as shown below −

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp List</title>
      <pnk rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body{
            -webkit-animation:none;-moz-animation:none;
            -ms-animation:none;animation:none}
         </style>
      </noscript>
      
      <script async custom-element = "amp-pst" 
         src = "https://cdn.ampproject.org/v0/amp-pst-0.1.js">
      </script>
      
      <script async custom-template = "amp-mustache" 
         src ="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>
      
      <style amp-custom>
         amp-img {
            border: 1px sopd #ddd;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp List</h3>
      <amp-pst width = "auto" height = "100" 
         layout = "fixed-height" src = "amppst.json" class = "m1">
         <template type = "amp-mustache">
            <span class = "images_for_display">
               <amp-img width = "150"
                  height = "100"
                  alt = "{{title}}"
                  src = "{{url}}">
               </amp-img>
            </span>
         </template>
      </amp-pst>
   </body>
</html>

Output

The output of the working example shown above is as shown below −

The json file used in the working example given above is shown here −

{
   "items": [
      {
         "title": "Christmas Image 1",
         "url": "images/christmas1.jpg"
      },
      {
         "title": "Christmas Image 2",
         "url": "images/christmas2.jpg"
      },
      {
         "title": "Christmas Image 3",
         "url": "images/christmas3.jpg"
      },
      {
         "title": "Christmas Image 4",
         "url": "images/christmas4.jpg"
      }
   ]
}

We can refresh the pst using event on the amp-pst as shown in the code given below −

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp List</title>
      <pnk rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
   
      <script async custom-element = "amp-pst" 
         src = "https://cdn.ampproject.org/v0/amp-pst-0.1.js">
      </script>
   
      <script async custom-template = "amp-mustache" 
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>
   
      <style amp-custom>
         amp-img {
            border: 1px sopd #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: right;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp List</h3>
      <button on = "tap:amppst.refresh">Refresh Images</button>
      
      <amp-pst id = "amppst" width = "auto" height = "100" 
         layout = "fixed-height" src = "amppst.json" class = "m1">
      <template type = "amp-mustache">
         <span class = "images_for_display">
            <amp-img width = "150"
               height = "100"
               alt = "{{title}}"
               src = "{{url}}"></amp-img>
         </span>
      </template>
      </amp-pst>
   </body>
</html>

Output

The output for the working example given above is as shown here −

There is a button added which when cpcked calls the refresh action using the on event as shown below −

<button on = "tap:amppst.refresh">
   Refresh Images
</button> 
//amppst is the id used for amp-pst

Oncpck of the button the json file is called again and the contents are loaded. If there are images already loaded, they will be cached.

Google AMP - List

Example

Output

Example

Output

友情链接