آموزش کلاس های CSS پویا در گوگل AMP

3 سال پیش

آموزش کلاس های CSS پویا در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش کلاس های CSS پویا در گوگل AMP خواهیم پرداخت.

کلاسهای amp-dynamic-css کلاسهای پویا را به تگ بدنه اضافه می کند. در این فصل ، اجازه دهید جزئیات این برچسب را بیاموزیم.

برای کار با کلاسهای amp-dynamic-css ، باید اسکریپت زیر را اضافه کنیم –

<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

بگذارید هر یک از آنها را با جزئیات بحث کنیم.

*-amp-referrer

این کلاسها بسته به نحوه ورود کاربران تنظیم می شوند. این بدان معناست که اگر کاربر از Google می آید ، کلاس ارجاع دهنده مربوط به Google تنظیم می شود. همین مورد برای توییتر و Pinterest نیز صدق می کند.

کلاسها بر اساس نوع مراجعه کننده در دسترس هستند.

به عنوان مثال، اگر کاربر روی صفحات آمپ از موتور جستجوی Google کلیک کند ، کلاسهای زیر برای Google اضافه خواهد شد.

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

به همین ترتیب کلاس هایی برای توییتر ، Pinterest ، Linkedin و غیره موجود است.

amp-viewer

Amp Viewer اساساً برای دریافت جزئیات از حافظه نهان Google ، آدرس آمپر را تغییر می دهد. اگر در جستجوی Google چیزی جستجو کنید ، چرخ فلکی که نمایش داده می شود دارای تمام صفحات آمپر است.

وقتی روی آنها کلیک می کنید ، با آدرس Google به عنوان پیشوند به url هدایت می شوند. کلاس amp-viewer زمانی تنظیم می شود که صفحه توسط کاربر در amp-viewer و با استفاده از کلاسهای دینامیکی مشاهده شود.

amp viewer
وقتی روی صفحه آمپر کلیک می کنید، نشانی اینترنتی که در نوار آدرس دریافت می کنید به شرح زیر است –

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

amp viewer

مثال

<!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>
      <div>
         <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>

منبع.

لیست جلسات قبل آموزش گوگل AMP

برچسب ها : آموزش برنامه نویسی موبایل آموزش گوگل AMP

نویسنده مطلب erfan molaei

آموزش کلاس های CSS پویا در گوگل AMP

آموزش کلاس های CSS پویا در گوگل AMP

*-amp-referrer

amp-viewer

مثال

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

بدون دیدگاه

آموزش کلاس های CSS پویا در گوگل AMP

*-amp-referrer

amp-viewer

مثال

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه