Amp next page는 사용자가 문서 끝에 도달할 때 더 많은 페이지를 동적으로 로드할 수 있는 amp 구성 요소입니다. 이 글에서는 이 개념을 자세히 다룹니다.
amp-next-page 구성 요소를 사용하려면 다음 스크립트를 추가해야 합니다.
<script async custom-element="amp-next-page"
src="https://cdn.ampproject.org/v0/amp-next-page-0.1.js"></script>또한 amp-next-page가 완전히 실행되지 않았으므로 테스트 페이지가 작동하도록 하려면 다음 메타 태그를 추가하세요.
<meta name="amp-experiments-opt-in" content="amp-next-page">
페이지를 동적으로 로드하려면 아래와 같이
type="application/json" 스크립트 태그에 페이지 URL을
제공해야 합니다.
<amp-next-page>
<script type="application/json">
{
"pages": [
{
"title": "Page 2",
"image": "images/christmas1.jpg",
"ampUrl": "ampnextpage1.html"
},
{
"title": "Page 3",
"image": "images/christmas1.jpg",
"ampUrl": "ampnextpage2.html"
}
]
}
</script>
</amp-next-page>위의 태그에서 ampnextpage1.html 및 ampnextpage2.html 2 페이지를 로드하려고 합니다.
이제 최종 결과를 보겠습니다. 로드해야하는 모든 페이지는 제목, 이미지 및 ampUrl과 함께 페이지 배열에 추가되어야 합니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<title>>Google Amp - Next Page</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-next-page.html">
<meta name="amp-experiments-opt-in" content="amp-next-page">
<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 src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-0.1.js"></script>
</head>
<body>
<h1>Google Amp - Next Page</h1>
<h1>Page 1</h1>
<p>Start of page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>This content is loaded from page 1</p>
<p>End of page 1</p>
<amp-next-page>
<script type="application/json">
{
"pages": [
{
"title": "Page 2",
"image": "images/christmas1.jpg",
"ampUrl": "ampnextpage1.html"
},
{
"title": "Page 3",
"image": "images/christmas1.jpg",
"ampUrl": "ampnextpage2.html"
}
]
}
</script>
</amp-next-page>
</body>
</html>결과
스크롤할 때 로드할 다음 페이지가 표시되고 주소표시줄의 페이지 URL도 변경되는 것을 알 수 있습니다.