AMP

Criar um blog ao vivo

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.

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: