Ajoutez du contenu dynamique à la page "À propos de moi"

Maintenant que vous avez un site web multi-pages avec du contenu HTML, ajoutons 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

N’importe quel fichier HTML est valide en tant que langage Astro. Mais, vous pouvez faire plus avec Astro qu’avec un HTML classique !

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 barres 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 taper 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 Astro”). Mettez à jour le HTML de ces pages aux deux endroits pour que le titre de la page corresponde à l’en-tête affiché sur chaque page.

Écrire des expressions JavaScript dans Astro

Ajoutez le code JavaScript suivant à votre script du frontmatter, entre les barres 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>

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

Rendre des éléments de manière conditionnelle

Vous pouvez également utiliser vos variables du script pour choisir d’afficher ou non des éléments individuels du contenu HTML de votre <body>.

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

Analysez le modèle

É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 évalue à faux.
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 dans des fichiers .astro et les utiliser.
Je peux rendre conditionnellement des éléments HTML.

Ressources

Expressions dynamiques dans Astro

Contribuer

Communauté