آموزش next page در گوگل AMP

4 سال پیش

امتیاز دهید post

آموزش next page در گوگل AMP

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

next page مولفه AMP است که وقتی کاربر به انتهای سند می رسد می تواند صفحات بیشتری را بارگیری کند. این درس به طور مفصل به این مفهوم می پردازد.

برای کار با مولفه amp-next-page ما باید اسکریپت زیر را اضافه کنیم –

&lt;script async custom-element = "amp-next-page" 
   src = "https://cdn.ampproject.org/v0/amp-next-page-0.1.js"&gt;
&lt;/script&gt;

src = "https://cdn.ampproject.org/v0/amp-next-page-0.1.js">

</script>

همچنین amp-next-page به طور کامل راه اندازی نشده است ، بنابراین برای اینکه صفحه تست کار کند، متا تگ زیر را اضافه کنید –

&lt;meta name = "amp-experiments-opt-in" content = "amp-next-page"&gt;

1	<meta name = "amp-experiments-opt-in" content = "amp-next-page">

برای بارگذاری پویا صفحات، باید url های صفحه را به تگ اسکریپت type = “application / json” مانند تصویر زیر ارائه دهیم –

&lt;amp-next-page&gt;
   &lt;script type = "application/json"&gt;
      {

         "pages": [
            {
            "title": "Page 2",
            "image": "images/christmas1.jpg",
            "ampUrl": "ampnextpage1.html"
            },
            {
            "title": "Page 3",
            "image": "images/christmas1.jpg",
            "ampUrl": "ampnextpage2.html"
            }
         ]
      }
   &lt;/script&gt;
&lt;/amp-next-page&gt;

<amp-next-page>

{

"pages": [

{

"title": "Page 2",

"image": "images/christmas1.jpg",

"ampUrl": "ampnextpage1.html"

{

"title": "Page 3",

"image": "images/christmas1.jpg",

"ampUrl": "ampnextpage2.html"

}

]

}

</script>

</amp-next-page>

در تگ بالا، ما در حال بارگیری 2 صفحه ampnextpage1.html و ampnextpage2.html هستیم.

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

مثال

&lt;!doctype html&gt;
&lt;html amp&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;title&gt;Google Amp - Next Page&lt;/title&gt;
      &lt;link rel = "canonical" href = "ampnextpage.html"&gt;
      &lt;meta name = "amp-experiments-opt-in" content = "amp-next-page"&gt;
      &lt;meta name = "viewport" content ="width = device-width,
      minimum-scale = 1,initial-scale = 1"&gt;

      &lt;style amp-boilerplate&gt;
         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}}
      &lt;/style&gt;
         
      &lt;noscript&gt;
         &lt;style amp-boilerplate&gt;
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         &lt;/style&gt;
      &lt;/noscript&gt;
         &lt;script async src="https://cdn.ampproject.org/v0.js"&gt;
      &lt;/script&gt;
      &lt;script async custom-element = "amp-next-page" 
         src = "https://cdn.ampproject.org/v0/amp-next-page-0.1.js"&gt;
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h1&gt;Google Amp - Next Page&lt;/h1&gt;
      &lt;h1&gt;Page 1&lt;/h1&gt;
      &lt;p&gt;Start of page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;This content is loaded from page 1&lt;/p&gt;
      &lt;p&gt;End of page 1&lt;/p&gt;
      
      &lt;amp-next-page&gt;
         &lt;script type = "application/json"&gt;
            {
               "pages": [
                  {
                     "title": "Page 2",
                     "image": "images/christmas1.jpg",
                     "ampUrl": "ampnextpage1.html"
                  },
                  {
                     "title": "Page 3",
                     "image": "images/christmas1.jpg",
                     "ampUrl": "ampnextpage2.html"
                  }
               ]
            }  
         &lt;/script&gt;
      &lt;/amp-next-page&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google Amp - Next Page</title>

minimum-scale = 1,initial-scale = 1">

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>

body{

-webkit-animation:none;

-moz-animation:none;

-ms-animation:none;

animation:none

}

</style>

</noscript>

</script>

src = "https://cdn.ampproject.org/v0/amp-next-page-0.1.js">

</script>

</head>

<body>

<h1>Google Amp - Next Page</h1>

<p>Start of page 1</p>

<p>This content is loaded from page 1</p>

<amp-next-page>

{

"pages": [

{

"title": "Page 2",

"image": "images/christmas1.jpg",

"ampUrl": "ampnextpage1.html"

{

"title": "Page 3",

"image": "images/christmas1.jpg",

"ampUrl": "ampnextpage2.html"

}

]

}

</script>

</amp-next-page>

</body>

</html>

خروجی

Amp Next Notification

Amp Next Page Amp Next Pages

می توانید متوجه شوید که همزمان با پیمایش ، صفحه بعدی که بارگیری می شود نشان داده می شود ، همچنین url صفحه در نوار آدرس تغییر می کند.

منبع.

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

امتیاز دهید post

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

نویسنده مطلب saber

آموزش next page در گوگل AMP

آموزش next page در گوگل AMP

مثال

خروجی

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

دیدگاه شما

بدون دیدگاه

آموزش next page در گوگل AMP

مثال

خروجی

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

دیدگاه شما

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

بدون دیدگاه