Criação do bookend
Depois de adicionar todas as páginas, veremos a última tela da história, o "bookend". Essa tela encerra a história e permite incluir links de compartilhamento social e relacionados à sua história. Assim, os usuários podem compartilhar o material ou navegar mais em outros conteúdos do seu site.
As informações na tela de bookend vêm de um arquivo JSON especificado na tag <amp-story-bookend>. Para nosso tutorial, já temos um arquivo JSON (bookend.json) com os dados correspondentes.
A tag <amp-story-bookend> precisa ser a última tag em amp-story. Então, adicionaremos <amp-story-bookend></amp-story-bookend> antes da tag </amp-story>. Na tag amp-story-bookend, vincule o atributo src ao arquivo bookend.json e defina layout="nodisplay":
</amp-story-page>
<amp-story-bookend src="bookend.json" layout="nodisplay"></amp-story-bookend>
</amp-story>
Se você atualizar o navegador e acessar a última tela, verá o seguinte bookend:
Vejamos o arquivo JSON. Abra bookend.json no seu editor de texto.
Toda tela de bookend exige um bookendVersion, que é v1.0 neste tutorial:
"bookendVersion": "v1.0",
Os botões de compartilhamento social permitem que os leitores compartilhem seu conteúdo por meio de plataformas sociais, como Twitter, Facebook, Pinterest e outros. Você especifica os provedores de compartilhamento social em um objeto shareProviders e cria uma matriz com os nomes dos tipos de cada plataforma social.
Para este tutorial, escolhemos Facebook, Twitter e e-mail como nossos provedores de compartilhamento:
"shareProviders": [
"facebook",
"twitter",
"email"
],
O restante da tela de bookend é para o conteúdo relacionado. Todo esse conteúdo está em um objeto components.
Há vários componentes que você pode usar para exibir links e conteúdo relacionado. Cada componente é especificado com um atributo de tipo. Vejamos os componentes disponíveis:
| Tipo | Descrição |
|---|---|
| heading | Permite especificar um título para agrupar artigos.
{
"type": "heading",
"text": "More to read"
},
|
| small | Permite vincular artigos relacionados com a opção de incluir uma imagem associada pequena.
{
"type": "small",
"title": "Learn about cats",
"url": "https://wikipedia.org/wiki/Cat",
"image": "assets/bookend_cats.jpg"
},
|
| landscape | Permite incluir links para artigos ou outros conteúdos, como vídeos. A imagem associada a esse tipo é maior e no formato paisagem.
{
"type": "landscape",
"title": "Learn about border collies",
"url": "https://wikipedia.org/wiki/Border_Collie",
"image": "assets/bookend_dogs.jpg",
"category": "Dogs"
},
|
| portrait | Permite incluir links para histórias ou outros conteúdos. A imagem associada a esse tipo é maior e no formato retrato.
{
"type": "portrait",
"title": "Learn about macaws",
"url": "https://wikipedia.org/wiki/Macaw",
"image": "assets/bookend_birds.jpg",
"category": "birds"
},
|
| cta-link | Permite especificar links de calls-to-action exibidos como botões (por exemplo, "Leia mais", "Assine").
{
"type": "cta-link",
"links": [
{
"text": "Learn more",
"url": "https://amp.dev/about/stories.html"
}
]
}
|
Veja mais informações sobre o componente de bookend. Acesse a documentação de referência do amp-story.
Nossa história está quase pronta. Antes de publicar o conteúdo, vamos verificar se o HTML para AMP é válido.