Creating the bookend
모든 페이지를 추가했으므로 이제 스토리의 마지막 화면인 '북엔드'에 대해 살펴보겠습니다. 마지막 화면에서는 스토리를 마무리하고, 사용자가 스토리를 공유하거나 게시자 사이트의 다른 콘텐츠를 자세히 살펴볼 수 있도록 소셜 공유 기능 또는 관련 링크를 제공합니다.
북엔드 화면의 정보는 <amp-story-bookend>
태그에 지정된 JSON 파일에서 가져옵니다. 이 가이드에서는 북엔드 데이터가 포함된 JSON 파일(bookend.json)이 이미 만들어져 있습니다.
<amp-story-bookend>
태그는 amp-story
의 마지막 태그여야 합니다. 따라서 종료 </amp-story>
태그 바로 앞에 <amp-story-bookend></amp-story-bookend>
를 추가합니다. amp-story-bookend
태그에서 src
속성을 bookend.json
파일로 지정하고 layout="nodisplay"
를 설정합니다.
</amp-story-page>
<amp-story-bookend src="bookend.json" layout="nodisplay"></amp-story-bookend>
</amp-story>
브라우저에서 새로고침을 하고 마지막 화면으로 이동하면 북엔드가 다음과 같이 표시됩니다.

JSON 파일에 대해 살펴보겠습니다. 텍스트 에디터에서 bookend.json 파일을 엽니다.
모든 북엔드 화면에는 bookendVersion
(이 가이드의 경우 v1.0
)이 필요합니다.
"bookendVersion": "v1.0",
독자들이 여러분의 콘텐츠를 소셜 공유 버튼을 사용하여 트위터와 페이스북 그리고 핀터레스트 등의 소셜 네트워크 플랫폼에 공유할 수 있습니다. shareProviders 객체에서 소셜 공유 제공업체를 지정하고, 각 소셜 플랫폼에 대한 타입명을 포함하는 배열을 만듭니다.
이 가이드에서는 Facebook, Twitter 및 공유 제공업체의 이메일을 선택했습니다.
"shareProviders": [
"facebook",
"twitter",
"email"
],
북엔드 화면의 나머지는 관련 콘텐츠를 위한 부분입니다. 모든 관련 콘텐츠는 components
개체에 포함되어 있습니다.
관련 콘텐츠와 링크를 표시하는 데 사용할 수 있는 다양한 구성 요소가 있습니다. 각 구성 요소는 타입 속성으로 지정됩니다. 사용 가능한 구성 요소에 대해 살펴보겠습니다.
Type | Description |
---|---|
heading | 자료를 그룹화할 제목을 지정할 수 있습니다. { "type": "heading", "text": "More to read" }, |
small | 연결된 작은 이미지를 포함하는 옵션을 사용하여 관련 자료에 연결할 수 있습니다. { "type": "small", "title": "Learn about cats", "url": "https://wikipedia.org/wiki/Cat", "image": "assets/bookend_cats.jpg" }, |
landscape | 동영상 같은 다른 콘텐츠나 자료에 연결할 수 있습니다. 가로 모드 타입에 연결된 이미지는 가로로 더 큰 형식으로 되어 있습니다. { "type": "landscape", "title": "Learn about border collies", "url": "https://wikipedia.org/wiki/Border_Collie", "image": "assets/bookend_dogs.jpg", "category": "Dogs" }, |
portrait | 스토리 또는 다른 콘텐츠에 연결할 수 있습니다. 세로 모드 타입에 연결된 이미지는 세로로 더 큰 형식으로 되어 있습니다. { "type": "portrait", "title": "Learn about macaws", "url": "https://wikipedia.org/wiki/Macaw", "image": "assets/bookend_birds.jpg", "category": "birds" }, |
cta-link | 버튼으로 표시되는 클릭 유도문안 링크를 지정할 수 있습니다(예: 자세히 알아보기, 구독). { "type": "cta-link", "links": [ { "text": "Learn more", "url": "https://amp.dev/about/stories.html" } ] } |
북엔드 구성 요소에 대한 더 자세한 내용이 있습니다. amp-story
참조 문서를 확인하세요.
스토리가 거의 완성되었습니다. 콘텐츠를 게시하기 전에 AMP HTML이 유효한지 확인하세요.
-
Written by @bpaduch