Archivos de layout: +layout.svelte
Comparta la navegación y la interfaz estructural entre varias páginas mediante componentes de layout
Archivos de layout: +layout.svelte es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Los layouts envuelven las páginas
Un archivo +layout.svelte envuelve todas las páginas de la misma carpeta y sus subcarpetas.
Layout raíz
src/routes/+layout.svelte envuelve todas las páginas de la aplicación. Es un lugar habitual para la navegación y la estructura general.
<!-- +layout.svelte -->
<nav>...</nav>
<main>
<slot />
</main>El slot
La página actual se inserta donde aparece <slot />.
Layouts anidados
Añada +layout.svelte en cualquier subcarpeta para definir layouts específicos de una sección.
src/routes/admin/+layout.svelte // wraps all /admin/* pagesHerencia de layouts
Las páginas heredan todos los layouts principales, desde la raíz hacia abajo. Apílelos para compartir la interfaz.
Carga de datos del layout
Combínelo con +layout.js para cargar los datos que necesita el layout.
Interfaz condicional
Los layouts pueden leer $page para adaptarse según la URL actual.
Restablecer el layout
Utilice la notación +page@ para salir de un layout en una página específica.
Grupos de layouts
Utilice carpetas como (marketing) para layouts que no añaden segmentos a la URL.
Páginas de error
Coloque +error.svelte en cualquier carpeta de layout para capturar los errores de esa sección.
Reutilizar layouts
Los layouts facilitan la creación de una interfaz coherente. No es necesario pasar props por varios niveles.
Comprobación rápida
¿Dónde se muestra la página dentro de un layout?
Resumen
Los layouts envuelven las páginas mediante +layout.svelte y un <slot />. Se anidan según la profundidad de las carpetas.
Preguntas frecuentes
¿La lección «Archivos de layout: +layout.svelte» es gratis?
Sí — el texto completo de «Archivos de layout: +layout.svelte» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Archivos de layout: +layout.svelte»?
Comparta la navegación y la interfaz estructural entre varias páginas mediante componentes de layout Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Archivos de layout: +layout.svelte»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Enrutamiento basado en archivos con +page.svelte
- Parámetros de ruta dinámicos: [id]
- Parámetros opcionales y rest
- Archivos de layout: +layout.svelte