Stories in AMP - Hello World
Introduction
Learn how to create your first AMP Story. The amp-story extension provides a new format for displaying visual content.
Setup
AMP Stories are written using AMPHTML and they use their own AMP extension: amp-story. The first step is to import the amp-story in the header.
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
AMP Stories can make use of other AMP extensions such as amp-video. However, AMP Stories support only a subset of the available AMP extensions. You can find a full list of the supported extensions here.
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Stories can be styled using CSS:
<style amp-custom>
amp-story {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI ", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji ", "Segoe UI Emoji ", "Segoe UI Symbol ";
}
amp-story-page * {
color: white;
text-align: center;
}
[template=thirds] {
padding: 0;
}
</style>
Writing the Story
Stories are declared inside the amp-story tag. Story-level metadata is provided via attributes. (The first four attributes are mandatory; the final two are optional, but recommended.) Note that this metadata augments, but does not replace, Structured Data.
<amp-story standalone
title="Stories in AMP - Hello World"
publisher="AMP Project"
publisher-logo-src="https://amp.dev/favicons/coast-228x228.png"
poster-portrait-src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
poster-square-src="https://amp.dev/static/samples/img/story_dog2_square.jpg"
poster-landscape-src="https://amp.dev/static/samples/img/story_dog2_landscape.jpg">
A story consists of one or more pages. Each page is declared by an amp-story-page element. Pages are designed by layering videos, images and text. Here we have a page that uses two layers. One layer filling the available space with an image and one text layer that shows a heading.
<amp-story-page id="page-1">
<amp-story-grid-layer template="fill">
<amp-img src="https://amp.dev/static/samples/img/story_dog2.jpg"
width="720" height="1280"
layout="responsive">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>Hello World</h1>
<p>This is an AMP Story.</p>
</amp-story-grid-layer>
</amp-story-page>
Here we have a page consisting of a video which autoplays and loops.
<amp-story-page id="page-2">
<amp-story-grid-layer template="fill">
<amp-video autoplay loop
width="720"
height="960"
poster="https://amp.dev/static/samples/img/story_video_dog_cover.jpg"
layout="responsive">
<source src="https://amp.dev/static/samples/video/story_video_dog.mp4" type="video/mp4">
</amp-video>
</amp-story-grid-layer>
</amp-story-page>
Pre-defined entry animations make it possible to create dynamic pages without videos. The length and initial delay can be customized using the animate-in-duration and animate-in-delay properties. The animations sample shows all available animantions in action.
<amp-story-page id="animation-demo">
<amp-story-grid-layer template="fill">
<amp-img src="https://amp.dev/static/samples/img/story_dog4.jpg"
animate-in="fly-in-top"
width="720" height="1280"
layout="responsive"
alt="...">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="thirds">
<h2 animate-in="fly-in-bottom"
grid-area="lower-third"
animate-in-delay="0.4s">
Best walk ever!
</h2>
</amp-story-grid-layer>
</amp-story-page>
Stories can use predefined layouts to style the page. Here we're using the thirds template. For an overview about the available layouts take a look at the layouts sample.
<amp-story-page id="layout-demo">
<amp-story-grid-layer template="thirds">
<amp-img grid-area="upper-third"
src="https://amp.dev/static/samples/img/story_thirds_1.jpg"
width="560" height="420"
layout="responsive"
alt="...">
</amp-img>
<amp-img grid-area="middle-third"
src="https://amp.dev/static/samples/img/story_thirds_2.jpg"
width="560" height="420"
layout="responsive"
alt="...">
</amp-img>
<amp-img grid-area="lower-third"
src="https://amp.dev/static/samples/img/story_thirds_3.jpg"
width="560"
height="420"
layout="responsive"
alt="...">
</amp-img>
</amp-story-grid-layer>
</amp-story-page>
A "bookend" panel containing links to other resources will appear on the last page of your story if you include an amp-story-bookend that references a bookend JSON config.
<amp-story-bookend src="https://amp.dev/static/samples/json/bookend.json" layout="nodisplay">
</amp-story-bookend>
Если на этой странице нет ответов на все ваши вопросы, обратитесь к другим пользователям AMP и обсудите свой конкретный сценарий использования.
Перейти на Stack Overflow Не нашли пояснения к функции?Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.
Редактировать пример на GitHub