آموزش استوری در گوگل AMP

4 سال پیش

امتیاز دهید post

آموزش استوری در گوگل AMP

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

Amp-story یک جز amp است که برای نمایش محتوای کاربر درگیر کردن با استوری استفاده می شود. به عنوان مثال با استفاده از یک سری تصاویر در مورد یک نام تجاری.

برای کار با amp-story ، باید اسکریپت را همانطور که در زیر نشان داده شده است ، قرار دهیم –

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

src = "https://cdn.ampproject.org/v0/amp-story-1.0.js">

</script>

در این درس، بگذارید بفهمیم amp-story چیست و چگونه کار می کند. فرض کنید که ما یک گالری تصویر داریم و می خواهیم همان را در صفحه نمایش دهیم. در صفحه amp می توانیم با استفاده از مولفه amp-story آن را برای کاربر زیبا و تعاملی نشان دهیم.

فرمت تگ amp-story مانند زیر نشان داده شده است –

&lt;amp-story standalone&gt; ---&gt; Main story Tag
   &lt;amp-story-page id = "page-1"&gt; ---&gt; Pages inside the story e.g page1
      &lt;amp-story-grid-layer template = "fill"&gt; --&gt; 
         Layers for the page1.You can have more than one layer.
         //Add html elements here or amp components
      &lt;/amp-story-grid-layer&gt;
      &lt;amp-story-grid-layer template = "fill"&gt; --&gt; 
         Layers for the page1.You can have more than one layer.
         //Add html elements here or amp components
      &lt;/amp-story-grid-layer&gt;
      ...
   &lt;/amp-story-page&gt;

   &lt;amp-story-page id = "page-2"&gt; ---&gt; Pages inside the story e.g page2
      &lt;amp-story-grid-layer template = "fill"&gt; --&gt; 
         Layers for the page2.You can have more than one layer.
         //Add html elements here or amp components
      &lt;/amp-story-grid-layer&gt;
      ...
   &lt;/amp-story-page&gt;
   ...
&lt;/amp-story&gt;

<amp-story standalone> ---> Main story Tag

<amp-story-page id = "page-1"> ---> Pages inside the story e.g page1

<amp-story-grid-layer template = "fill"> -->

Layers for the page1.You can have more than one layer.

//Add html elements here or amp components

</amp-story-grid-layer>

<amp-story-grid-layer template = "fill"> -->

Layers for the page1.You can have more than one layer.

//Add html elements here or amp components

</amp-story-grid-layer>

...

</amp-story-page>

<amp-story-page id = "page-2"> ---> Pages inside the story e.g page2

<amp-story-grid-layer template = "fill"> -->

Layers for the page2.You can have more than one layer.

//Add html elements here or amp components

</amp-story-grid-layer>

...

</amp-story-page>

...

</amp-story>

برخی ویژگی های اضافی برای amp-story به شرح زیر اضافه شده است –

&lt;amp-story standalone title = "My Story"
   publisher = "The AMP Team"
   publisher-logo-src = "publisherlogo image here"
   poster-portrait-src = "poster portrait here"
   poster-square-src = "poster square image here"
   poster-landscape-src = "poster landscape image here"&gt;

<amp-story standalone title = "My Story"

publisher = "The AMP Team"

publisher-logo-src = "publisherlogo image here"

poster-portrait-src = "poster portrait here"

poster-square-src = "poster square image here"

poster-landscape-src = "poster landscape image here">

این ویژگی باعث می شود داستان با استفاده از amp بسیار تعاملی باشد.

کد زیر مثالی مفید برای amp-story را نشان می دهد. خروجی برای همان حالت دسک تاپ و همچنین تلفن همراه نشان داده شده است.

مثال

