Google AMP - Timeago
Timeago จะให้รายละเอียดการประทับเวลาโดยเปรียบเทียบกับอดีตเช่น 'x' ชั่วโมงที่แล้ว ในบทนี้ให้เราพูดถึงรายละเอียดเกี่ยวกับคุณลักษณะนี้
ในการแทรกคุณสมบัตินี้ในงานของเราเราต้องเพิ่มสคริปต์ที่ให้ไว้ด้านล่างในหน้า. html -
<script async custom-element = "amp-timeago"
src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
</script>
แท็ก amp-timeago มีลักษณะดังที่แสดงด้านล่าง -
<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>
ให้เราเข้าใจสิ่งนี้ด้วยความช่วยเหลือของตัวอย่างการทำงานดังที่แสดงด้านล่าง -
ตัวอย่าง
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - TimeAgo</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-timeago"
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 ได้แสดงไว้ในตารางที่แสดงด้านล่าง
ซีเนียร์ No | สถานที่และคำอธิบาย |
---|---|
1 | ar อาหรับ |
2 | be เบลารุส |
3 | be เบลารุส |
4 | bg บัลแกเรีย |
5 | ca คาตาลัน |
6 | da เดนมาร์ก |
7 | de เยอรมัน |
8 | el กรีก |
9 | en ภาษาอังกฤษ |
10 | enShort อังกฤษ - สั้น |
11 | es ภาษาสเปน |
12 | eu บาสก์ |
13 | fi ภาษาฟินแลนด์ |
14 | fr ฝรั่งเศส |
15 | he ฮีบรู |
16 | hu ฮังการี |
17 | inBG บางลา |
18 | inHI ภาษาฮินดี |
19 | inID มาเลย์ |
20 | it อิตาลี |
21 | ja ญี่ปุ่น |
22 | ko เกาหลี |
23 | ml มาลายาลัม |
24 | nbNO Bokmålของนอร์เวย์ |
25 | nl ดัตช์ |
26 | nnNO Nynorsk ของนอร์เวย์ |
27 | pl ขัด |
28 | ptBR โปรตุเกส |
29 | ro โรมาเนีย |
30 | ru รัสเซีย |
31 | sv สวีเดน |
32 | ta ทมิฬ |
33 | th ไทย |
34 | tr ตุรกี |
35 | uk ยูเครน |
36 | vi เวียดนาม |
37 | zhCN ชาวจีน |
38 | zhTW ชาวไต้หวัน |
ให้เราพูดคุยเกี่ยวกับสถานที่บางแห่งโดยใช้ตัวอย่างการทำงานตามที่ระบุด้านล่าง -
ตัวอย่าง
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - TimeAgo Using Locale</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-timeago"
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 ได้ Cutoff ใช้ค่าเป็นวินาทีเพื่อกำจัดการแสดงผลก่อนหน้านี้
ให้เราเข้าใจสิ่งนี้ด้วยความช่วยเหลือของตัวอย่างการทำงานที่ให้ไว้ด้านล่าง -
ตัวอย่าง
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - TimeAgo</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-timeago"
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>