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

erfan molaei
3 سال پیش
آموزش طرح بندی در گوگل AMP

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

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

AMP-Layout یکی از ویژگی های مهم موجود در Google-amp است. Amp Layout اطمینان حاصل می کند که هنگام بارگیری صفحه ، بدون ایجاد سوسو زدن یا مشکل پیمایش، اجزای amp به درستی ارائه می شوند.

لیست ویژگی های طرح در زیر آورده شده است.

  • width and height
  • layout
  • sizes
  • heights
  • media
  • placeholder
  • fallback
  • noloading

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

ویژگی طرح بندی

ما می توانیم از ویژگی layout در یک جز amp استفاده کنیم که تصمیم خواهد گرفت که چگونه مولفه در داخل صفحه نمایش داده شود. لیستی از طرح های پشتیبانی شده توسط amp در زیر آورده شده است –

  • Not Present
  • Container
  • fill
  • fixed
  • fixed-height
  • flex-item
  • intrinsic
  • nodisplay
  • Responsive

برای هر یک از این چیدمان ها، یک مثال عملی مشاهده خواهیم کرد که نشان می دهد چگونه ویژگی layout به صورت متفاوتی مولفه amp را ارائه می دهد. ما در مثال های خود از مولفه amp-img استفاده خواهیم کرد.

 

مثال

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Google AMP - Image Example</h1>
      <amp-img 
         alt = "Beautiful 
         Flower"src = "images/flower.jpg"
         width = "246"
         height = "205">
      </amp-img>
   </body>
</html>

 

خروجی

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

 

مثال کانتینر

“Layout=”container بیشتر به عنصر والد داده می شود و عنصر فرزند اندازه های تعریف شده را می گیرد.

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = container Image Example</h1>
      <amp-accordion layout = "container">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205">
         </amp-img>
      </amp-accordion>
   </body>
</html>

 

خروجی

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

 

مثال fill

“Layout= ”fill  عرض و ارتفاع عنصر اصلی را می گیرد.

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>
      Google AMP - Image
      <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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;
         font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = fill Image Example</h1>
      <div style = "position:relative;width:100px;height:100px;">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "fill">
         </amp-img>
      </div>
   </body>
</html>

 

خروجی

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

 

مثال Fixed و fixed-height

قبل از درک استفاده از Fixed و fixed-height، لطفاً به دو نکته زیر توجه کنید –

layout = “fixed” نیاز به عرض و ارتفاع دارد و جز amp amp در آن نشان داده می شود.

