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 파일이 다시 호출되고 내용이 로드됩니다. 이미 로드된 이미지가 있는 경우 캐시됩니다.