Przejdź do głównej zawartości

Rozszerzenie layoutu

Skoro mamy już więcej niż jedną stronę w aplikacji, przydałby się jakiś element nawigujący.

Dodajemy Navbar​

---
const links = [
  { url: "/", label: "Home" },
  { url: "/about", label: "About" },
  { url: "/contact", label: "Contact" },
];
---
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Cool website</a>
    <button class="navbar-toggler" type="button">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse w-100" id="navbarNav">
      <ul class="navbar-nav w-100">
        {
          links.map(({ url, label }) => (
            <li class="nav-item">
              <a class="nav-link" href={url}>
                {label}
              </a>
            </li>
          ))
        }
      </ul>
    </div>
  </div>
</nav>

Dodajemy Footer z aktualną datą​

// Ten kod wykona się tylko podczas buildu
---
interface Props {
  year?: string;
}

const { year = new Date().getUTCFullYear() } = Astro.props;
---

<footer class="container-fluid text-center p-5 bg-body-tertiary">
  {year} Awesome Brand Website.
</footer>

Importujemy oba komponenty do Layoutu​

  • W pliku /src/layouts/Layout.astro
import Footer from '../components/Footer.astro';
import Navbar from '../components/Navbar.astro';
<body>
  <Navbar />
  <main class="container pt-5 min-vh-100">
    <slot />
  </main>
  <Footer />
</body>

Sprawdzamy jak to wygląda​

Przejdźmy przez wszystkie podstrony.

Czy strony muszą się przeładowywać?​

Astro oferuje komponent ViewTransitions, który pozwoli nam na dynamiczne doczytywanie podstron routingu, tak jak to się dzieje w innych popularnych frameworkach.

Implementacja​

  • W pliku /src/layouts/Layout.astro
import { ViewTransitions } from 'astro:transitions';
<head>
  // ...inne tagi
  <ViewTransitions />
</head>
<body>
  <Navbar />
  <main transition:animate="slide" class="container pt-5 min-vh-100">
    <slot />
  </main>
  <Footer />
</body>

Sprawdźmy rezultat​

Zobaczmy jak strony doczytują się dynamicznie z pomocą narzędzia DevTools Network.