Générer des pages d'étiquettes

Préparez-vous à…

• Créer une page pour générer plusieurs pages
• Spécifier les routes de page à générer et transmettre à chaque page ses propres props

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éer des pages dynamiquement

Titre de la section Créer 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: "réussites" } },
       { 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 renvoie 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 articles de blog, remplacez les valeurs individuelles des étiquettes (par exemple, « astro », « réussites », « communauté », etc.) par les étiquettes utilisées dans vos propres articles.

3. Assurez-vous que chaque article 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 étiquettes aux adresses /tags/réussites, /tags/communauté, et /tags/apprentissage%20en%20public, etc., ou pour chacune de vos étiquettes 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 que les données de tous vos articles de blog soient disponibles pour chaque route de page.

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

   src/pages/tags/[tag].astro

   ---
   import BaseLayout from '../../layouts/BaseLayout.astro';
   
   export async function getStaticPaths() {
     const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
   
     return [
       {params: {tag: "astro"}, props: {posts: allPosts}},
       {params: {tag: "réussites"}, 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 d’articles, en utilisant la prise en charge de TypeScript intégrée dans Astro, pour inclure uniquement les articles contenant l’étiquette de cette page.

   src/pages/tags/[tag].astro

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

3. Vous pouvez maintenant mettre à jour votre modèle HTML pour afficher une liste de chaque article 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: any) => <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: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
       {filteredPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
     </ul>
   </BaseLayout>

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

Analyser la formule

Titre de la section Analyser la formule

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 import.meta.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 étiquette à un article 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 articles 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 articles de blog contiennent des étiquettes

   Revisitez chacune de vos pages Markdown existantes et assurez-vous que chaque article 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 en utilisant la prise en charge de TypeScript intégrée dans Astro

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

   src/pages/tags/[tag].astro

   ---
   import BaseLayout from '../../layouts/BaseLayout.astro';
   
   export async function getStaticPaths() {
     const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
   
     const uniqueTags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
   }

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

   Ce n’est pas grave si ce n’est pas quelque chose que vous auriez écrit par vous-même pour le moment !

   Elle parcourt chaque article 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", "réussites", "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: "réussites"}, 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: any) => post.frontmatter.tags.includes(tag));
     return {
       params: { tag },
       props: { posts: filteredPosts },
     };
   });

4. Une fonction getStaticPaths devrait 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 articles 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 articles 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 articles, 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: any) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
       {posts.map((post: any) => <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 = Object.values(import.meta.glob('../posts/*.md', { eager: true }));

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

  return uniqueTags.map((tag) => {
    const filteredPosts = allPosts.filter((post: any) => 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: any) => <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 articles de blog avec l’étiquette communauté. De même, http://localhost:4321/tags/apprentissage%20en%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.

Tester vos connaissances

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