layout = “fixed-height” نیاز به مشخص بودن ارتفاع برای مولفه دارد. این اطمینان حاصل می کند که ارتفاع تغییر نکرده است. هنگام استفاده از ارتفاع ثابت نباید عرض تعیین شود یا ممکن است خودکار باشد.

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         div{
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;
         font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = fixed and 
         Layout = fixed-height Image Example
      </h1>
      <div>
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "fixed">
         </amp-img>
      </div>
      <div>
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            height = "205"
            layout = "fixed-height">
         </amp-img>
      </div>
   </body>
</html>

 

خروجی

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

Flex-item و intrinsic

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src ="https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;
         font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = flex-item and 
         Layout = intrinsic Image Example
      </h1>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            layout = "flex-item">
         </amp-img>
      </div>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "intrinsic">
         </amp-img>
      </div>
   </body>
</html>

 

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

 

nodisplay و responsive

مولفه AMP با layout = nodisplay، مانند صفحه نمایش، هیچ فضای صفحه را اشغال نمی کند: هیچ. نیازی به افزودن ویژگی عرض و ارتفاع به چنین طرح هایی نیست.

مولفه آمپر با layout = responsive فضای موجود یا عرض صفحه را اشغال می کند و ارتفاع با نسبت نسبت عنصر تغییر اندازه می یابد.

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Image</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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;
         font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout=no-display and 
      Layout = responsive Image Example</h1>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            layout = "no-display">
         </amp-img>
      </div>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

 

خروجی

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

 

لیست طرح های پشتیبانی شده در Google AMP به شرح زیر است

  • Accordion
  • Carousel
  • Lightbox
  • Slider
  • Sideba

 

Amp-accordion

Amp-accordion یک جز amp آمپ است که برای نمایش مطالب در قالب گسترش-فروپاشی استفاده می شود. برای کاربران آسان است که بتوانند آن را در دستگاه های تلفن همراه مشاهده کنند ، جایی که می توانند طبق انتخاب آکاردئون ، بخشی را انتخاب کنند.

برای کار با آکاردئون، باید اسکریپت زیر را اضافه کنید –

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

 

تگ Amp-accordion

<amp-accordion>
   <section class = "seca">
      <h3>Content 1</h3>
      <div>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
      </div>
   </section>
   …
</amp-accordion>

 

مثال

<!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 Accordion </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-accordion" src =
         "https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
      </script>
      <style>
         input[type = text]{
            width: 50%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
         }
         label {
            padding: 12px 12px 12px 0;
            display: inline-block; 
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
         }
         .col-label {
            float: left;
            width: 25%;
            margin-top: 6px;
         }
         .col-content {
            float: left;
            width: 75%;
            margin-top: 6px;
         }
         .row:after {
            content: "";
            display: table;
            clear: both;
         }
         .amp_example {
            background-color: #f1f1f1;
            padding: 0.01em 16px;
            margin: 20px 0;
            box-shadow: 0 2px 4px 0 
            rgba(0,0,0,0.16),0 2px 10px 0 
            rgba(0,0,0,0.12)!important;
         }
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;margin: 10px 0;
         }
         input[type=submit] { 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: right;
         }
         .lightbox {background-color: rgba(100, 100, 100, 0.5);}
         .seca {background-color:#fff;}
      </style>
   </head>
   <body>
      <div class = "amp_example">
         <h3>Google AMP - Amp Accordion</h3>
         <amp-accordion>
            <section class = "seca">
               <h3>Content 1</h3>
               <div>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
               </div>
            </section>
            <section expanded class = "seca">
               <h3>Content 2</h3>
               <div>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
               </div>
            </section>
            <section class="seca">
               <h3>Content 3</h3>
               <div>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
               </div>
            </section>
         </amp-accordion>
      </div>
   </body>
</html>

 

خروجی

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

 

Amp-accordion دارای بخشهایی در داخل آن است. هر بخش می تواند ۲ فرزند داشته باشد و بیش از ۲ خطا در کنسول مرورگر نشان می دهد. شما می توانید یک کانتینر را به بخش اضافه کنید و می توانید چندین عنصر در آن داشته باشید.

به طور پیش فرض، ما یک بخش را با استفاده از ویژگی گسترش یافته به بخش ، در حالت گسترش یافته نگه داشته ایم.

آکاردئون های به هم ریخته

برای جمع شدن خودکار ، ما از ویژگی expand-single-section بر روی آکاردئون استفاده می کنیم همانطور که در مثال نشان داده شده است. بخشی که کاربر باز می کند فقط در حالت استراحت باقی مانده باقی می ماند و دیگران با استفاده از ویژگی expand-single-section می بندند.

<!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 Accordion </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-accordion" src =
         "https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
      </script>
      <style>
         input[type = text]{
            width: 50%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
         }
         label {
            padding: 12px 12px 12px 0;
            display: inline-block; 
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
         }
         .col-label {
            float: left;
            width: 25%;
            margin-top: 6px;
         }
         .col-content {
            float: left;
            width: 75%;
            margin-top: 6px;
         }
         .row:after {
            content: "";
            display: table;
            clear: both;
         }
         .amp_example {
            background-color: #f1f1f1;
            padding: 0.01em 16px;
            margin: 20px 0;
            box-shadow: 0 2px 4px 0 
            rgba(0,0,0,0.16),0 2px 10px 0 
            rgba(0,0,0,0.12)!important;
         }
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
            margin: 10px 0;
         }
         input[type=submit] { 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: right;}
         .lightbox {background-color: rgba(100, 100, 100, 0.5);}
         .seca {background-color:#fff;}
      </style>
   <head>
   <body>
      <div class = "amp_example">
         <h3>Google AMP - Amp Accordion</h3>
         <amp-accordion expand-single-section>
            <section class = "seca">
               <h3>Content 1</h3>
               <div>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
               </div>
            </section>
            <section class = "seca">
               <h3>Content 2</h3>
               <div>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <;p>Content 2 is opened for amp-accordion</p>
               </div>
            </section>
            <section class = "seca">
               <h3>Content 3</h3>
               <div>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
               </div>
            </section>
         </amp-accordion>
      </div>
   </body>
</html>

 

خروجی

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

 

انیمیشن در آکاردئون

با استفاده از ویژگی animate ، می توانیم انیمیشن را برای انبساط-فروپاشی آکاردئون اضافه کنیم. نگاهی به مثال زیر بیاندازید –

<!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 Accordion </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-accordion" src =
         "https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
      </script>
      <style>
         input[type = text]{
            width: 50%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
         }
         label {
            padding: 12px 12px 12px 0;
            display: inline-block; 
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
         }
         .col-label {
            float: left;
            width: 25%;
            margin-top: 6px;
         }
         .col-content {
            float: left;
            width: 75%;
            margin-top: 6px;
         }
         .row:after {
            content: "";
            display: table;
            clear: both;
         }
         .amp_example {
            background-color: #f1f1f1;
            padding: 0.01em 16px;
            margin: 20px 0;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),
            ۰ ۲px 10px 0 rgba(0,0,0,0.12)!important;
         }
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;margin: 10px 0;
         }
         input[type=submit] { 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: right;
         }
         .lightbox {background-color: rgba(100, 100, 100, 0.5);}
         .seca {background-color:#fff;}
      </style>
   </head>
   <body>
      <div class = "amp_example">
         <h3>Google AMP - Amp Accordion</h3>
         <amp-accordion animate expand-single-section>
            <section class = "seca">
               <h3>Content 1</h3>
               <div>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
               </div>
            </section>
            <section class = "seca">
               <h3>Content 2</h3>
               <div>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
               </div>
            </section>
            <section class="seca">
               <h3>Content 3</h3>
               <div>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
               </div>
            </section>
         </amp-accordion>
      </div>
   </body>
</html>

 

خروجی

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

 

AMP Carousel

amp-carousel یک جز amp آمپ است که برای نشان دادن مجموعه ای از محتویات مشابه روی صفحه و استفاده از فلشها برای جابجایی بین محتوا ، استفاده می شود.

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

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

 

تگ amp-carousel

تگ amp-carousel به شرح زیر است –

<amp-carousel height = "300" layout = "fixed-height" type = "carousel">
<amp-img src = "images / christmas1.jpg" width = "400" height = "300" alt = "a image image"> </amp-img>
....
</amp-carousel>

 

ویژگی های موجود برای amp-carousel

ویژگی و توضیح
۱ typeما می توانیم موارد چرخ فلک را به صورت carousel و اسلایدها نمایش دهیم
۲ heightارتفاع carousel بر حسب پیکسل
۳ controls (optional)فلش چپ / راست را بر روی صفحه نمایش می دهد. بعد از چند ثانیه در دستگاه ناپدید می شود. می توان از Css استفاده کرد تا پیکانها را به طور مداوم قابل مشاهده کند.
۴ data-next-button-aria-label (optional)برای تنظیم لیبل carousel بعدی استفاده می شود.
۵ data-prev-button-aria-label (optional)برای تنظیم لیبل carousel قبلی استفاده می شود.
۶ برای نشان دادن اسلاید بعدی بعد از ۵۰۰۰ میلی ثانیه استفاده کنید. IT می تواند با استفاده از مشخصه تأخیر بدون هیچ یک میلی ثانیه در amp-carousel رونویسی شود. این ویژگی حلقه را به چرخ فلک اضافه می کند و اسلایدها پس از پایان یافتن دوباره پخش می شوند. فقط برای type = slides استفاده می شود و برای کارکردن خودکار حداقل به ۲ اسلاید نیاز دارید.

 

حال، اجازه دهید بر روی نمونه هایی کار کنیم تا چرخ و فلک ها را به روش های مختلف نمایش دهیم.

با نوع چرخ فلک ، موارد به صورت افقی قابل پیمایش هستند.

 

مثال

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>amp-carousel</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <!-- ## Setup -->
      <!-- Import the carousel component in the header. -->
      <script async custom-element = "amp-carousel" src =
         "https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
      </script>
      <link rel = "canonical" href="
      https://ampbyexample.com/components/amp-carousel/">
      <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>
      <style amp-custom>
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
            margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <h3>Google Amp-Carousel</h3>
      <amp-carousel height = "300" layout = "fixed-height" type = "carousel">
         <amp-img 
            src = "images/christmas1.jpg" 
            width = "400" 
            height = "300" 
            alt = "a sample image">
         </amp-img>
         <amp-img src = "images/christmas2.jpg" 
            width = "400" 
            height = "300" 
            alt = "another sample image">
         </amp-img>
         <amp-img 
            src = "images/christmas3.jpg" 
            width = "400" 
            height = "300" 
            alt = "and another sample image">
         </amp-img>
      </amp-carousel>
   </body>
</html>

 

خروجی

Animation Carousel type

 

Amp Carousel به عنوان slides

نوع “type = ”slides همزمان یک مورد را نشان می دهد. شما می توانید از طرح به صورت پر ، ثابت ، ارتفاع ثابت ، فلکس ، نمایش گره و پاسخگو استفاده کنید.

 

مثال

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>amp-carousel</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <!-- ## Setup -->
      <!-- Import the carousel component in the header. -->
      <script async custom-element = "amp-carousel" src =
         "https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
      </script>
      <link rel = "canonical" href=
      "https://ampbyexample.com/components/amp-carousel/">
      <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>
      <style amp-custom>
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h3>Google Amp-Carousel</h3>
         <amp-carousel 
            width = "400" 
            height = "300" 
            layout = "responsive" 
            type = "slides">
               <amp-img 
                  src = "images/christmas1.jpg" 
                  width = "400" 
                  height = "300" 
                  layout = "responsive" 
                  alt = "a sample image">
               </amp-img>
               <amp-img 
                  src = "images/christmas2.jpg" 
                  width = "400" 
                  height = "300" 
                  layout = "responsive" 
                  alt="another sample image">
               </amp-img>
               <amp-img 
                  src = "images/christmas3.jpg" 
                  width = "400" 
                  height = "300" 
                  layout = "responsive" 
                  alt = "and another sample image">
               </amp-img>
      </amp-carousel>
   </body>
</html>

 

خروجی

Animation Carousel type slides

 

Amp carousel با استفاده از autoplay

در مثالی که در زیر آورده شده است ، ویژگی autoplay را با تأخیر ۲۰۰۰ میلی ثانیه (۲ ثانیه) اضافه کرده ایم. این اسلایدها را بعد از ۲ ثانیه تأخیر تغییر می دهد. به طور پیش فرض ، این تاخیر ۵۰۰۰ میلی ثانیه (۵ ثانیه) است.

مثال

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>amp-carousel</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <!-- ## Setup -->
      <!-- Import the carousel component in the header. -->
      <script async custom-element = "amp-carousel" src =
         "https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
      </script>
      <link rel = "canonical" href =
      "https://ampbyexample.com/components/amp-carousel/">
      <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>
      <style amp-custom>
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
            margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <h3>Google Amp-Carousel</h3>
      <amp-carousel 
         width = "400" 
         height = "300" 
         layout = "responsive" 
         type = "slides" 
         autoplay delay = "2000">
            <amp-img 
               src = "images/christmas1.jpg" 
               width = "400" 
               height = "300" 
               layout = "responsive" 
               alt = "a sample image">
            </amp-img>
            <amp-img 
               src = "images/christmas2.jpg" 
               width = "400" 
               height = "300" 
               layout = "responsive" 
               alt = "another sample image">
            </amp-img>
            <amp-img 
               src = "images/christmas3.jpg" 
               width = "400" 
               height = "300" 
               layout = "responsive" 
               alt = "and another sample image">
            </amp-img>
      </amp-carousel>
   </body>
</html>

 

خروجی

Animation Carousel autoplay

 

AMP Lightbox

Amp-lightbox یک جز amp است که نمای کامل را اشغال می کند و مانند یک روکش نمایش داده می شود.

برای کار با amp-lightbox ، اسکریپت زیر را اضافه کنید –

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

 

ویژگی های موجود برای amp-lightbox

لیست ویژگی های amp-lightbox در زیر آورده شده است –

ویژگی و توضیح
۱ animate-in (optional)در اینجا می توانید سبک انیمیشن را برای باز کردن سبد انتخاب کنید. به طور پیش فرض اینگونه است

fade-in

مقادیر پشتیبانی شده برای محو شدن، پرواز در پایین و پرواز در بالا است
۲ close-button (required on AMPHTML ads)هنگامی که برای amphtmlads استفاده می شود می توانیم دکمه بستن را برای سبد انتخاب کنیم.
۳ id (required)شناسه منحصر به فرد برای lightbox
۴ layout (required)مقدار طرح نود نمایش خواهد بود
۵ Scrollable (optional)با استفاده از این ویژگی در amp-lightbox می توان محتوای سبد را پیمایش کرد و ارتفاع سبد سبد را سرریز کرد.

 

نمونه ای از Lightbox

<!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 Lightbox</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-lightbox" src =
         "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Lightbox</h3>
      <button on = "tap:my-lightbox">
         Show LightBox
      </button>
      <amp-lightbox id = "my-lightbox" layout = "nodisplay">
         <div class = "lightbox" on="tap:my-lightbox.close" tabindex = "0">
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/flower.jpg"
               width = "246"
               height = "205">
            </amp-img>
         </div>
      </amp-lightbox>
   </body>
</html>

 

خروجی

AMP Lightbox Ex

AMP Lightbox Exs

 

برای بستن lightbox، روی هر قسمت از صفحه کلیک کنید.

می توانید دکمه بستن را به lightbox اضافه کنید که بیشتر در هنگام نمایش تبلیغات از نوع پوشش استفاده می شود. مثال زیر را مشاهده کنید –

 

مثال

<!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 Lightbox</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-lightbox" src =
         "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Lightbox</h3>
      <button on = "tap:my-lightbox">
         Show LightBox
      </button>
      <amp-lightbox id = "my-lightbox" layout = "nodisplay" close-button>
         <div class = "lightbox" on = "tap:my-lightbox.close">
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/flower.jpg"
               width = "246"
               height = "205">
            </amp-img>
         </div>
      </amp-lightbox>
   </body>
</html>

 

خروجی

AMP Overlay

 

amp-sidebar

amp-sidebar جز amp است که برای نمایش محتوایی که از کنار پنجره با ضربه زدن روی یک دکمه می لغزد ، استفاده می شود.

برای کار با amp-sidebar باید اسکریپت زیر را اضافه کنیم –

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

 

تگ amp-sidebar

<amp-sidebar id = "sidebar" layout = "nodisplay" side = "right">
   <span on = "tap:sidebar.close">X</span>
   Html content here..
</amp-sidebar>

 

لیست ویژگی های موجود در amp-sidebar در زیر آورده شده است –

ویژگی و توضیح
۱ sideاین ویژگی نوار کناری را در جهت مشخص شده باز می کند. مثال چپ / راست
۲ layoutNodisplay برای طرح نوار کناری استفاده خواهد شد
۳ openاین ویژگی با باز شدن نوار کناری اضافه می شود.
۴ data-close-button-aria-labelبرای تنظیم لیبل برای دکمه بستن استفاده می شود.

 

ما با استفاده از ویژگی های فوق با نوار کناری کار خواهیم کرد. مثالی که در زیر نشان داده شده را مشاهده کنید –

 

مثال

<!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 Sidebar</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-sidebar" src =
         "https://cdn.ampproject.org/v0/amp-sidebar-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Sidebar</h3>
      <button on = "tap:sidebar">
         Show Sidebar
      </button>
      <amp-sidebar id = "sidebar" layout = "nodisplay" side = "right">
         <span on = "tap:sidebar.close">X</span>
         <ul>
            <li><a href = "/">About</a></li>
            <li><a href = "/">Services</a></li>
            <li><a href = "/">Contact US</a></li>
         </ul>
      </amp-sidebar>
   </body>
</html>

 

خروجی

AMP Slidebar

 

ما از ویژگی side برای باز کردن نوار کناری در سمت راست استفاده کرده ایم. برای باز کردن آن در سمت چپ می توانید از ویژگی left to side استفاده کنید. ویژگی layout باید nodisplay باشد. هنگام باز شدن نوار کناری ، ویژگی open وجود دارد.

data-close-button-aria-label

ویژگی برای افزودن دکمه بستن استفاده می شود. این یک اختیاری است و استفاده از آن اجباری نیست.

Amp Image Slider

Amp-image-slider یک جز amp است که برای مقایسه دو تصویر با اضافه کردن اسلایدر در حرکت عمودی آن بر روی تصویر استفاده می شود.

برای کار با amp-img-slider اسکریپت زیر را اضافه کنید –

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

 

تگ amp-img-slider

<amp-image-slider width = "300" height = "200" layout = "responsive">
   <amp-img src = "images/christmas1.jpg" layout = "fill">
   </amp-img>
   <amp-img src = "images/christmas2.jpg" layout = "fill">
   </amp-img>
</amp-image-slider>

 

نمونه ای از amp-img-slider در اینجا نشان داده شده است. در اینجا ما ۲ تصویر در داخل amp-img-slider اضافه کرده ایم ، جایی که اولین تصویر مانند یک نوار لغزنده عمل می کند و می توانید در بالای تصویر دوم اسلاید کنید.

 

مثال

<!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 Image Slider</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-image-slider" src =
         "https://cdn.ampproject.org/v0/amp-image-slider-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Image Slider</h3>
      <amp-image-slider 
         width = "300" 
         height = "200" 
         layout = "responsive">
            <amp-img 
               src = "images/christmas1.jpg"
               layout = "fill">
            </amp-img>
            <amp-img 
               src = "images/christmas2.jpg"
               layout = "fill">
            </amp-img>
      </amp-image-slider>
   </body>
</html>

 

خروجی

AMP Image Slider

 

نوار لغزنده Amp-image دارای عملیاتی است به نام seekTo برای استفاده از آن می توانید تصویر را تغییر دهید همانطور که در مثال زیر نشان داده شده است –

مثال

<!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 Image Slider</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-image-slider" src =
         "https://cdn.ampproject.org/v0/amp-image-slider-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .amp-sidebar-toolbar-target-shown {
            display: none;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Image Slider</h3>
      <amp-image-slider 
         width = "300" 
         id="slider1" 
         height = "200" 
         layout = "responsive">
         <amp-img src = "images/christmas1.jpg" layout = "fill">
         </amp-img>
         <amp-img src = "images/christmas2.jpg" layout = "fill">
         </amp-img>
      </amp-image-slider>
      <button on = "tap:slider1.seekTo(percent = 1)">
         Image 1
      </button>
      <button on = "tap:slider1.seekTo(percent = 0)">
         Image 2
      </button>
   </body>
</html>

 

خروجی

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

 

منبع.

 

لیست جلسات قبل آموزش گوگل 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

دیدگاه شما

بدون دیدگاه