Google AMP - คลาส CSS แบบไดนามิก

amp-dynamic-css-class เพิ่มคลาสไดนามิกให้กับ body tag ในบทนี้ให้เราเรียนรู้รายละเอียดของแท็กนี้

ในการทำงานกับ amp-dynamic-css-class เราจำเป็นต้องเพิ่มสคริปต์ต่อไปนี้ -

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

มีคลาสสำคัญสองคลาสที่ได้รับการดูแลโดย amp-dynamic-css-คลาส -

amp-referrer-*
amp-viewer

ให้เราคุยรายละเอียดแต่ละเรื่อง

แอมป์ผู้อ้างอิง - *

ชั้นเรียนเหล่านี้ตั้งขึ้นอยู่กับว่าผู้ใช้เข้ามาอย่างไร หมายความว่าหากผู้ใช้มาจาก Google คลาสผู้อ้างอิงที่เกี่ยวข้องกับ Google จะถูกตั้งค่า เช่นเดียวกับ Twitter และ Pinterest

ชั้นเรียนมีให้ตามประเภทของผู้อ้างอิง

ตัวอย่างเช่นสำหรับ Google ชั้นเรียนต่อไปนี้จะถูกเพิ่มหากผู้ใช้คลิก amp หน้าจากเครื่องมือค้นหาของ Google

amp-referrer-www-google-com
amp-referrer-google-com
amp-referrer-com

ในทำนองเดียวกันมีชั้นเรียนสำหรับ Twitter, Pinterest, Linkedin และอื่น ๆ

amp-viewer

โปรแกรมดูแอมป์จะเปลี่ยน url ของแอมป์เพื่อรับรายละเอียดจากแคชของ Google หากคุณค้นหาบางสิ่งในการค้นหาของ Google ภาพหมุนที่ปรากฏขึ้นจะมีหน้าแอมป์ทั้งหมด

เมื่อคุณคลิกพวกเขาจะถูกเปลี่ยนเส้นทางไปยัง URL ที่มี Google url เป็นคำนำหน้า คลาส amp-viewer จะถูกตั้งค่าเมื่อผู้ใช้ดูเพจใน amp- viewer และใช้คลาสไดนามิก

เมื่อคุณคลิกหน้าแอมป์ URL ที่คุณได้รับในแถบที่อยู่จะเป็นดังนี้ -

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

ตัวอย่าง

<!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>
      <link 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{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 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>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.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-linkedin-com) .if-linkedin,
         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>
      <div>
      
         <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 :)</p>
      </div>
      &ltdiv>
         <p class = "if-not-viewer">Hey! You are not coming from amp viewer</p>
         <p class = "if-viewer">Hey! From amp viewer.</p>
      <div>
   </body>
</html>

เอาต์พุต