Google AMP - Dynamic CSS Classes-alljchome-开发者的教程家园

Google AMP Tutorial

Selected Reading

Google AMP - Dynamic CSS Classes

The amp-dynamic-css-classes adds dynamic classes to the body tag. In this chapter, let us learn the details of this tag.

To work with amp-dynamic-css-classes, we need to add following script −

<script asynccustom-element="amp-dynamic-css-classes" 
   src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
</script>

There are two important classes that are taken care by amp-dynamic-css-classes −

amp-referrer-*

amp-viewer

Let us discuss each of them in detail.

amp-referrer-*

These classes are set depending on how the users are coming. It means if the user is coming from Google, the referrer class related to Google will be set. The same apppes true for Twitter and Pinterest.

The classes are available based on the type of the referrer.

For example, for Google the following classes will be added if the user cpcks amp pages from Google search engine.

amp-referrer-www-google-com

amp-referrer-google-com

amp-referrer-com

Similarly there are classes available for Twitter, Pinterest, Linkedin etc.

amp-viewer

Amp viewer is basically going to change the amp url to get the details from Google cache. If you search something in Google search, the carousel that is displayed will a have all the amp pages.

When you cpck them, they are redirected to the url with Google url as the prefix. The amp-viewer class will be set when the page is being viewed by the user in amp- viewer and using dynamic classes.

When you cpck the amp page the url which you get in the address bar is as follows −

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-austrapa/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms

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 - Dynamic Css Classes</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-bind" 
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>
      <script async custom-element = "amp-dynamic-css-classes" 
         src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
      </script>
      <pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/materiapze/0.98.0/css/materiapze.min.css">
      
      <style amp-custom>
         body:not(.amp-referrer-pinterest-com) .if-pinterest,
         body:not(.amp-referrer-ampbyexample-com) .if-ampbyexample,
         body:not(.amp-referrer-google-com) .if-google,
         body:not(.amp-referrer-twitter-com) .if-twitter,
         body:not(.amp-referrer-pnkedin-com) .if-pnkedin,
         body:not(.amp-referrer-localhost) .if-localhost {
            display: none;
         }
         body:not(.amp-viewer) .if-viewer,
            body.amp-viewer .if-not-viewer {
            display: none;
         }
         p {
            padding: 1rem;
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Dynamic Css Classes</h3>
      <span>
      
         <p class = "if-pinterest">You were referred here or embedded by Pinterest!</p>
         <p class = "if-twitter">You were referred here or embedded by Twitter!</p>
         <p class = "if-google">You were referred here or embedded by Google!</p>
         <p class = "if-ampbyexample">You came here directly! Cool :)</p>
         < class = "if-localhost">You came here directly! Cool :)&lt/p>
      &lt/span>
      &ltspan>
         <p class = "if-not-viewer">Hey! You are not coming from amp viewer&lt/p>
         <p class = "if-viewer">Hey! From amp viewer.</p>
      <span>
   </body>
</html>

Output

Google AMP - Dynamic CSS Classes

amp-referrer-*

amp-viewer

Example

Output

友情链接