&lt;!doctype html&gt;
&lt;html amp lang = "en"&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
      &lt;script async custom-element = "amp-story" src = "https://cdn.ampproject.org/v0/amp-story-1.0.js"&gt;&lt;/script&gt;
      &lt;title&gt;Google AMP - Story&lt;/title&gt;
      &lt;meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale=1"&gt;
      &lt;link rel = "canonical" href = "/stories/introduction/amp_story_hello_world/"&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;style amp-custom&gt;
         amp-story {
            font-family: Roboto, Helvetica, Arial, sans-serif;
         }
         amp-story-page * {
            color: white;
            text-align: center;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;amp-story standalone title = "Stories in AMP - Hello World" publisher = "AMP Project"&gt;
         &lt;amp-story-page id = "page-1"&gt;
            &lt;amp-story-grid-layer template = "fill"&gt;
               &lt;amp-img src = "images/christmas1.jpg"
                  width = "300" height = "250"
                  layout = "responsive"&gt;
               &lt;/amp-img&gt;
            &lt;/amp-story-grid-layer&gt;
               &lt;amp-story-grid-layer template = "vertical"&gt;
                  &lt;h1&gt;Hello World&lt;/h1&gt;
                  &lt;p&gt;This is an AMP Story.&lt;/p&gt;
               &lt;/amp-story-grid-layer&gt;
            &lt;/amp-story-page&gt;
            
            &lt;amp-story-page id = "page-2"&gt;
               &lt;amp-story-grid-layer template = "fill"&gt;
                  &lt;amp-img src = "images/christmas5.jpg"
                     width = "300" height = "250"
                     layout = "responsive"&gt;
                  &lt;/amp-img&gt;
               &lt;/amp-story-grid-layer&gt;
               &lt;amp-story-grid-layer template = "vertical"&gt;
                  &lt;h1&gt;Hello World&lt;/h1&gt;
                  &lt;p&gt;This is an AMP Story.&lt;/p&gt;
               &lt;/amp-story-grid-layer&gt;
            &lt;/amp-story-page&gt;
            
            &lt;amp-story-page id = "page-3"&gt;
               &lt;amp-story-grid-layer template = "fill"&gt;
                  &lt;amp-img src = "images/christmas3.jpg"
                     width = "300" height = "250"
                     layout = "responsive"&gt;
                  &lt;/amp-img&gt;
               &lt;/amp-story-grid-layer&gt;
               &lt;amp-story-grid-layer template = "vertical"&gt;
                  &lt;h1&gt;Hello World&lt;/h1&gt;
                  &lt;p&gt;This is an AMP Story.&lt;/p&gt;
               &lt;/amp-story-grid-layer&gt;
            &lt;/amp-story-page&gt;
            
            &lt;amp-story-page id = "page-4"&gt;
               &lt;amp-story-grid-layer template = "fill"&gt;
                  &lt;amp-img src = "images/christmas4.jpg"
                     width = "300" height="250"
                     layout = "responsive"&gt;
                  &lt;/amp-img&gt;
               &lt;/amp-story-grid-layer&gt;
               &lt;amp-story-grid-layer template = "vertical"&gt;
                  &lt;h1&gt;Hello World&lt;/h1&gt;
                  &lt;p&gt;This is an AMP Story.&lt;/p&gt;
              &lt;/amp-story-grid-layer&gt;
            &lt;/amp-story-page&gt;
            
            &lt;amp-story-bookend src = "ampstory.json" layout = "nodisplay"&gt;
         &lt;/amp-story-bookend&gt;
      &lt;/amp-story&gt;
   &lt;body&gt;
&lt;/html&gt;

100

101

102

103

104

105

<!doctype html>

<head>

<title>Google AMP - Story</title>

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>

amp-story {

font-family: Roboto, Helvetica, Arial, sans-serif;

}

amp-story-page * {

color: white;

text-align: center;

}

</style>

</head>

<body>

<amp-story standalone title = "Stories in AMP - Hello World" publisher = "AMP Project">

<amp-story-page id = "page-1">

<amp-story-grid-layer template = "fill">

<amp-img src = "images/christmas1.jpg"

width = "300" height = "250"

layout = "responsive">

</amp-img>

</amp-story-grid-layer>

<amp-story-grid-layer template = "vertical">

<h1>Hello World</h1>

<p>This is an AMP Story.</p>

</amp-story-grid-layer>

</amp-story-page>

<amp-story-page id = "page-2">

<amp-story-grid-layer template = "fill">

<amp-img src = "images/christmas5.jpg"

width = "300" height = "250"

layout = "responsive">

</amp-img>

</amp-story-grid-layer>

<amp-story-grid-layer template = "vertical">

<h1>Hello World</h1>

<p>This is an AMP Story.</p>

</amp-story-grid-layer>

</amp-story-page>

<amp-story-page id = "page-3">

<amp-story-grid-layer template = "fill">

<amp-img src = "images/christmas3.jpg"

width = "300" height = "250"

layout = "responsive">

</amp-img>

</amp-story-grid-layer>

<amp-story-grid-layer template = "vertical">

<h1>Hello World</h1>

<p>This is an AMP Story.</p>

</amp-story-grid-layer>

</amp-story-page>

<amp-story-page id = "page-4">

<amp-story-grid-layer template = "fill">

<amp-img src = "images/christmas4.jpg"

width = "300" height="250"

layout = "responsive">

</amp-img>

</amp-story-grid-layer>

<amp-story-grid-layer template = "vertical">

<h1>Hello World</h1>

<p>This is an AMP Story.</p>

</amp-story-grid-layer>

</amp-story-page>

<amp-story-bookend src = "ampstory.json" layout = "nodisplay">

</amp-story-bookend>

</amp-story>

<body>

</html>

ampstory.json

{
   "bookendVersion": "v1.0",
   "shareProviders": [
      "email",
      "twitter",
      "tumblr",
      {
         "provider": "facebook",
         "app_id": "254325784911610"
      }
   ],
      "components": [
      {
         "type": "heading",
         "text": "Introduction"
      },
      {
         "type": "small",
         "title": "Next Story is on Car Brands",
         "url": "ampcarbrand.html",
         "image": "images/audi.jpg"
      }
   ]
}

{

"bookendVersion": "v1.0",

"shareProviders": [

"email",

"twitter",

"tumblr",

{

"provider": "facebook",

"app_id": "254325784911610"

}

"components": [

{

"type": "heading",

"text": "Introduction"

{

"type": "small",

"title": "Next Story is on Car Brands",

"url": "ampcarbrand.html",

"image": "images/audi.jpg"

}

]

}

خروجی روی دسک تاپ

Output on Desktop

Outputs on Desktop

Outputs Desktops

Outputs Desktop

به این ترتیب قسمت استوری نمایش داده می شود. همچنین می توانید برای تعاملی تر کردن استوری، فیلم یا هر مولفه amp دیگری اضافه کنید.

پس از پایان استوری، آنچه در amp-bookend آورده شده است را نشان می دهد همانطور که در زیر نشان داده شده است –

&lt;amp-story-bookend 
   src = "ampstory.json" layout = "nodisplay"&gt;
&lt;/amp-story-bookend&gt;

<amp-story-bookend

src = "ampstory.json" layout = "nodisplay">

</amp-story-bookend>

ما یک فایل ampstory.json به amp-bookend داده ایم. فایل json دارای جزئیات پیش نمایش استوری بعدی است که در زیر نشان داده شده است. هنگامی که کاربر روی سه نقطه نشان داده شده در سمت راست کلیک می کند ، صفحه زیر نمایش داده می شود –