Dispositions dans Astro-js tutoriel-php.cn

Dispositions dans Astro

William Shakespeare

Libérer： 2025-02-08 11:17:09

original

919 Les gens l'ont consulté

Cet extrait de didacticiel Astro Layout, de déchaînant la puissance d'Astro (disponible sur SitePoint Premium), montre une structuration efficace du site Web. Bien que chaque page Astro puisse contenir un document HTML complet, la redondance est évitée en utilisant des dispositions. Ceci est particulièrement bénéfique pour des éléments comme les balises <meta> et <title></title>, qui varient souvent par page.

Organisation de fichiers de mise en page dans le dossier src/layouts est recommandé pour l'évolutivité. Plusieurs dispositions peuvent être créées - par exemple, des mises en page distinctes pour la navigation, les pieds de page ou même les différentes sections de page.

Un exemple de structure de site Web peut inclure:

layouts/Layout.astro: le fichier de mise en page principal.
layouts/Head.astro: gère le contenu spécifique à la page .
layouts/Nav.astro: la barre de navigation.
layouts/Footer.astro: le pied de page.

Layouts in Astro

Le fichier layouts/Layout.astro peut ressembler à ceci:

---
import Head from './Head.astro';
import Nav from './Nav.astro';
const { title = 'Footie is the best', description = 'An online football magazine' } = Astro.props;
import Footer from './Footer.astro';
---

<html lang="en">
<head>
  <Head />
  <title>{title}</title>
  <meta content="{description}" name="description">
</head>
<body>
  <Nav />
  <main>
    <slot />
  </main>
  <Footer />
</body>
</html>

Copier après la connexion

Cette approche favorise le code plus propre et plus maintenable en centralisant les éléments communs et en permettant une personnalisation facile par page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!