Construye una página de índice de etiquetas

Ahora que tienes páginas individuales para cada etiqueta, es hora de hacer enlaces a ellas.

Prepárate para…

• Añade una nueva página usando el patrón de enrutamiento /pages/folder/index.astro
• Muestra una lista de todas tus etiquetas únicas, enlazando a cada página de etiqueta
• Actualiza tu sitio con enlaces de navegación a esta nueva página de Etiquetas

Usa el patrón de enrutamiento /pages/folder/index.astro

Para añadir una página de Índice de Etiquetas a tu sitio web, podrías crear un nuevo archivo en src/pages/tags.astro.

Pero, ya que ya tienes el directorio /tags/, puedes aprovechar otro patrón de enrutamiento en Astro, y mantener todos tus archivos relacionados con etiquetas juntos.

Pruébalo tú mismo - Crea una página de Índice de Etiquetas

1. Crea un nuevo archivo index.astro en el directorio src/pages/tags/.

2. Navega a http://localhost:4321/tags y verifica que tu sitio ahora contiene una página en esta URL. Estará vacía, pero existirá.

3. Crea una página mínima en src/pages/tags/index.astro que use tu layout. ¡Ya has hecho esto antes!

   Expande para ver los pasos

   1. Crea un nuevo componente de página en src/pages/tags/.

      Muestra el nombre del archivo

      index.astro

   2. Importa y usa tu <BaseLayout>.

      Muestra el código

      src/pages/tags/index.astro

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

   3. Define un título de página, y pásalo a tu layout como un atributo de componente.

      Muestra el código

      src/pages/tags/index.astro

      ---
      import BaseLayout from '../../layouts/BaseLayout.astro';
      const pageTitle = "Tag Index";
      ---
      <BaseLayout pageTitle={pageTitle}></BaseLayout>

4. Revisa la vista previa de tu navegador de nuevo y deberías tener una página formateada, ¡lista para añadir contenido!

Crea un array de etiquetas

Anteriormente has mostrado elementos en una lista desde un array usando map(). ¿Cómo sería definir un array de todas tus etiquetas, luego mostrarlas en una lista en esta página?

Muestra el código

src/pages/tags/index.astro

---
import BaseLayout from '../../layouts/BaseLayout.astro';
const tags = ['astro', 'blogging', 'learning in public', 'successes', 'setbacks', 'community']
const pageTitle = "Tag Index";
---
<BaseLayout pageTitle={pageTitle}>
  <ul>
    {tags.map((tag) => <li>{tag}</li>)}
  </ul>
</BaseLayout>

Podrías hacer esto, pero entonces necesitarías volver a este archivo y actualizar tu array cada vez que uses una nueva etiqueta en un futuro post de blog.

Afortunadamente, ya conoces una forma de obtener los datos de todos tus archivos Markdown en una línea de código, luego retornar una lista de todas tus etiquetas.

1. En src/pages/tags/index.astro, añade la línea de código al script de frontmatter que dará a tu página acceso a los datos de cada archivo .md de post de blog.

   Muestra el código

   src/pages/tags/index.astro

   ---
   import BaseLayout from '../../layouts/BaseLayout.astro';
   const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
   const pageTitle = "Tag Index";
   ---

2. Luego, añade la siguiente línea de JavaScript a tu componente de página. Este es el mismo código que usa el soporte integrado de TypeScript de Astro que usaste en src/pages/tags/[tag].astro para retornar una lista de etiquetas únicas.

   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 = "Tag Index";
   ---

Crea tu lista de etiquetas

En lugar de crear elementos en una lista desordenada esta vez, crea un <p> para cada elemento, dentro de un <div>. ¡El patrón debería ser familiar!

1. Añade el siguiente código a tu plantilla de componente:

   src/pages/tags/index.astro

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

   En la vista previa de tu navegador, verifica que puedas ver tus etiquetas listadas. Si a algún post de blog le faltan etiquetas, o están mal formateados, el soporte integrado de TypeScript de Astro te mostrará errores para que puedas revisar y corregir tu código.

2. Para hacer que cada etiqueta enlace a su propia página, añade el siguiente enlace <a> a cada nombre de etiqueta:

   src/pages/tags/index.astro

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

Añade estilos a tu lista de etiquetas

1. Añade las siguientes clases CSS para estilizar tanto tu <div> como cada <p> que será generado. Nota: ¡Astro usa sintaxis HTML para añadir nombres de clase!

   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. Define estas nuevas clases CSS añadiendo la siguiente etiqueta <style> a esta página:

   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. Revisa la vista previa de tu navegador en http://localhost:4321/tags para verificar que tienes algunos estilos nuevos y que cada una de las etiquetas en la página tiene un enlace funcional a su propia página de etiqueta individual.

Check-In de Código

Así es como debería verse tu nueva página:

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 = "Tag Index";
---
<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>

Añade esta página a tu navegación

Ahora mismo, puedes navegar a http://localhost:4321/tags y ver esta página. Desde esta página, puedes hacer clic en enlaces a tus páginas de etiquetas individuales.

Pero, aún necesitas hacer que estas páginas sean descubribles desde otras páginas en tu sitio web.

1. En tu componente Navigation.astro, incluye un enlace a esta nueva página de índice de etiquetas.

   Muéstrame el código

   src/components/Navigation.astro

   <a href="/">Home</a>
   <a href="/about/">About</a>
   <a href="/blog/">Blog</a>
   <a href="/tags/">Tags</a>

Reto: Incluye etiquetas en tu layout de post de blog

Ahora has escrito todo el código que necesitas para también mostrar una lista de etiquetas en cada post de blog, y enlazarlas a sus páginas de etiquetas. ¡Tienes trabajo existente que puedes reutilizar!

Sigue los pasos a continuación, luego comprueba tu trabajo comparándolo con el ejemplo de código final.

1. Copia el <div class="tags">...</div> y <style>...</style> de src/pages/tags/index.astro y reutilízalo dentro de MarkdownPostLayout.astro:

   src/layouts/MarkdownPostLayout.astro

   ---
   import BaseLayout from './BaseLayout.astro';
   const { frontmatter } = Astro.props;
   ---
   <BaseLayout pageTitle={frontmatter.title}>
     <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
     <p><em>{frontmatter.description}</em></p>
     <p>Written by: {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>

Antes de que este código funcione, necesitas hacer una pequeña edición al código que pegaste en MarkdownPostLayout.astro. ¿Puedes averiguar cuál es?

Dame una pista

¿Cómo están escritos los otros props (ej. title, author, etc.) en tu plantilla de layout? ¿Cómo recibe tu layout props de un post de blog individual?

¡Dame otra pista!

Para usar props (valores pasados) de un post de blog .md en tu layout, como etiquetas, necesitas prefijar el valor con una cierta palabra.

¡Muéstrame el código!

src/layouts/MarkdownPostLayout.astro

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

Check-in de Código: MarkdownPostLayout

Para comprobar tu trabajo, o si solo quieres código completo y correcto para copiar en MarkdownPostLayout.astro, aquí está cómo debería verse tu componente de 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>Written by: {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>

Pon a prueba tu conocimiento

Empareja cada ruta de archivo con una segunda ruta de archivo que creará una página en la misma ruta.

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

   Enviar

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

   Enviar

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

   Enviar

Checklist

• Puedo usar la función de enrutamiento /pages/folder/index.astro de Astro.

Recursos

• Enrutamiento Estático en Astro