구글 AMP – List - 구글 블로그 AMP

Amp-list는 CORS json 엔드 포인트를 호출하고 템플릿 내부의 json 파일 형식으로 데이터를 표시하는 amp 구성 요소입니다. 예제의 도움으로 이것을 이해합시다.

amp-list를 사용하려면 다음 스크립트를 포함해야 합니다.

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

다음은 amp-list 태그의 형식입니다.

<amp-list width="auto" height="100" layout="fixed-height" src="amplist.json" class="m1">
  <template type="amp-mustache">
    <div class="images_for_display">
      <amp-img width="150"
               height="100"
               alt="{{title}}"
               src="{{url}}">
      </amp-img> 
    </div>
  </template>
</amp-list>

amp-list에 사용되는 src는 나열할 세부 정보가 있는 json 파일입니다. amp-list 내부의 일반 html 태그 또는 amp 구성 요소를 사용하여 json 파일의 데이터를 표시할 수 있습니다. 템플릿 유형 amp-mustache는 표시할 데이터를 데이터 바인딩하는데 사용됩니다.

아래와 같이 실제 예제의 도움으로 이것을 이해합시다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp List</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-list.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-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <style amp-custom>
    amp-img {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px;
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp List</h3>
<amp-list width="auto" height="100" layout="fixed-height" src="amplist.json" class="m1">
  <template type="amp-mustache">
    <div class="images_for_display">
      <amp-img width="150"
               height="100"
               alt="{{title}}"
               src="{{url}}">
      </amp-img> 
    </div>
  </template>
</amp-list>
</body>
</html>

결과

위에 표시된 작업 예제의 결과는 다음과 같습니다.

위의 예제에서 사용된 json 파일은 다음과 같습니다.

amplist.json

{
  "items": [
    {
      "title": "Christmas Image 1",
      "url": "images/christmas1.jpg"
    },
    {
      "title": "Christmas Image 2",
      "url": "images/christmas2.jpg"
    },
    {
      "title": "Christmas Image 3",
      "url": "images/christmas3.jpg"
    },
    { 
      "title": "Christmas Image 4",
      "url": "images/christmas4.jpg"
    }
  ]
}

아래 코드와 같이 amp-list의 이벤트를 사용하여 목록을 새로고침할 수 있습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp List</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-list.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-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <style amp-custom>
    amp-img {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px;
    }
    button {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: right;
    }
  </style>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>
<body>
<h3>Google AMP - Amp List</h3>
<button on="tap:amplist.refresh">Refresh Images</button> 
<amp-list id="amplist" width="auto" height="100" layout="fixed-height" src="amplist.json" class="m1">
  <template type="amp-mustache">
    <div class="images_for_display">
      <amp-img width="150"
               height="100"
               alt="{{title}}"
               src="{{url}}">
      </amp-img> 
    </div>
  </template>
</amp-list>
</body>
</html>

위에 제공된 예제의 출력은 다음과 같습니다.

클릭하면 아래와 같이 on 이벤트를 사용하여 새로고침 동작을 호출하는 버튼이 추가되었습니다.

<button on="tap:amplist.refresh">Refresh Images</button>
//amplist is the id used for amp-list

버튼을 클릭하면 json 파일이 다시 호출되고 내용이 로드됩니다. 이미 로드된 이미지가 있는 경우 캐시됩니다.

구글 블로그 AMP

이 블로그 검색

구글 AMP – List

예제

결과

amplist.json

예제

관심 있을 만한 글

댓글 쓰기

Live Blogger