Générer des pages d'étiquettes

Préparez-vous à…

• Créez une page pour générer plusieurs pages
• Spécifiez les routes de page à construire et transmettez à chaque page ses propres valeurs

Routage dynamique des pages

Titre de la section Routage dynamique des pages

Vous pouvez créer des ensembles entiers de pages dynamiquement en utilisant des fichiers .astro qui exportent une fonction getStaticPaths().

Créez des pages dynamiquement

Titre de la section Créez des pages dynamiquement

1. Créez un nouveau fichier à l’emplacement src/pages/tags/[tag].astro (vous devrez créer un nouveau dossier). Remarquez que le nom du fichier ([tag].astro) utilise des crochets. Collez le code suivant dans le fichier :

   src/pages/tags/[tag].astro

   ---
   import BaseLayout from '../../layouts/BaseLayout.astro';
   
   export async function getStaticPaths() {
     return [
       { params: { tag: "astro" } },
       { params: { tag: "succès" } },
       { params: { tag: "communauté" } },
       { params: { tag: "blogging" } },
       { params: { tag: "obstacles" } },
       { params: { tag: "apprentissage en public" } },
     ];
   }
   
   const { tag } = Astro.params;
   ---
   <BaseLayout pageTitle={tag}>
     <p>Articles étiquetés avec {tag}</p>
   </BaseLayout>

   La fonction getStaticPaths retourne un tableau de routes de page, et toutes les pages correspondant à ces routes utiliseront le même modèle défini dans le fichier.

2. Si vous avez personnalisé vos billets de blog, remplacez les valeurs individuelles des balises (par exemple, « astro », « succès », « communauté », etc.) par les balises utilisées dans vos propres billets.

3. Assurez-vous que chaque billet de blog contient au moins une balise, écrite sous forme de tableau, par exemple tags: ["blogging"].

4. Visitez http://localhost:4321/tags/astro dans votre aperçu de navigateur, et vous devriez voir une page générée dynamiquement à partir de [tag].astro. Assurez-vous également que des pages sont créées pour chacune de vos balises à /tags/succès, /tags/communauté, et /tags/learning%20in%20public, etc., ou pour chacune de vos balises personnalisées. Vous devrez peut-être d’abord quitter et redémarrer le serveur de développement pour voir ces nouvelles pages.

Utilisation des props dans les routes dynamiques

Titre de la section Utilisation des props dans les routes dynamiques

1. Ajoutez les props suivantes à votre fonction getStaticPaths() pour rendre les données de tous vos billets de blog disponibles à chaque route de page.

   Assurez-vous d’attribuer les nouvelles props à chaque route de votre tableau, puis rendez ces props disponibles dans le modèle de composant en dehors de votre fonction.

   src/pages/tags/[tag].astro

   ---
   import BaseLayout from '../../layouts/BaseLayout.astro';
   
   export async function getStaticPaths() {
     const allPosts = await Astro.glob('../posts/*.md');
   
     return [
       {params: {tag: "astro"}, props: {posts: allPosts}},
       {params: {tag: "succès"}, props: {posts: allPosts}},
       {params: {tag: "communauté"}, props: {posts: allPosts}},
       {params: {tag: "blogging"}, props: {posts: allPosts}},
       {params: {tag: "obstacles"}, props: {posts: allPosts}},
       {params: {tag: "apprentissage en public"}, props: {posts: allPosts}}
     ];
   }
   
   const { tag } = Astro.params;
   const { posts } = Astro.props;
   ---

2. Filtrez votre liste de billets pour inclure uniquement les billets contenant l’étiquette de cette page.

   src/pages/tags/[tag].astro

   ---
   const { tag } = Astro.params;
   const { posts } = Astro.props;
   const filteredPosts = posts.filter((post) => post.frontmatter.tags?.includes(tag));
   ---

