layout.html

A arquitetura de um projeto PWA no painel da increazy se dá por um conceito bem simples. Já estipulamos um padrão de pastas e arquivos para a base do projeto.

Em resumo, temos: Arquivos, Layout, Páginas, Assets e Elementos.

Explicando sobre o arquivo base

O arquivo layout.html é encontrado no menu lateral da IDE em: Layouts > layout.html. Ele é responsável por montar a grid do projeto e carregar consigo os scripts e links iniciais. Um exemplo bem simples será listado abaixo:

<!DOCTYPE html>

<html lang="pt">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="{{ _asset('/style/global.css') }}">
</head>

<body>
  {{ core }}

  {% include 'template/header' %}

  {{ page }}

  {% include 'template/rodape' %}

  {{ scripts }}
</body>

</html>

É claro que esse é um exemplo simples, mas acredito que tenham entendido a ideia. Mas para que fique claro, você pode adicionar novas tags links e scripts adicionais que desejarem, vale lembrar que eles são carregados apenas no primeiro momento em que o site é iniciado, ao trocar de página eles não serão iniciados novamente.

Atributos	Descrição
`{{ core }}`	(Padrão) Faz a chamada de funcionalidades importantes para o projeto não é recomendado remover esse campo.
`{% include 'template/header' %}`	(Customizável) Importa o Header da sessão de `Elementos`.
`{{ page }}`	(Padrão) traz o conteúdo da página listada.
`{% include 'template/rodape' %}`	(Customizável) Importa o Footer da sessão de `Elementos`.
`{{ scripts }}`	(Padrão) Importa os scripts padrões para o funcionamento do projeto, não é recomendado remover esse campo.

Abaixo temos uma imagem que representa de forma simples a estrutura inicial da PWA.

An image

layout.html

Explicando sobre o arquivo base​

Explicando sobre o arquivo base