Salta ai contenuti

Costruisci una pagina indice di tag

Ora che hai singole pagine per ogni tag, è il momento di creare link ad esse.

Preparati a…

  • Aggiungi una nuova pagina usando il pattern di routing /pages/cartella/index.astro
  • Visualizza un elenco di tutti i tuoi tag unici, collegandoli a ogni pagina di tag
  • Aggiorna il tuo sito con link di navigazione a questa nuova pagina Tag

Usa il pattern di routing /pages/cartella/index.astro

Sezione intitolata Usa il pattern di routing /pages/cartella/index.astro

Per aggiungere una pagina Indice di Tag al tuo sito web, potresti creare un nuovo file in src/pages/tags.astro.

Ma, dato che hai già la directory /tags/, puoi sfruttare un altro pattern di routing in Astro e mantenere tutti i tuoi file relativi ai tag insieme.

Prova tu stesso - Crea una pagina Indice di Tag

Sezione intitolata Prova tu stesso - Crea una pagina Indice di Tag

  1. Crea un nuovo file index.astro nella directory src/pages/tags/.

  2. Naviga su http://localhost:4321/tags e verifica che il tuo sito contenga ora una pagina a questo URL. Sarà vuota, ma esisterà.

  3. Crea una pagina minima in src/pages/tags/index.astro che usi il tuo layout. L’hai già fatto prima!

    Espandi per vedere i passaggi

    1. Crea un nuovo componente pagina in src/pages/tags/.

      Mostra il nome del file
      index.astro

    2. Importa e usa il tuo <BaseLayout>.

      Mostra il codice
      src/pages/tags/index.astro
      ---
      import BaseLayout from '../../layouts/BaseLayout.astro';
      ---
      <BaseLayout></BaseLayout>

    3. Definisci un titolo di pagina e passalo al tuo layout come attributo del componente.

      Mostra il codice
      src/pages/tags/index.astro
      ---
      import BaseLayout from '../../layouts/BaseLayout.astro';
      const pageTitle = "Indice di Tag";
      ---
      <BaseLayout pageTitle={pageTitle}></BaseLayout>

  4. Controlla di nuovo l’anteprima del tuo browser e dovresti avere una pagina formattata, pronta per aggiungere contenuto!

Crea un array di tag

Sezione intitolata Crea un array di tag

Hai precedentemente visualizzato elementi in un elenco da un array usando map(). Come sarebbe definire un array di tutti i tuoi tag, poi visualizzarli in un elenco su questa pagina?

Vedi il codice
src/pages/tags/index.astro
---
import BaseLayout from '../../layouts/BaseLayout.astro';
const tags = ['astro', 'blogging', 'imparare in pubblico', 'successi', 'battute d\'arresto', 'community']
const pageTitle = "Indice di Tag";
---
<BaseLayout pageTitle={pageTitle}>
  <ul>
    {tags.map((tag) => <li>{tag}</li>)}
  </ul>
</BaseLayout>

Potresti farlo, ma poi dovresti tornare a questo file e aggiornare il tuo array ogni volta che usi un nuovo tag in un futuro articolo del blog.

Fortunatamente, conosci già un modo per prendere i dati da tutti i tuoi file Markdown in una riga di codice, poi restituire un elenco di tutti i tuoi tag.

  1. In src/pages/tags/index.astro, aggiungi la riga di codice allo script frontmatter che darà alla tua pagina accesso ai dati da ogni file di articoli del blog .md.

    Vedi il codice
    src/pages/tags/index.astro
    ---
    import BaseLayout from '../../layouts/BaseLayout.astro';
    const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
    const pageTitle = "Indice di Tag";
    ---

  2. Poi, aggiungi la seguente riga di JavaScript al tuo componente pagina. Questo è lo stesso codice che si basa sul supporto TypeScript integrato di Astro che hai usato in src/pages/tags/[tag].astro per restituire un elenco di tag unici.

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

Crea il tuo elenco di tag

Sezione intitolata Crea il tuo elenco di tag