3. Vous pouvez maintenant mettre à jour votre modèle HTML pour afficher une liste de chaque billet de blog contenant l’étiquette de cette page. Ajoutez le code suivant à [tag].astro :

   src/pages/tags/[tag].astro

   <BaseLayout pageTitle={tag}>
     <p>Articles étiquetés avec {tag}</p>
     <ul>
       {filteredPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
     </ul>
   </BaseLayout>

4. Vous pouvez même refactoriser cela pour utiliser votre composant <BlogPost /> ! (N’oubliez pas d’importer ce composant en haut de [tag].astro.)

   src/pages/tags/[tag].astro

   <BaseLayout pageTitle={tag}>
     <p>Articles étiquetés avec {tag}</p>
     <ul>
       {filteredPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
       {filteredPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
     </ul>
   </BaseLayout>

5. Vérifiez votre aperçu de navigateur pour chacune de vos pages d’étiquette, et vous devriez maintenant voir une liste de tous vos billets de blog contenant cette étiquette.

Analysez le modèle

Titre de la section Analysez le modèle

Pour chacun des éléments suivants, indiquez si le code est écrit à l’intérieur de la fonction getStaticPaths() ou à l’extérieur de celle-ci.

1. L’appel Astro.glob() pour recevoir des informations sur tous vos fichiers .md à transmettre à chaque route de page.

   1. à l’intérieur de getStaticPaths
   2. à l’extérieur de getStaticPaths

   Envoyer

2. La liste des routes à générer (retourner) par getStaticPaths()

   1. à l’intérieur de getStaticPaths
   2. à l’extérieur de getStaticPaths

   Envoyer

3. Les valeurs reçues de props et de params à utiliser dans le modèle HTML.

   1. à l’intérieur de getStaticPaths
   2. à l’extérieur de getStaticPaths

   Envoyer

À retenir

Si vous avez besoin d’informations pour construire les routes de page, écrivez-les à l’intérieur de la fonction getStaticPaths.

Pour recevoir des informations dans le modèle HTML d’une route de page, écrivez-les à l’extérieur de getStaticPaths.

JavaScript avancé : Générer des pages à partir d’étiquettes existantes

Titre de la section JavaScript avancé : Générer des pages à partir d’étiquettes existantes

Vos pages d’étiquettes sont désormais définies statiquement dans [tag].astro. Si vous ajoutez une nouvelle balise à un billet de blog, vous devrez également revenir sur cette page et mettre à jour vos routes de page.

L’exemple suivant montre comment remplacer votre code sur cette page par du code qui recherchera automatiquement et générera des pages pour chaque étiquette utilisée dans vos billets de blog.

Note

Même si cela semble difficile, vous pouvez essayer de suivre les étapes pour construire vous-même cette fonction ! Si vous ne souhaitez pas parcourir le code JavaScript requis pour le moment, vous pouvez passer à la version finale du code et l’utiliser directement dans votre projet, en remplaçant le contenu existant.

1. Vérifiez que tous vos billets de blog contiennent des étiquettes

   Revisitez chacune de vos pages Markdown existantes et assurez-vous que chaque billet contient un tableau tags dans son frontmatter. Même si vous n’avez qu’une seule étiquette, elle doit toujours être écrite sous forme de tableau, par exemple tags: ["blogging"].

2. Créez un tableau de toutes vos étiquettes existantes

   Ajoutez le code suivant pour obtenir une liste de toutes les balises utilisées dans vos billets de blog.

   src/pages/tags/[tag].astro

   ---
   import BaseLayout from '../../layouts/BaseLayout.astro';
   
   export async function getStaticPaths() {
     const allPosts = await Astro.glob('../posts/*.md');
   
     const uniqueTags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
   }

   Expliquez-moi en détail ce que fait cette ligne de code !

   Il est normal que cela ne soit pas quelque chose que vous auriez écrit vous-même pour le moment !

   Elle parcourt chaque billet Markdown, un par un, et combine chaque tableau d’étiquettes en un seul tableau plus grand. Ensuite, elle crée un nouvel ensemble (Set) à partir de toutes les étiquettes individuelles trouvées (pour ignorer les valeurs répétées). Enfin, elle transforme cet ensemble en un tableau (sans duplications) que vous pouvez utiliser pour afficher une liste d’étiquettes sur votre page.

   Vous avez maintenant un tableau uniqueTags avec les éléments "astro", "succès", "communauté", "blogging", "obstables", "apprentissage en public".

3. Remplacez la valeur de retour de la fonction getStaticPaths

   src/pages/tags/[tag].astro

   return [
     {params: {tag: "astro"}, props: {posts: allPosts}},
     {params: {tag: "succès"}, props: {posts: allPosts}},
     {params: {tag: "communauté"}, props: {posts: allPosts}},
     {params: {tag: "blogging"}, props: {posts: allPosts}},
     {params: {tag: "obstables"}, props: {posts: allPosts}},
     {params: {tag: "apprentissage en public"}, props: {posts: allPosts}}
   ]
   
   return uniqueTags.map((tag) => {
     const filteredPosts = allPosts.filter((post) => post.frontmatter.tags.includes(tag));
     return {
       params: { tag },
       props: { posts: filteredPosts },
     };
   });

4. Une fonction getStaticPaths doit toujours renvoyer une liste d’objets contenant params (comment appeler chaque route de page) et éventuellement des props (les données que vous souhaitez transmettre à ces pages). Plus tôt, vous avez défini chaque nom d’étiquette que vous saviez être utilisé dans votre blog et avez transmis la liste complète des billets comme props à chaque page.

   Maintenant, vous générez cette liste d’objets automatiquement en utilisant votre tableau uniqueTags pour définir chaque paramètre.

   Et maintenant, la liste de tous les billets de blog est filtrée avant d’être envoyée à chaque page comme props. Assurez-vous de supprimer la ligne de code précédente filtrant les billets, et mettez à jour votre modèle HTML pour utiliser posts au lieu de filteredPosts.

   src/pages/tags/[tag].astro

   const { tag } = Astro.params;
   const { posts } = Astro.props;
   const filteredPosts = posts.filter((post) => post.frontmatter.tags.includes(tag));
   ---
   <!-- -->
   <ul>
       {filteredPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
       {posts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
   </ul>

Code final

Titre de la section Code final

Pour vérifier votre travail, ou si vous souhaitez simplement disposer d’un code complet et correct à copier dans [tag].astro, voici à quoi doit ressembler votre composant Astro :

src/pages/tags/[tag].astro

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import BlogPost from '../../components/BlogPost.astro';

export async function getStaticPaths() {
  const allPosts = await Astro.glob('../posts/*.md');

  const uniqueTags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];

  return uniqueTags.map((tag) => {
    const filteredPosts = allPosts.filter((post) => post.frontmatter.tags.includes(tag));
    return {
      params: { tag },
      props: { posts: filteredPosts },
    };
  });
}

const { tag } = Astro.params;
const { posts } = Astro.props;
---
<BaseLayout pageTitle={tag}>
  <p>Articles étiquetés avec {tag}</p>
  <ul>
    {posts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
  </ul>
</BaseLayout>

Maintenant, vous devriez être en mesure de visiter n’importe laquelle de vos pages d’étiquettes dans votre aperçu de navigateur.

Accédez à http://localhost:4321/tags/communauté et vous devriez voir une liste uniquement de vos billets de blog avec l’étiquette communauté. De même, http://localhost:4321/tags/learning%20in%20public devrait afficher une liste des billets de blog étiquetés avec apprentissage en public.

Dans la prochaine section, vous créerez des liens de navigation vers ces pages.

Testez vos connaissances

Titre de la section Testez vos connaissances

Choisissez le terme qui correspond à la description.

1. Une fonction qui renvoie un tableau de routes de page.

   1. params
   2. routage dynamique
   3. getStaticPaths()
   4. props

   Envoyer

2. Le processus de création de plusieurs routes de page à partir d’un seul fichier dans Astro.

   1. params
   2. routage dynamique
   3. getStaticPaths()
   4. props

   Envoyer

3. Une valeur qui définit le nom d’une route de page générée dynamiquement.

   1. params
   2. routage dynamique
   3. getStaticPaths()
   4. props

   Envoyer

Liste de contrôle

Titre de la section Liste de contrôle

• Je peux générer des pages dynamiquement.
• Je peux transmettre des props à chaque route de page.

Ressources

Titre de la section Ressources

• Routage dynamique des pages dans Astro

• Documentation de l’API getStaticPaths()