Home
AMP
Component

구글 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 ⚡ 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>

결과

구글 AMP – Timeago

기본적으로 로케일은 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>

결과
방문해주셔서 감사합니다. 즐거운 하루 되세요!

댓글 쓰기