آموزش Timeago در گوگل AMP

4 سال پیش

امتیاز دهید post

آموزش Timeago در گوگل AMP

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

Timeago با مقایسه آن با گذشته ، به عنوان مثال “x” ساعت قبل، جزئیات زمان را ارائه می دهد. در این درس، اجازه دهید در مورد این ویژگی به طور مفصل بحث کنیم.

برای درج این ویژگی در کار خود ، باید اسکریپت ارائه شده در زیر را به صفحه html. اضافه کنیم –

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

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

</script>

تگ amp-timeago مطابق شکل زیر به نظر می رسد –

&lt;amp-timeago layout = "fixed" width = "160" height = "20" 
   datetime = "2018-10-01T00:37:33.809Z"
   locale = "en"&gt;Monday 01 October 2018 00.37 
&lt;/amp-timeago&gt;

<amp-timeago layout = "fixed" width = "160" height = "20"

datetime = "2018-10-01T00:37:33.809Z"

locale = "en">Monday 01 October 2018 00.37

</amp-timeago>

بگذارید این موضوع را با کمک مثال مثالی که در زیر نشان داده شده درک کنیم –

مثال

&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;title&gt;Google AMP - TimeAgo&lt;/title&gt;

      &lt;link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html"&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 custom-element="amp-timeago" 
         src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js"&gt;
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h1&gt;Google AMP - TimeAgo Example&lt;/h1&gt;
      &lt;amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "en"&gt;Monday 01 October 2018 00.37
      &lt;/amp-timeago&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google AMP - TimeAgo</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>

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

</script>

</head>

<body>

<h1>Google AMP - TimeAgo Example</h1>

<amp-timeago

layout = "fixed"

width = "160"

height = "20"

datetime = "2018-10-01T00:37:33.809Z"

locale = "en">Monday 01 October 2018 00.37

</amp-timeago>

</body>

</html>

خروجی

به طور پیش فرض، محلی برای en تنظیم شده است. ما می توانیم همان را تغییر دهیم و زمان مورد نیاز را در محلی نمایش دهیم. مکانهایی که می توانند با بتگ timeago استفاده شوند در جدول نشان داده شده در زیر آورده شده است.

عربی

بلاروسی

بلغاری

کاتالان

دانمارکی

آلمانی

یونانی

انگلیسی

enShort

انگلیسی – کوتاه

اسپانیایی

باسکایی

فنلاندی

فرانسوی

عبری

مجارستانی

inBG

بنگلا

inHI

هندی

inID

مالاییایی

ایتالیایی

ژاپنی

کره ای

مالایایی

nbNO

نروژی

هلندی

nnNO

نینوروسی

لهستانی

ptBR

پرتغالی

رومانیایی

روسی

سوئدی

تامیل

تایلندی

ترکی

اوکراینی

ویتنامی

zhCN

چینی

zhTW

تایوانی

اجازه دهید ما با استفاده از مثالهای عملی که در زیر آورده شده است ، در مورد چند محلی بحث کنیم –

مثال

&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;title&gt;Google AMP - TimeAgo Using Locale&lt;/title&gt;
      &lt;link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"&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 custom-element = "amp-timeago" 
         src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js"&gt;
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h1&gt;Google AMP - TimeAgo Example Using Locale&lt;/h1&gt;

      &lt;h3&gt;Locale : Russian&lt;/h3&gt;
      &lt;amp-timeago layout = "fixed" 
         width = "160" height = "20" 
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "ru"&gt;
          
         Monday 01 October 2018 00.37
      &lt;/amp-timeago&gt;

      &lt;h3&gt;Locale : Korean&lt;/h3&gt;
      &lt;amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "ko"&gt;
            Monday 01 October 2018 00.37
      &lt;/amp-timeago&gt;
      &lt;h3&gt;Locale : Hindi&lt;/h3&gt;
      
      &lt;amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "inHI"&gt;
         
         Monday 01 October 2018 00.37
      &lt;/amp-timeago&gt;
      
      &lt;h3&gt;Locale : Spanish&lt;/h3&gt;
      &lt;amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "es"&gt;
         
         Monday 01 October 2018 00.37
      &lt;/amp-timeago&gt;
      
      &lt;h3&gt;Locale : French&lt;/h3&gt;
      &lt;amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "fr"&gt;
         
         Monday 01 October 2018 00.3
         &lt;/amp-timeago&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google AMP - TimeAgo Using Locale</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>

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

</script>

</head>

<body>

<h1>Google AMP - TimeAgo Example Using Locale</h1>

<h3>Locale : Russian</h3>

<amp-timeago layout = "fixed"

width = "160" height = "20"

datetime = "2018-10-01T00:37:33.809Z"

locale = "ru">

Monday 01 October 2018 00.37

</amp-timeago>

<h3>Locale : Korean</h3>

<amp-timeago

layout = "fixed"

width = "160"

height = "20"

datetime = "2018-10-01T00:37:33.809Z"

locale = "ko">

Monday 01 October 2018 00.37

</amp-timeago>

<h3>Locale : Hindi</h3>

<amp-timeago

layout = "fixed"

width = "160"

height = "20"

datetime = "2018-10-01T00:37:33.809Z"

locale = "inHI">

Monday 01 October 2018 00.37

</amp-timeago>

<h3>Locale : Spanish</h3>

<amp-timeago

layout = "fixed"

width = "160"

height = "20"

datetime = "2018-10-01T00:37:33.809Z"

locale = "es">

Monday 01 October 2018 00.37

</amp-timeago>

<h3>Locale : French</h3>

<amp-timeago

layout = "fixed"

width = "160"

height = "20"

datetime = "2018-10-01T00:37:33.809Z"

locale = "fr">

Monday 01 October 2018 00.3

</amp-timeago>

</body>

</html>

خروجی

در اینصورت صفحه نمایش “X time ago” باید تغییر کند ، ما می توانیم از ویژگی “cutoff” با timeago استفاده کنیم. برای خلاص شدن از شر نمایشگر قبلی ، مقادیر در عرض چند ثانیه طول می کشد.

بگذارید این موضوع را با کمک یک مثال عملی که در زیر آورده شده درک کنیم –

مثال

&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;title&gt;Google AMP - TimeAgo&lt;/title&gt;
      &lt;link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"&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 custom-element = "amp-timeago" 
         src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js"&gt;
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h1&gt;Google AMP - TimeAgo Example&lt;/h1&gt;
      &lt;amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "en"
         cutoff = "300"&gt;
         
         Monday 01 October 2018 00.37
      &lt;/amp-timeago&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google AMP - TimeAgo</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>

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

</script>

</head>

<body>

<h1>Google AMP - TimeAgo Example</h1>

<amp-timeago

layout = "fixed"

width = "160"

height = "20"

datetime = "2018-10-01T00:37:33.809Z"

locale = "en"

cutoff = "300">

Monday 01 October 2018 00.37

</amp-timeago>

</body>

</html>

خروجی

Example locale

منبع.

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

امتیاز دهید post

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

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

آموزش Timeago در گوگل AMP

آموزش Timeago در گوگل AMP

مثال

خروجی

مثال

خروجی

مثال

خروجی

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

دیدگاه شما

بدون دیدگاه

آموزش Timeago در گوگل AMP

مثال

خروجی

مثال

خروجی

مثال

خروجی

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

دیدگاه شما

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

بدون دیدگاه