Aller au contenu

Créer une page d'index pour les étiquettes

Maintenant que vous avez des pages individuelles pour chaque étiquette, il est temps de créer des liens vers ces dernières.

Préparez-vous à…

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

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

Titre de la section Utiliser le modèle de routage /pages/dossier/index.astro

Pour ajouter à votre site web une page d’index pour les étiquettes, 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.

Essayer par vous-même - Créer une page d’index pour les étiquettes

Titre de la section Essayer par vous-même - Créer une page d’index pour les étiquettes

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

  2. Accédez à l’adresse 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 composant <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 = "Index des étiquettes";
      ---
      <BaseLayout pageTitle={pageTitle}></BaseLayout>

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

Créer un tableau d’étiquettes

Titre de la section Créer 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 tags = ['astro', 'blogging', 'apprentissage en public', 'réussites', 'obstacles', 'communauté']
const pageTitle = "Index des étiquettes";
---
<BaseLayout pageTitle={pageTitle}>
  <ul>
    {tags.map((tag) => <li>{tag}</li>)}
  </ul>
</BaseLayout>

Vous pourriez faire cela, 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 = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
    const pageTitle = "Index des étiquettes";
    ---

  2. Ensuite, ajoutez la ligne de code JavaScript suivante à votre composant de page. Il s’agit du même code reposant sur la prise en charge de TypeScript intégrée dans Astro que vous avez 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 = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
    const tags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
    const pageTitle = "Index des étiquettes";
    ---

Créer votre liste d’étiquettes

Titre de la section Créer votre liste d’étiquettes

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>. La formule devrait vous sembler familière !

  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 l’aperçu de votre navigateur, vérifiez que vos étiquettes sont répertoriées. S’il manque des étiquettes à vos articles de blog ou si elles sont mal formatées, la prise en charge de TypeScript intégrée dans Astro vous indiquera les erreurs afin que vous puissiez vérifier et corriger votre code.

  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>

Ajouter des styles à votre liste d’étiquettes

Titre de la section Ajouter des styles à votre liste d’étiquettes

  1. Ajoutez les classes CSS suivantes pour mettre en forme à la fois votre <div> et chaque <p> qui sera généré. À noter : 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 votre navigateur à l’adresse http://localhost:4321/tags pour vérifier que vous avez de nouveaux styles et que chacune des étiquettes de la page possède un lien fonctionnel vers sa propre page d’étiquette individuelle.

Validation du code

Titre de la section Validation du code

Voici à quoi devrait ressembler votre nouvelle page :

src/pages/tags/index.astro
---
import BaseLayout from '../../layouts/BaseLayout.astro';
const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
const tags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
const pageTitle = "Index des étiquettes";
---
<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>

Ajouter cette page à votre navigation

Titre de la section Ajouter 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, ajoutez un lien vers cette nouvelle page d’index pour 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

Titre de la section 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 code 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 <div class="tags">...</div> et <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.toString().slice(0,10)}</p>
    

      <p>Écrit par : {frontmatter.author}</p>
    

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

      <div class="tags">
        {tags.map((tag: string) => (
          <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 props (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 props d’un article de blog individuel ?

Donnez-moi un autre indice !

Pour utiliser les props (valeurs transmises) d’un article de blog en Markdown dans votre mise en page, comme les étiquettes, 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

Titre de la section 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.toString().slice(0,10)}</p>


  <p>Écrit par : {frontmatter.author}</p>


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


  <div class="tags">
    {frontmatter.tags.map((tag: string) => (
      <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>

Tester vos connaissances

Titre de la section Tester 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

  2. src/pages/posts.astro

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

Liste de contrôle

Titre de la section Liste de contrôle

Ressources

Titre de la section Ressources
Contribuer Communauté Parrainer