Créer une page répertoriant les étiquettes

Maintenant que vous avez des pages individuelles pour chaque étiquette, créons des liens vers elles.

Préparez-vous à…

• Ajoutez une nouvelle page en utilisant le modèle de routage /pages/dossier/index.astro
• Affichez une liste de toutes vos étiquettes uniques, en créant des liens vers chaque page d’étiquette
• Mettez à jour votre site avec des liens de navigation vers cette nouvelle page d’étiquettes

Utilisez le modèle de routage /pages/dossier/index.astro

Pour ajouter une page répertoire d’étiquettes à votre site web, vous pourriez créer un nouveau fichier à src/pages/tags.astro.

Mais, comme vous avez déjà le dossier /tags/, vous pouvez profiter d’un autre modèle de routage dans Astro et regrouper tous vos fichiers liés aux étiquettes ensemble.

Essayez par vous-même - Créer une page répertoriant les étiquettes

1. Créez un nouveau fichier index.astro dans le dossier src/pages/tags/.

2. Accédez à http://localhost:4321/tags et vérifiez que votre site contient désormais une page à cette URL. Elle sera vide, mais elle existera.

3. Créez une page minimale à src/pages/tags/index.astro qui utilise votre mise en page. Vous avez déjà fait cela auparavant !

   Cliquez pour voir les étapes

   1. Créez un nouveau composant de page dans src/pages/tags/.

      Afficher le nom du fichier

      index.astro

   2. Importez et utilisez votre <BaseLayout>.

      Afficher le code

      src/pages/tags/index.astro

      ---
      import BaseLayout from '../../layouts/BaseLayout.astro';
      ---
      <BaseLayout></BaseLayout>

   3. Définissez un titre de page et transmettez-le à votre mise en page en tant qu’attribut de composant.

      Afficher le code

      src/pages/tags/index.astro

      ---
      import BaseLayout from '../../layouts/BaseLayout.astro';
      const pageTitle = "Répertoire des étiquettes";
      ---
      <BaseLayout pageTitle={pageTitle}></BaseLayout>

4. Vérifiez à nouveau votre aperçu dans le navigateur, et vous devriez avoir une page formatée, prête à ajouter du contenu !

Créez un tableau d’étiquettes

Vous avez déjà affiché des éléments dans une liste à partir d’un tableau en utilisant map(). À quoi cela ressemblerait-il de définir un tableau de toutes vos étiquettes, puis de les afficher dans une liste sur cette page ?

Voir le code

src/pages/tags/index.astro

---
import BaseLayout from '../../layouts/BaseLayout.astro';
const allPosts = await Astro.glob("../posts/*.md");
const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
const pageTitle = "Index des balises";
---
<BaseLayout pageTitle={pageTitle}>
  <ul>
    {tags.map((tag) => <li>{tag}</li>)}
  </ul>
</BaseLayout>

Vous pourriez le faire, mais alors vous devriez revenir sur ce fichier et mettre à jour votre tableau à chaque fois que vous utilisez une nouvelle étiquette dans un futur article de blog.

Heureusement, vous savez déjà comment récupérer les données de tous vos fichiers Markdown en une seule ligne de code, puis renvoyer une liste de toutes vos étiquettes.

1. Dans src/pages/tags/index.astro, ajoutez la ligne de code au script frontmatter qui donnera à votre page accès aux données de chaque fichier de blog .md.

   Voir le code

   src/pages/tags/index.astro

   ---
   import BaseLayout from '../../layouts/BaseLayout.astro';
   const allPosts = await Astro.glob('../posts/*.md');
   const pageTitle = "Répertoire des étiquettes";
   ---

2. Ensuite, ajoutez la ligne de code JavaScript suivante à votre composant de page. Il s’agit du même code que nous avons utilisé dans src/pages/tags/[tag].astro pour renvoyer une liste d’étiquettes uniques.

   src/pages/tags/index.astro

   ---
   import BaseLayout from '../../layouts/BaseLayout.astro';
   const allPosts = await Astro.glob('../posts/*.md');
   const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
   const pageTitle = "Répertoire des étiquettes";
   ---

Créez votre liste de balises

Au lieu de créer des éléments dans une liste non ordonnée cette fois-ci, créez un <p> pour chaque élément, à l’intérieur d’un <div>. Le modèle devrait vous sembler familier !

1. Ajoutez le code suivant à votre modèle de composant :

   src/pages/tags/index.astro

     <BaseLayout pageTitle={pageTitle}>
       <div>{tags.map((tag) => <p>{tag}</p>)}</div>
     </BaseLayout>

   Dans votre aperçu dans le navigateur, vérifiez que vous pouvez voir vos étiquettes répertoriées.

2. Pour que chaque étiquette renvoie à sa propre page, ajoutez le lien <a> suivant à chaque étiquette unique :

   src/pages/tags/index.astro

   <BaseLayout pageTitle={pageTitle}>
     <div>
       {tags.map((tag) => (
         <p><a href={`/tags/${tag}`}>{tag}</a></p>
       ))}
     </div>
   </BaseLayout>

Ajoutez des styles à votre liste d’étiquettes

1. Ajoutez les classes CSS suivantes pour styliser à la fois votre <div> et chaque <p> qui sera généré. Remarque : Astro utilise la syntaxe HTML pour ajouter des noms de classe !

   src/pages/tags/index.astro

   <BaseLayout pageTitle={pageTitle}>
   <div class="tags">
     {tags.map((tag) => (
       <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
     ))}
   </div>
   </BaseLayout>

