Usando Suporte Embutido do Ghost a AMP

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nesse tutorial, mostraremos os principais aspectos do uso do suporte embutido do Ghost a AMP.

Nota: Esse artigo assume sermos familiarizados com a criação de páginas AMP válidas. Assim, será mais focado no uso conjunto do AMP e Ghost. Se for novato no AMP, veja:

Também assumimos o conhecimento da criação de temas do Ghost. Caso contrário, podemos aprender lendo:

Suporte Embutido do Ghost ao AMP

Na verdade, Ghost traz suporte automático ao AMP sem precisarmos levantar um dedo. A versão AMP de qualquer artigo pode ser visitada adicionando /amp/ à URL. A versão padrão de qualquer artigo também inclui um link na seção <head> avisando o Google da disponibilidade da versão AMP.

Devida a essa funcionalidade automática, se visitarmos um artigo do Ghost usando o Chrome com a extensão AMP Validator instalada, veremos um pequeno ícone link azul indicando que uma versão AMP da página foi detectada.

Cliquemos no ícone e seremos redirecionados à versão AMP, onde veremos o ícone ficar verde indicando código AMP válido.

Esse suporte automatizado ao AMP é apenas para artigos únicos, porém. Outros conteúdos, como a página inicial ou páginas de tags não terão versão AMP a menos que façamos manualmente o tema inteiro para ser compatível com código AMP.

Usando Modelo Customizado do AMP

Por padrão, a apresentação de artigos AMP no Ghost é controlado por um modelo interno. Para ver como o modelo é criado e ver como AMP funciona no Ghost, podemos ver o modelo padrão dentro da instalação Ghost em /core/server/apps/amp/lib/views/amp.hbs.

Se preferirmos nossa própria marcação e estilo para artigos AMP, precisamos criar um modelo chamado "amp.hbs" no diretório raiz do tema.

Nosso modelo AMP não estenderá o modelo "default.hbs", como faríamos ao criar modelos de temas do Ghost. Porém, deve ser criado como um documento HTML completo com seus próprios elementos html, head e body.

O motivo disso é que precisamos garantir:

O uso do código AMP essencial na tag <html ⚡> e na seção head
CSS é carregado numa forma válida no AMP
Os scripts AMP obrigatórios foram carregados pelo Ghost
Nenhum JS customizado é carregado

O arquivo "default.hbs" num tema típico do Ghost não atenderia os requerimentos acima, por isso precisa ser um documento próprio e completo "amp.hbs".

Lidando com CSS

Há algumas outras coisas a ter em mente quando a CSS em modelos AMP.

Primeiro, fontes customizadas apenas de uma das fontes aprovadas e de forma válida pelo AMP. Por exemplo, uma fonte do Google pode ser carregada via URL como //fonts.googleapis.com no modelo "default.hbs", mas para passar na validação do "amp.hbs", precisamos mudar para https://fonts.googleapis.com.

A outra consideração é que precisamos de todo CSS customizado entre as tags <style amp-custom>...</style> na seção head, com o CSS não excedendo 50kb e passando nas regras de CSS do AMP.

Há duas formas de obtermos isso:

Criar CSS AMP específico para páginas AMP
Criar CSS para todo o site seguindo as regras AMP e usá-lo em qualquer lugar.

Se o site "padrão" precisar de CSS pesado, talvez a primeira opção seja melhor, caso contrário, a segunda pode ser mais fácil.

Manter toda a folha de estilo de um site abaixo de 50kb pode ser complicado dado os frameworks CSS populares ficam na faixa dos 120~150kb, mas se quisermos mesmo, 50kb é possível. Por exemplo, o CSS não minificado do tema padrão do Ghost, Casper, é 45.5kb.

Se quisermos usar essa abordagem, criemos um modelo intermediário, css.hbs, e coloquemos todo o código CSS lá. Então carreguemos esse CSS no modelo default.hbs, assim:

<style>
  {{> css}}
</style>

E no modelo amp.hbs, usamos assim:

<style amp-custom>
  {{> css}}
</style>

Para obter o máximo do CSS, podemos minificá-lo antes de colocá-lo no modelo intermediário. Podemos monitorar o tamanho do arquivo para ter uma boa idea se estamos dentro do limite de 50kb.

Expressões Head e Foot do Ghost

Na seção head o modelo amp.hbs precisamos incluir a expressão {{amp_ghost_head}} ao invés do padrão {{ghost_head}}. Isso garantirá que nenhum JS será retornado no head, o que invalidaria a página.

E, diferente de modelos Ghost padrão, devemos omitir a experssão {{ghost_footer}} por completo.

Acessando Dados

Todo o conteúdo do artigo pode ser exposto no modelo amp.hbs usando a expressão {{post}}...{{/post}}. Entre essas tags podemo usar os utilitários para retornar conteúdo:

Também podemos usar o global @blog no modelo amp.hbs, como @blog.title e @blog.url, dentro ou fora da expressão {{post}}...{{/post}}.

Usando Elementos AMP

Como sabemos, AMP requer alguns de seus próprios elementos ao invés de elementos HTML padrão. Isso significa que precisamos ajustar dois aspectos de sites Ghost para usar elementos AMP:

O conteúdo do artigo buscado da base de dados
Nosso código no modelo amp.hbs

No conteúdo do artigo, Ghost pode detectar automaticamente imagens, iframes, gifs e elementos de áudio e reescreve-los em suas alternativas AMP.

Para habilitar isso, precisamos incluir {{amp_componentes}} na seção head, antes de </head>, que retornará os scripts AMP adicionais dos elementos customizados. Também precisaremos usar {{amp_content}} ao invés de {{content}} para a marcação correta dos elementos customizados seja produzida.

Já em relação ao código do modelo amp.hbs, precisaremos adicionar quaisquer elementos AMP manualmente. Por exemplo, se incluirmos uma imagem destaque do artigo, usaríamos:

<amp-img src={{image absolute="true"}} width="600" height="400" layout="responsive"></amp-img>

Resumindo

Isso cobre o essencial em lidar com o suporte embutido do Ghost ao AMP. Recapitulemos os pontos chave:

AMP funciona automaticamente em artigos únicos
Adicionamos /amp/ à URL para ver a versão AMP do artigo.
Para customizar o modelo AMP, criamos um modelo amp.hbs no diretório raiz do tema
Garantir que o CSS usado é válido para AMP
Considerar criar CSS válido para AMP para todo o site e colocá-lo em um modelo intermediário, de modo que possamos usá-lo tanto em default.hbs e amp.hbs
Incluir {{amp_ghost_head}} ao invés de {{ghost_head}}
Não incluir {{ghost_foot}}
Incluir {{amp_components}} logo antes de </head>
No modelo amp.hbs podemo usar a expressão {{post}}...{{/post}} e os dados globais de @blog
Usar {{amp_content}} para retornar conteúdo. Isso deve ser usado dentro de {{post}}{{/post}}.
Garantir que quaisquer elemento fixos no amp.hbs usem os elementos AMP customizados se houver

Isso nos traz o final do tutorial. Fiquemos de olho em relação a mais dicas sobre o uso de AMP com outras plataformas de criação em breve!

Leitura Adicional

Documentação sobre AMP no Ghost