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

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}.

<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 dans index.astro (« Page d’accueil ») et blog.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.

É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.)

---
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 :

<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>

Tester vos connaissances

Le frontmatter d’un fichier .astro est écrit en :
1. HTML
2. YAML
3. JavaScript
En plus du HTML, la syntaxe d’Astro vous permet d’inclure :
1. Des opérateurs logiques, des expressions et des fonctions JavaScript
2. YAML
3. Markdown
Quand devez-vous écrire votre JavaScript entre des accolades ?
1. Lorsque vous n’êtes pas sûr que ce soit correct.
2. Lorsque vous êtes à l’intérieur de la section du modèle HTML d’un composant Astro.
3. Entre les délimiteurs de code dans un composant Astro.

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 :

---
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 :

{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.

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 !

{operatingSystem}

Linux
{student && Je suis encore à l'école.}

Rien ne s’affichera car student est évalué comme faux (false).
J'ai {quantity + 8} paires de {footwear}

J'ai 11 paires de bottes
{operatingSystem === "MacOS" ? J'utilise un Mac. : Je n'utilise pas un Mac.}

Je n'utilise pas un Mac.

Liste de contrôle

Je peux définir des valeurs et les utiliser dans des fichiers .astro.
Je peux afficher conditionnellement des éléments HTML.

Ressources

Expressions dynamiques dans Astro

Contribuer Communauté Parrainer