Criar um blog ao vivo
Important: this documentation is not applicable to your currently selected format email!
Os blogs ao vivo são páginas da Web atualizadas com frequência durante eventos em andamento, como competições esportivas ou eleições. É possível implementar um blog ao vivo nas AMP por meio do componente amp-live-list.
Este tutorial oferece uma visão geral sobre o componente amp-live-list e se concentra em alguns detalhes de implementação dos blogs ao vivo, como a paginação e os links diretos. A amostra de blog ao vivo do AMP By Example será usada para ilustrar a implementação de blogs ao vivo nas AMP.
Use a marcação de metadados LiveBlogPosting (em inglês) para integrar seu blog a recursos de plataformas de terceiros.
Visão geral do amp-live-list
O componente amp-live-list normalmente busca conteúdo atualizado no documento do host e atualiza o navegador do usuário à medida que novos itens se tornam disponíveis Assim, sempre que for preciso adicionar uma nova postagem no blog, o documento do host será atualizado pelo CMS para incluir a atualização no corpo e na seção de metadados da página.
Este é um exemplo do código inicial do blog:
<amp-live-list id="my-live-list"
data-poll-interval="15000"
data-max-items-per-page="5">
<button update on="tap:my-live-list.update">You have updates</button>
<div items></div>
</amp-live-list>
Vamos analisar esse código:
Cada componente amp-live-list precisa ter um código exclusivo, porque pode haver mais de um deles na página. Nesse exemplo, especificamos my-live-list como o código exclusivo.
O atributo data-poll-interval especifica a frequência das pesquisas. Se o documento do host for atualizado, a atualização será disponibilizada para o usuário após o próximo intervalo.
Toda vez que um novo item for adicionado ao documento do host, o elemento <button update on="tap:my-live-list.update"> exibirá um botão indicando que há atualizações ("You have updates", na imagem). Com um clique, ele mostra as últimas postagens na página.
O conteúdo dos blogs ao vivo pode aumentar bastante, o que deixa a página muito longa. Use o atributo data-max-items-per-page para especificar quantos itens poderão ser adicionados ao blog ao vivo. Se o número de itens após uma atualização for superior a data-max-items-per-page, as atualizações mais antigas que ultrapassarem esse número serão removidas. Por exemplo, se a página tiver 9 itens, data-max-items-per-page estiver definido como 10 e a última atualização tiver 3 itens novos, os 2 itens mais antigos serão removidos da página após essa atualização.
O componente amp-live-list exige que todas as postagens sejam filhas da tag <div items></div>. Ao se referir a cada postagem como um item, cada item precisa ter um id exclusivo e um data-sort-time.
Detalhes da implementação
Agora que você conhece o componente amp-live-list, veremos como implementar um blog ao vivo mais complexo. Leia mais para saber como implementar a paginação e como funcionam os links diretos.
Paginação
Os blogs longos podem usar a paginação para melhorar o desempenho ao limitar o número de itens exibidos em cada página. Para implementar a paginação, adicione o elemento <div pagination></div> ao componente amp-live-list e insira a marcação necessária para a paginação (por exemplo, um número de página ou links para a página seguinte e a anterior).
Com a paginação, o código simples que usamos antes ficará assim:
<amp-live-list id="my-live-list"
data-poll-interval="15000"
data-max-items-per-page="5">
<button update on="tap:my-live-list.update">You have updates</button>
<div items></div>
<div pagination>
<nav>
<ul>
<li>1</li>
<li>Next</li>
</ul>
</nav>
</div>
</amp-live-list>
Você precisa atualizar a página hospedada para preencher os itens de navegação corretamente. Por exemplo, na amostra de blog ao vivo, renderizamos a página por meio de um modelo no servidor e usamos um parâmetro de consulta para especificar o primeiro item do blog que deverá ser exibido na página. Limitamos o tamanho da página a 5 itens. Portanto, se o servidor tiver gerado mais de 5 itens, quando um usuário for para a página principal, ela mostrará o elemento "Próxima" na área de navegação. Consulte amp-live-list para saber mais.
Quando o tamanho das postagens do blog ultrapassar o número máximo de itens especificado por data-max-items-per-page, os itens mais antigos serão exibidos nas páginas seguintes (por exemplo, na página 2). Como amp-live-list pesquisa o servidor regularmente para ver se há alguma alteração nos itens, não será preciso fazer essa pesquisa se o usuário não estiver na primeira página.
É possível adicionar o atributo "disabled" à página hospedada para evitar a ação do mecanismo de pesquisa. Na amostra de blog ao vivo, usamos esse comportamento em um modelo no servidor. Quando a página solicitada não for a primeira, adicionaremos o atributo "disabled" ao componente amp-live-list.
Links diretos
Ao publicar uma postagem do blog, é importante poder criar links diretos para a postagem, porque isso permite o uso de recursos como o compartilhamento. Com o amp-live-list, basta usar o id do item do blog para criar um link direto. Por exemplo, na amostra https://amp.dev/documentation/examples/news-publishing/live_blog/preview/index.html#post3, é possível navegar diretamente para a postagem do blog com o código post3.
O AMP By Example usa um cookie na amostra de blog ao vivo para gerar conteúdo novo. Assim, se for a primeira vez que você acessa a página, talvez a postagem com código "post3" não esteja disponível, mas você será redirecionado para a primeira postagem.
Recursos
Saiba mais com estes recursos: