Cette introduction aux mises en page dans Astro est exclue de Libérer la puissance d’Astrodisponible dès maintenant sur SitePoint Premium.
Tandis que chacun .astro page (route) a le potentiel de contenir un document HTML à part entière, il est inefficace de dupliquer cette structure, surtout lorsque certains éléments, tels que <meta> et <title> éléments – peuvent varier en fonction de la page actuellement consultée. (L’inefficacité vient du fait qu’il faudrait potentiellement ajouter la même structure HTML à chaque .astro page.)
Par conséquent, il est conseillé d’établir une mise en page globale pouvant être utilisée sur toutes les pages. Bien que cela ne soit pas obligatoire, l’organisation des fichiers de mise en page au sein du src/layouts le dossier a du sens, permettant l’ajout de plusieurs fichiers de mise en page, comme un pour la navigation et un autre pour un pied de page, ou même de diviser la mise en page pour certaines parties de la page (par exemple, une mise en page distincte pour la page globale et pour le blog) .
Considérez ce qui suit comme exemple de site Web de base qui engloberait des éléments d’interface utilisateur communs :
layouts/Layout.astro: le fichier de mise en page principallayouts/Head.astro: une section pour la personnalisation<head>éléments, potentiellement uniques pour chaque pagelayouts/Nav.astro: une barre de navigationlayouts/Footer.astro: une section de pied de page
Voici un aperçu de layouts/Layout.astro déposer:
---
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">
<title>{title}</title>
<meta name="description" content={description}>
<body>
<Nav />
<div>
<main>
<slot />
</main>
</div>
<Footer />
</body>
</html>
Notez que, dans l’exemple ci-dessus, nous mélangeons des éléments HTML standards avec des composants Astro. Ceux qui sont en majuscule (Nav et Footer) sont des composants Astro importés dans la partie supérieure de cet exemple de fichier de mise en page.
Astro.props
Il y a quelques points à retenir ici. Prenez note du import fonction et l’utilisation de Astro.props. Nous pouvons facilement importer n’importe quel autre composant en utilisant le import mot-clé. Le spécial intégré Astro.props L’objet nous permet d’envoyer des propriétés aux composants et d’y accéder. Dans le code ci-dessus, les valeurs par défaut sont définies si Astro.props il manque le title ou description clés (les valeurs par défaut sont Footie is the best et An online football magazine). Il s’agit d’une bonne pratique et nous exploitons la fonctionnalité de paramètres par défaut de JavaScript mélangée à la déstructuration d’objets. Cependant, s’il y a props envoyés, Astro viendra les chercher. Jetons un coup d’œil à cela en examinant le code ci-dessous :
<!-- Uses the defaults -->
<Layout />
<!-- Sets title to "My Title," while description retains its default value -->
<Layout title="My Title" />
La première <Layout /> le composant n’en a pas props qui lui est attaché, il aura donc recours aux valeurs par défaut mentionnées précédemment. Toutefois, dans le deuxième scénario, le title prop est envoyé avec la valeur de My Titlece qui signifie que la page affichera le titre approprié.
Propriétés globales des objets
Plusieurs propriétés sont disponibles à partir de l’objet global intégré Astro.
Enfin, prenez note du <slot /> élément, qui sert de point d’insertion pour le contenu d’individus .astro pages. Plus d’informations à ce sujet sous peu.
Veuillez également faire attention à <Head> Composant Astro. Supposons que la propriété et la variable contenant la valeur que nous souhaitons envoyer à la propriété partagent le même nom. Dans ce cas, nous pouvons utiliser une syntaxe plus simple :
const title="my title";
<Head title={title} />
<!-- Can be simplified to 👇 -->
<Head {title} />
Fente
Enfin, parlons un peu plus du système intégré <slot /> élément. Une fois les mises en page prêtes, le contenu des fichiers Astro dans le src/pages Le dossier sera injecté là où l’élément mentionné ci-dessus est placé.
Pour appliquer une mise en page à un fichier Astro, nous devons l’importer et l’utiliser comme nous utiliserions n’importe quel autre composant :
---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Welcome">
<p>Some content that will be injected into the "slot"</p>
</Layout>Vous voulez en savoir plus sur Astro, le framework tout-en-un moderne permettant de créer des sites Web plus rapides et axés sur le contenu ? Vérifier Libérer la puissance d’Astrodisponible dès maintenant sur SitePoint Premium.
Source link