2. Définissez ces nouvelles classes CSS en ajoutant la balise <style> suivante à cette page :

   src/pages/tags/index.astro

   <style>
     a {
       color: #00539F;
     }
   
     .tags {
       display: flex;
       flex-wrap: wrap;
     }
   
     .tag {
       margin: 0.25em;
       border: dotted 1px #a1a1a1;
       border-radius: .5em;
       padding: .5em 1em;
       font-size: 1.15em;
       background-color: #F8FCFD;
     }
   </style>

3. Vérifiez l’aperçu dans le navigateur à http://localhost:4321/tags pour vérifier que vous avez de nouveaux styles et que chacune des balises de la page a un lien fonctionnel vers sa propre page de balise individuelle.

Validation du code

Voici à quoi devrait ressembler votre nouvelle page :

src/pages/tags/index.astro

---
import BaseLayout from '../../layouts/BaseLayout.astro';
const allPosts = await Astro.glob('../posts/*.md');
const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
const pageTitle = "Index des balises";
---
<BaseLayout pageTitle={pageTitle}>
  <div class="tags">
    {tags.map((tag) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>
</BaseLayout>
<style>
  a {
    color: #00539F;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>

Ajoutez cette page à votre navigation

Actuellement, vous pouvez naviguer vers http://localhost:4321/tags et voir cette page. À partir de cette page, vous pouvez cliquer sur des liens vers vos pages d’étiquettes individuelles.

Cependant, vous devez toujours rendre ces pages accessibles depuis d’autres pages de votre site web.

1. Dans votre composant Navigation.astro, incluez un lien vers cette nouvelle page répertoriant vos étiquettes.

   Affichez-moi le code

   src/components/Navigation.astro

   <a href="/">Accueil</a>
   <a href="/a-propos/">À propos</a>
   <a href="/blog/">Blog</a>
   <a href="/tags/">Étiquettes</a>

Défi : Inclure les étiquettes dans la mise en page de vos articles de blog

Vous avez maintenant écrit tout le code dont vous avez besoin pour afficher également une liste d’étiquettes sur chaque article de blog, et les lier à leurs pages d’étiquettes. Vous avez du travail existant que vous pouvez réutiliser !

Suivez les étapes ci-dessous, puis vérifiez votre travail en le comparant à l’exemple de code final.

1. Copiez le <div class="tags">...</div> et le <style>...</style> depuis src/pages/tags/index.astro et réutilisez-les à l’intérieur de MarkdownPostLayout.astro :

src/layouts/MarkdownPostLayout.astro

---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
  <p><em>{frontmatter.description}</em></p>
  <p>{frontmatter.pubDate.slice(0,10)}</p>

  <p>Rédigé par : {frontmatter.author}</p>

  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />

  <div class="tags">
    {tags.map((tag) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>

  <slot />
</BaseLayout>
<style>
  a {
    color: #00539F;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>

Avant que ce code ne fonctionne, vous devez apporter une petite modification au code que vous avez collé dans MarkdownPostLayout.astro. Pouvez-vous deviner ce que c’est ?

Donnez-moi un indice

Comment les autres propriétés (par exemple, le titre, l’auteur, etc.) sont-elles écrites dans votre modèle de mise en page ? Comment votre mise en page reçoit-elle les propriétés d’un article de blog individuel ?

Donnez-moi un autre indice !

Pour utiliser les propriétés (valeurs passées) d’un article de blog en Markdown dans votre mise en page, comme les balises, vous devez préfixer la valeur avec un certain mot.

Affichez-moi le code !

src/layouts/MarkdownPostLayout.astro

    <div class="tags">
      {frontmatter.tags.map((tag) => (
        <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
      ))}
    </div>

Validation du code : MarkdownPostLayout

Pour vérifier votre travail, ou si vous voulez simplement un code complet et correct à copier dans MarkdownPostLayout.astro, voici à quoi devrait ressembler votre composant Astro :

src/layouts/MarkdownPostLayout.astro

---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
  <p><em>{frontmatter.description}</em></p>
  <p>{frontmatter.pubDate.slice(0,10)}</p>

  <p>Rédigé par : {frontmatter.author}</p>

  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />

  <div class="tags">
    {frontmatter.tags.map((tag) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>

  <slot />
</BaseLayout>
<style>
  a {
    color: #00539F;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>

Testez vos connaissances

Associez chaque chemin de fichier à un deuxième chemin de fichier qui créera une page à la même route.

1. src/pages/categories.astro

   1. src/pages/posts/post.astro
   2. src/pages/posts/index.astro
   3. src/components/shoes/Shoe.astro
   4. src/pages/categories/index.astro

   Envoyer

2. src/pages/posts.astro

   1. src/pages/products/shoes.astro
   2. src/pages/posts/post.astro
   3. src/pages/posts/index.astro
   4. src/pages/categories/index.astro

   Envoyer

3. src/pages/products/shoes/index.astro

   1. src/pages/products/shoes.astro
   2. src/pages/posts/post.astro
   3. src/pages/posts/index.astro
   4. src/components/shoes/Shoe.astro

   Envoyer

Liste de contrôle

• Je peux utiliser la fonction de routage /pages/dossier/index.astro d’Astro.

Ressources

• Routage statique dans Astro