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 ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - TimeAgo</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-timeago.html">
<meta name="viewport" content="width=device-width,minimum-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 태그와 함께 사용할 수 있는 로케일은 아래 표에 나와 있습니다.
| 로케일 | 설명 |
|---|---|
| ar | Arabic |
| be | Belarusian |
| bg | Bulgarian |
| ca | Catalan |
| da | Danish |
| de | German |
| el | Greek |
| en | English |
| enShort | English - short |
| es | Spanish |
| eu | Basque |
| fi | Finnish |
| fr | French |
| he | Hebrew |
| ar | Arabic |
| hu | Hungarian |
| inBG | Bangla |
| inHI | Hindi |
| inID | Malay |
| it | Italian |
| ja | Japanese |
| ko | Korean |
| ml | Malayalam |
| nbNO | Norwegian Bokmål |
| nl | Dutch |
| nnNO | Norwegian Nynorsk |
| pl | Polish |
| ptBR | Portuguese |
| ro | Romanian |
| ru | Russian |
| sv | Swedish |
| ta | Tamil |
| th | Thai |
| tr | Turkish |
| uk | Ukrainian |
| vi | Vietnamese |
| zhCN | Chinese |
| zhTW | Taiwanese |
아래에 주어진 작업 예제를 사용하여 몇 가지 로케일에 대해 논의하겠습니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<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="https://googleblogamp.blogspot.com/2021/01/google-amp-timeago.html">
<meta name="viewport" content="width=device-width,minimum-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.37
</amp-timeago>
</body>
</html>
결과
위 코드의 출력은 다음과 같습니다.
"X 시간 전" 디스플레이를 변경해야 하는 경우 timeago와 함께 "cutoff" 속성을 사용할 수 있습니다. Cutoff는 전 표시를 없애기 위해 몇 초 안에 값을 사용합니다.
아래에 주어진 실제 예제의 도움으로 이것을 이해합시다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - TimeAgo</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-timeago.html">
<meta name="viewport" content="width=device-width,minimum-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>