Ajouter du contenu dynamique à propos de vous
Maintenant que vous avez un site web multi-pages avec du contenu HTML, il est temps d’ajouter un peu de HTML dynamique !
Préparez-vous à…
- Définir le titre de votre page dans le frontmatter et à l’utiliser dans votre HTML
- Afficher conditionnellement des éléments HTML
- Ajouter des informations vous concernant
Tout fichier HTML est un langage Astro valide. Mais Astro permet bien plus que du simple HTML !
Définir et utiliser une variable
Section intitulée « Définir et utiliser une variable »Ouvrez about.astro
, qui devrait ressembler à ceci :
------<html lang="fr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Astro</title> </head> <body> <a href="/">Accueil</a> <a href="/about/">À propos</a> <a href="/blog/">Blog</a> <h1>À propos de moi</h1> <h2>... et de mon nouveau site Astro !</h2>
<p>Je suis en train de suivre le tutoriel d'introduction d'Astro. C'est la deuxième page de mon site web, et c'est la première que j'ai construite moi-même !</p>
<p>Ce site se mettra à jour au fur et à mesure que je compléterai davantage le tutoriel, alors revenez régulièrement voir comment se déroule mon parcours !</p> </body></html>
-
Ajoutez la ligne de code JavaScript suivante dans le script du frontmatter, entre les délimiteurs de code:
src/pages/about.astro ---const pageTitle = "À propos de moi";--- -
Remplacez à la fois le titre statique « Astro » et « À propos de moi » dans votre HTML par la variable dynamique
{pageTitle}
.src/pages/about.astro <html lang="fr"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>Astro</title><title>{pageTitle}</title></head><body><a href="/">Accueil</a><a href="/about/">À propos</a><a href="/blog/">Blog</a><h1>À propos de moi</h1><h1>{pageTitle}</h1><h2>... et de mon nouveau site Astro !</h2><p>Je suis en train de suivre le tutoriel d'introduction d'Astro. C'est la deuxième page de mon site web, et c'est la première que j'ai construite moi-même !</p><p>Ce site se mettra à jour au fur et à mesure que je compléterai davantage le tutoriel, alors revenez régulièrement voir comment se déroule mon parcours !</p></body></html> -
Actualisez l’aperçu en direct de votre page
/about
.Le texte de votre page devrait rester le même, et le titre de la page affiché dans l’onglet de votre navigateur devrait maintenant indiquer « À propos de moi » au lieu de « Astro ».
Au lieu de saisir du texte directement dans les balises HTML, vous avez simplement défini puis utilisé une variable dans les deux sections de votre fichier
.astro
, respectivement. -
Utilisez le même modèle pour créer une valeur
pageTitle
à utiliser dansindex.astro
(« Page d’accueil ») etblog.astro
(« Mon blog d’apprentissage d’Astro »). Mettez à jour le HTML de ces pages aux deux endroits pour que le titre de la page corresponde au titre affiché sur chaque page.
- Définissez des variables dans votre script Astro en utilisant des expressions JavaScript ou TypeScript.
- Utilisez ces variables dans votre modèle Astro entre des accolades
{}
pour indiquer à Astro que vous utilisez du JavaScript.
Écrire des expressions JavaScript dans Astro
Section intitulée « Écrire des expressions JavaScript dans Astro »-
Ajoutez le code JavaScript suivant dans votre frontmatter, entre les délimiteurs de code :
(Vous pouvez personnaliser le code à votre convenance, mais ce tutoriel utilisera l’exemple suivant.)
src/pages/about.astro ---const pageTitle = "À propos de moi";const identity = {firstName: "Sarah",country: "Canada",occupation: "Rédactrice technique",hobbies: ["photographie", "observation des oiseaux", "baseball"],};const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Rédaction de documentation"];--- -
Ensuite, ajoutez le code suivant à votre modèle HTML, en dessous de votre contenu existant :
src/pages/about.astro <p>Voici quelques faits me concernant :</p><ul><li>Je m'appelle {identity.firstName}.</li><li>Je vis au {identity.country} et je travaille en tant que {identity.occupation}.</li>{identity.hobbies.length >= 2 &&<li>Deux de mes loisirs sont : {identity.hobbies[0]} et {identity.hobbies[1]}</li>}</ul><p>Voici mes compétences :</p><ul>{skills.map((skill) => <li>{skill}</li>)}</ul>
- Rédiger un modèle Astro ressemble beaucoup à rédiger du HTML, mais vous pouvez inclure des expressions JavaScript à l’intérieur.
- Le script du frontmatter d’Astro ne contient que du JavaScript.
- Vous pouvez utiliser tous les opérateurs logiques, les expressions et les fonctions modernes JavaScript dans l’une ou l’autre section de votre fichier
.astro
. Mais, les accolades sont nécessaires (uniquement) dans le corps du modèle HTML.
Tester vos connaissances
Section intitulée « Tester vos connaissances »-
Le frontmatter d’un fichier
.astro
est écrit en : -
En plus du HTML, la syntaxe d’Astro vous permet d’inclure :
-
Quand devez-vous écrire votre JavaScript entre des accolades ?
Afficher des éléments de manière conditionnelle
Section intitulée « Afficher des éléments de manière conditionnelle »Vous pouvez également utiliser les variables de votre script pour choisir d’afficher ou non des éléments individuels dans le corps (<body>
) de votre HTML.
-
Ajoutez les lignes suivantes à votre script du frontmatter pour définir des variables :
src/pages/about.astro ---const pageTitle = "À propos de moi";const identity = {firstName: "Sarah",country: "Canada",occupation: "Rédactrice technique",hobbies: ["photographie", "observation des oiseaux", "baseball"],};const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Rédaction de documentation"];const happy = true;const finished = false;const goal = 3;--- -
Ajoutez ensuite les lignes suivantes en dessous de vos paragraphes existants.
Ensuite, vérifiez l’aperçu en direct dans l’onglet de votre navigateur pour voir ce qui est affiché sur la page :
src/pages/about.astro {happy && <p>Je suis heureux d'apprendre Astro !</p>}{finished && <p>J'ai terminé ce tutoriel !</p>}{goal === 3 ? <p>Mon objectif est de terminer en 3 jours.</p> : <p>Mon objectif n'est pas de 3 jours.</p>} -
Envoyez vos modifications sur GitHub avant de passer à la suite. Faites-le à chaque fois que vous souhaitez sauvegarder votre travail et mettre à jour votre site web en ligne.
La syntaxe de création de modèles d’Astro est similaire à la syntaxe JSX. Si vous vous demandez comment utiliser votre script dans votre HTML, alors chercher comment cela se fait en JSX est probablement un bon point de départ !
Analyser la formule
Section intitulée « Analyser la formule »Étant donné le script .astro
suivant :
---const operatingSystem = "Linux";const quantity = 3;const footwear = "bottes";const student = false;---
Pour chaque expression du modèle Astro suivante, pouvez-vous prédire le HTML (le cas échéant !) qui sera envoyé au navigateur ? Cliquez pour révéler si vous avez raison !
-
<p>{operatingSystem}</p>
-
{student && <p>Je suis encore à l'école.</p>}
-
<p>J'ai {quantity + 8} paires de {footwear}</p>
-
{operatingSystem === "MacOS" ? <p>J'utilise un Mac.</p> : <p>Je n'utilise pas un Mac.</p>}