آموزش نحو در گوگل AMP

erfan molaei
3 سال پیش

آموزش نحو در گوگل AMP

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

در این درس، ما درباره شرایط اولیه برای شروع کار با صفحات Google AMP بحث خواهیم کرد.

 

مثال صفحه AMP

یک مثال اساسی برای یک صفحه AMP در زیر نشان داده شده است –

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      
      <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>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img 
            src = "images/christmas1.jpg" 
            width = "300" 
            height = "300" 
            layout = "responsive">
         </amp-img>
      </p>
   </body>
</html>

 

تگ های اجباری

برخی از تگ های اجباری وجود دارد که باید در یک صفحه AMP گنجانده شوند. این بخش به طور مفصل درباره آنها بحث می کند –

باید اطمینان حاصل کنیم که AMP یا ⚡ را به تگ html اضافه می کنیم همانطور که در زیر نشان داده شده است

<html amp>
   OR 
<html ⚡>

 

  • ما باید تگ<head> و <body> را به صفحه html اضافه کنیم.

در صورت از دست دادن هر یک از تگ های اجباری اجباری ، اعتبارسنجی AMP ممکن است خراب شود. برخی از تگ های اجباری mets که قرار است در قسمت بالای صفحه اضافه شوند در اینجا نشان داده شده اند –

<meta charset="utf-8">
   <meta name  =  "viewport" 
      content = "width = device-width,
      minimum-scale = 1,
      initial-scale = 1">

 

  • پیوند rel = “canonical” برای افزودن به داخل تگ head
<link rel = "canonical" href = "./regular-html-version.html">

 

  • تگ سبک AMP با amp-boilerplate
<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>

 

تگ اسکریپت AMP با async مانند آن در زیر به آن اضافه شده است. این مهمترین تگ از همه است –

<script async src = "https://cdn.ampproject.org/v0.js">
</script>

 

اگر می خواهید css سفارشی به صفحه اضافه کنید ، باید از این تگ استفاده کنید. لطفاً در اینجا یادداشت کنید ، ما نمی توانیم سبک خارجی را در صفحات AMP فراخوانی کنیم. برای افزودن css سفارشی ، تمام css های شما باید به اینجا بروند –

<style amp-custom>
   //all your styles here
</style>

 

می توانید صفحه فوق را در مرورگر خود با استفاده از # developement = 1 در انتهای url صفحه اعتبارسنجی کنید.

حال اجازه دهید همان را در مرورگر آزمایش کنیم. من این صفحه را به صورت محلی میزبانی کرده و آن را به عنوان amppage.html ذخیره کرده ام.

آدرس اینترنتی برای آزمایش بالاتر است

http: //localhost/googleamp/amppage.html#development=1

 

مثال

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width=device-width,
      minimum-scale = 1,initial-scale = 1">
      <styl
e amp-custom>
         h1 {color: red}
      </style>
      <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>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img 
            src = "images/christmas1.jpg" 
            width = "300" 
            height = "250" 
            layout = "responsive">
         </amp-img>
      </p>
   </body>
</html>

 

خروجی

Amp Sample Page

 

منبع.

 

 

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

  1. آموزش گوگل AMP
  2. بررسی اجمالی گوگل AMP
  3. مقدمه گوگل AMP
  4. آموزش تصاویر در گوگل AMP
  5. آموزش فرم در گوگل AMP
  6.  آموزش Iframes در گوگل AMP
  7. آموزش ویدیو در گوگل AMP
  8. آموزش دکمه در گوگل AMP
  9. آموزش Timeago در گوگل AMP
  10. آموزش Mathml در گوگل AMP
  11. آموزش تگ Fit Text در گوگل AMP
  12. آموزش شمارش معکوس تاریخ در گوگل AMP
  13. آموزش انتخاب کننده تاریخ در گوگل AMP
  14. آموزش استوری در گوگل AMP
  15. آموزش انتخاب کننده در گوگل AMP
  16. آموزش لینک در گوگل AMP
  17. آموزش فونت در گوگل AMP
  18. آموزش لیست در گوگل AMP
  19. آموزش اعلان کاربر در گوگل AMP
  20. آموزش next page در گوگل AMP
  21. آموزش ویژگی ها در گوگل AMP
  22. آموزش استایل ها و CSS سفارشی در گوگل AMP
  23. آموزش کلاس های CSS پویا در گوگل AMP
  24. آموزش اکشن ها و رویدادها در گوگل AMP
  25. آموزش انیمیشن در گوگل AMP
  26. آموزش اتصال داده در گوگل AMP
  27. آموزش طرح بندی در گوگل AMP
  28. آموزش تبلیغات در گوگل AMP
  29. آموزش تجزیه و تحلیل در گوگل AMP
  30. آموزش ویجت های اجتماعی در گوگل AMP
  31. آموزش نحو در گوگل AMP
  32. آموزش اعتبار سنجی در گوگل AMP
  33. آموزش اجزا جاوا اسکریپت در گوگل AMP
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه