Arquivos de layout: +layout.svelte
Compartilhe a navegação e a interface estrutural entre várias páginas com componentes de layout.
Arquivos de layout: +layout.svelte é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Os layouts envolvem as páginas
Um arquivo +layout.svelte envolve todas as páginas na mesma pasta e nas suas subpastas.
Layout raiz
src/routes/+layout.svelte envolve todas as páginas do aplicativo. É um local comum para a navegação e a estrutura geral.
<!-- +layout.svelte -->
<nav>...</nav>
<main>
<slot />
</main>O slot
A página atual é inserida onde <slot /> aparece.
Layouts aninhados
Adicione +layout.svelte a qualquer subpasta para criar layouts específicos de uma seção.
src/routes/admin/+layout.svelte // wraps all /admin/* pagesHerança de layouts
As páginas herdam todos os layouts pais, da raiz até o nível mais profundo. Empilhe-os para compartilhar a interface.
Carregamento de dados do layout
Combine com +layout.js para carregar os dados necessários ao layout.
Interface condicional
Os layouts podem ler $page para se ajustar com base na URL atual.
Redefinição do layout
Utilize a notação +page@ para sair de um layout em uma página específica.
Grupos de layouts
Utilize pastas como (marketing) para layouts que não adicionam segmentos à URL.
Páginas de erro
Coloque +error.svelte em qualquer pasta de layout para capturar erros dessa seção.
Reutilização de layouts
Os layouts facilitam a criação de uma interface consistente. Não é necessário repassar propriedades em cadeia.
Verificação rápida
Onde a página é renderizada dentro de um layout?
Recapitulação
Os layouts envolvem as páginas por meio de +layout.svelte com um <slot />. Eles são aninhados de acordo com a profundidade das pastas.
Perguntas Frequentes
A aula “Arquivos de layout: +layout.svelte” é grátis?
Sim — o texto completo de “Arquivos de layout: +layout.svelte” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Arquivos de layout: +layout.svelte”?
Compartilhe a navegação e a interface estrutural entre várias páginas com componentes de layout. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Arquivos de layout: +layout.svelte”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Roteamento baseado em arquivos com +page.svelte
- Parâmetros de rota dinâmicos: [id]
- Parâmetros opcionais e de resto
- Arquivos de layout: +layout.svelte