La Conclusión

Los pies de página contienen navegación secundaria, enlaces legales, información de contacto y avisos de derechos de autor. Al igual que los encabezados, pertenecen al layout para que aparezcan de forma consistente en todas las páginas.

Lo Que Aprenderás

Agregar un pie de página debajo del contenido de la página
Incluir elementos comunes del pie de página
Completar la estructura básica del layout

Agregar el Pie de Página

Actualiza tu layout para incluir un pie de página después de <main>:

<!-- filename: src/routes/+layout.svelte -->
<script>
  let { children } = $props();
</script>

<div class="app">
  <header>
    <nav>
      <a href="/" class="logo">BookIt</a>
      
      <ul>
        <li><a href="/services">Services</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    {@render children()}
  </main>
  
  <footer>
    <div class="footer-content">
      <div class="footer-section">
        <h4>BookIt</h4>
        <p>Simple online booking for local services.</p>
      </div>
      
      <div class="footer-section">
        <h4>Quick Links</h4>
        <ul>
          <li><a href="/services">Services</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
      
      <div class="footer-section">
        <h4>Contact</h4>
        <p>hello@bookit.example</p>
        <p>(555) 123-4567</p>
      </div>
    </div>
    
    <div class="footer-bottom">
      <p>&copy; {new Date().getFullYear()} BookIt. All rights reserved.</p>
    </div>
  </footer>
</div>

El pie de página incluye:

Descripción de la marca
Enlaces de navegación rápida
Información de contacto
Derechos de autor con año dinámico

Estilizar el Pie de Página

Agrega estilos de pie de página a tu bloque <style> existente:

<style>
  /* ... existing header/nav/main styles ... */
  
  footer {
    background: #333;
    color: #fff;
    padding: 2rem 1rem 1rem;
    margin-top: auto;
  }
  
  .footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .footer-section {
    flex: 1;
    min-width: 200px;
  }
  
  .footer-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
  }
  
  .footer-section p {
    margin: 0.5rem 0;
    color: #aaa;
  }
  
  .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-section li {
    margin: 0.5rem 0;
  }
  
  .footer-section a {
    color: #aaa;
    text-decoration: none;
  }
  
  .footer-section a:hover {
    color: #fff;
  }
  
  .footer-bottom {
    border-top: 1px solid #444;
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .footer-bottom p {
    margin: 0;
    color: #888;
    font-size: 0.875rem;
  }
</style>

Año de Derechos de Autor Dinámico

Observa esta línea:

<p>&copy; {new Date().getFullYear()} BookIt. All rights reserved.</p>

La expresión {new Date().getFullYear()} ejecuta JavaScript para obtener el año actual. Cuando 2025 se convierta en 2026, el pie de página se actualizará automáticamente. No se necesitan cambios manuales.

Probar el Layout Completo

Visita cualquier página. Deberías ver:

Encabezado — Logo y navegación en la parte superior
Principal — Contenido específico de la página en el medio
Pie de página — Información del sitio y enlaces en la parte inferior

Desplázate hasta el final de las páginas cortas — el pie de página debería estar en la parte inferior del viewport (gracias a margin-top: auto en el footer y flexbox en .app).

El Layout Completo

Aquí está el +layout.svelte completo:

<!-- filename: src/routes/+layout.svelte -->
<script>
  let { children } = $props();
</script>

<div class="app">
  <header>
    <nav>
      <a href="/" class="logo">BookIt</a>
      
      <ul>
        <li><a href="/services">Services</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    {@render children()}
  </main>
  
  <footer>
    <div class="footer-content">
      <div class="footer-section">
        <h4>BookIt</h4>
        <p>Simple online booking for local services.</p>
      </div>
      
      <div class="footer-section">
        <h4>Quick Links</h4>
        <ul>
          <li><a href="/services">Services</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
      
      <div class="footer-section">
        <h4>Contact</h4>
        <p>hello@bookit.example</p>
        <p>(555) 123-4567</p>
      </div>
    </div>
    
    <div class="footer-bottom">
      <p>&copy; {new Date().getFullYear()} BookIt. All rights reserved.</p>
    </div>
  </footer>
</div>

<style>
  .app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem;
  }
  
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .logo {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }
  
  header ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  header li a {
    text-decoration: none;
    color: #666;
  }
  
  header li a:hover {
    color: #333;
  }
  
  main {
    flex: 1;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }
  
  footer {
    background: #333;
    color: #fff;
    padding: 2rem 1rem 1rem;
    margin-top: auto;
  }
  
  .footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .footer-section {
    flex: 1;
    min-width: 200px;
  }
  
  .footer-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
  }
  
  .footer-section p {
    margin: 0.5rem 0;
    color: #aaa;
  }
  
  .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-section li {
    margin: 0.5rem 0;
  }
  
  .footer-section a {
    color: #aaa;
    text-decoration: none;
  }
  
  .footer-section a:hover {
    color: #fff;
  }
  
  .footer-bottom {
    border-top: 1px solid #444;
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .footer-bottom p {
    margin: 0;
    color: #888;
    font-size: 0.875rem;
  }
</style>

Errores Comunes

Pie de Página Antes de `{@render children()}`

<!-- ❌ Footer appears above page content -->
<footer>...</footer>
{@render children()}

<!-- ✅ Footer appears below page content -->
{@render children()}
<footer>...</footer>

El orden importa. El contenido se renderiza en el orden en que aparece en tu layout.

Codificar el Año de Forma Estática

<!-- ❌ Needs manual update every year -->
<p>&copy; 2025 BookIt</p>

<!-- ✅ Always current -->
<p>&copy; {new Date().getFullYear()} BookIt</p>

El año dinámico significa una cosa menos que mantener.

Resumen

BookIt ahora tiene un layout completo con encabezado y pie de página. Cada página obtiene automáticamente navegación consistente e información del sitio sin ningún código a nivel de página.

Puntos clave:

El pie de página va después de {@render children()} en el layout
Usa el elemento semántico <footer> para accesibilidad
Las expresiones dinámicas como {new Date().getFullYear()} mantienen el contenido actualizado

Próximos Pasos

El layout raíz envuelve todo, pero a veces las secciones necesitan un envoltorio adicional. Continúa con Layouts Anidados para aprender cómo la sección de servicios puede tener su propia subnavegación.