Invece di creare elementi in un elenco non ordinato questa volta, crea un <p> per ogni elemento, all’interno di un <div>. Lo schema dovrebbe sembrare familiare!

  1. Aggiungi il seguente codice al tuo template componente:

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

    Nell’anteprima del tuo browser, verifica di poter vedere i tuoi tag elencati. Se mancano tag a qualsiasi articolo del blog, o se sono formattati in modo errato, il supporto TypeScript integrato di Astro ti mostrerà errori in modo da poter controllare e correggere il tuo codice.

  2. Per far sì che ogni tag si colleghi alla propria pagina, aggiungi il seguente link <a> a ogni nome di tag:

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

Aggiungi stili al tuo elenco di tag

Sezione intitolata Aggiungi stili al tuo elenco di tag

  1. Aggiungi le seguenti classi CSS per stilizzare sia il tuo <div> che ogni <p> che verrà generato. Nota: Astro usa la sintassi HTML per aggiungere nomi di 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. Definisci queste nuove classi CSS aggiungendo il seguente tag <style> a questa pagina:

    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. Controlla l’anteprima del tuo browser su http://localhost:4321/tags per verificare di avere alcuni nuovi stili e che ognuno dei tag sulla pagina abbia un link funzionante alla propria singola pagina di tag.

Verifica del Codice

Sezione intitolata Verifica del Codice

Ecco come dovrebbe apparire la tua nuova pagina:

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

Aggiungi questa pagina alla tua navigazione

Sezione intitolata Aggiungi questa pagina alla tua navigazione

In questo momento, puoi navigare su http://localhost:4321/tags e vedere questa pagina. Da questa pagina, puoi cliccare su link alle tue singole pagine di tag.

Ma, devi ancora rendere queste pagine individuabili da altre pagine sul tuo sito web.

  1. Nel tuo componente Navigation.astro, includi un link a questa nuova pagina indice di tag.

    Mostrami il codice
    src/components/Navigation.astro
    <a href="/">Home</a>
    <a href="/about/">Su di me</a>
    <a href="/blog/">Blog</a>
    <a href="/tags/">Tag</a>

Sfida: Includi tag nel tuo layout di articoli del blog

Sezione intitolata Sfida: Includi tag nel tuo layout di articoli del blog

Hai ora scritto tutto il codice di cui hai bisogno per visualizzare anche un elenco di tag su ogni articolo del blog e collegarli alle loro pagine di tag. Hai lavoro esistente che puoi riutilizzare!

Segui i passaggi seguenti, poi controlla il tuo lavoro confrontandolo con l’esempio di codice finale.

  1. Copia <div class="tags">...</div> e <style>...</style> da src/pages/tags/index.astro e riutilizzalo all’interno di 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>Scritto da: {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>

Prima che questo codice funzioni, devi apportare una piccola modifica al codice che hai incollato in MarkdownPostLayout.astro. Riesci a capire qual è?

Dammi un suggerimento

Come sono scritte le altre props (es. title, author, ecc.) nel tuo template layout? Come riceve il tuo layout le props da un singolo articolo del blog?

Dammi un altro suggerimento!

Per usare props (valori passati) da un articolo del blog .md nel tuo layout, come i tag, devi prefissare il valore con una certa parola.

Mostrami il codice!
src/layouts/MarkdownPostLayout.astro
    <div class="tags">
      {frontmatter.tags.map((tag: string) => (
        <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
      ))}
    </div>

Verifica del Codice: MarkdownPostLayout

Sezione intitolata Verifica del Codice: MarkdownPostLayout

Per controllare il tuo lavoro, o se vuoi solo codice completo e corretto da copiare in MarkdownPostLayout.astro, ecco come dovrebbe apparire il tuo componente 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>Scritto da: {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>

Metti alla prova le tue conoscenze

Sezione intitolata Metti alla prova le tue conoscenze

Abbina ogni percorso di file con un secondo percorso di file che creerà una pagina alla stessa rotta.

  1. src/pages/categories.astro

  2. src/pages/posts.astro

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

Checklist

Sezione intitolata Checklist

Risorse

Sezione intitolata Risorse
Contribuisci Comunità Sponsor