Zum Inhalt springen

Erstelle eine Tag-Indexseite

Jetzt, wo du für jedes Tag eine eigene Seite hast, kannst du Links zu diesen Seiten erstellen.

Mach dich bereit, …

  • eine neue Seite mit dem Routing-Muster /pages/folder/index.astro hinzuzufügen
  • eine Liste aller deiner eindeutigen Tags anzuzeigen und sie mit den jeweiligen Tag-Seiten zu verlinken
  • deine Website mit Navigationslinks zu dieser neuen Tags-Seite zu aktualisieren

Verwende das Routing-Muster /pages/folder/index.astro

Abschnitt betitelt „Verwende das Routing-Muster /pages/folder/index.astro“

Um eine Tag-Index-Seite zu deiner Website hinzuzufügen, kannst du eine neue Datei unter src/pages/tags.astro erstellen.

Da du aber schon das Verzeichnis /tags/ hast, kannst du ein anderes Routing-Muster in Astro nutzen und alle deine Dateien, die mit Tags zu tun haben, zusammenhalten.

Probier es selbst aus – Erstelle eine Tag-Indexseite

Abschnitt betitelt „Probier es selbst aus – Erstelle eine Tag-Indexseite“

  1. Erstelle eine neue Datei index.astro im Verzeichnis src/pages/tags/.

  2. Gehe zu http://localhost:4321/tags und überprüfe, ob deine Website jetzt eine Seite unter dieser URL enthält. Sie ist leer, aber sie ist vorhanden.

  3. Erstelle eine minimale Seite unter src/pages/tags/index.astro, die dein Layout verwendet. Das hast du schon einmal gemacht!

    Erweitere, um die Schritte anzuzeigen

    1. Erstelle eine neue Seitenkomponente in src/pages/tags/.

      Zeige den Dateinamen an
      index.astro

    2. Importiere und verwende dein <BaseLayout>.

      Code anzeigen
      src/pages/tags/index.astro
      ---
      import BaseLayout from '../../layouts/BaseLayout.astro';
      ---
      <BaseLayout></BaseLayout>

    3. Leg einen Seitentitel fest und übergib ihn als Komponentenattribut an dein Layout.

      Code anzeigen
      src/pages/tags/index.astro
      ---
      import BaseLayout from '../../layouts/BaseLayout.astro';
      const pageTitle = "Tag-Index";
      ---
      <BaseLayout pageTitle={pageTitle}></BaseLayout>

  4. Schau dir die Vorschau in deinem Browser nochmal an. Du solltest jetzt eine formatierte Seite haben, die bereit ist, mit Inhalten gefüllt zu werden!

Erstelle ein Array mit Tags

Abschnitt betitelt „Erstelle ein Array mit Tags“

Du hast zuvor Elemente aus einem Array mit map() in einer Liste angezeigt. Wie würde es aussehen, wenn du ein Array mit all deinen Tags definierst und diese dann in einer Liste auf dieser Seite anzeigst?

Code anzeigen
src/pages/tags/index.astro
---
import BaseLayout from '../../layouts/BaseLayout.astro';
const tags = ['astro', 'blogging', 'öffentlich lernen', 'erfolge', 'rückschläge', 'community']
const pageTitle = "Tag-Index";
---
<BaseLayout pageTitle={pageTitle}>
  <ul>
    {tags.map((tag) => <li>{tag}</li>)}
  </ul>
</BaseLayout>

Das geht schon, aber dann musst du jedes Mal, wenn du in einem neuen Blogbeitrag ein neues Tag verwendest, zu dieser Datei zurückkehren und dein Array aktualisieren.

Zum Glück kennst du schon eine Möglichkeit, die Daten aus all deinen Markdown-Dateien in einer einzigen Codezeile abzurufen und dann eine Liste aller deiner Tags zurückzugeben.

  1. Füge die Codezeile in das Frontmatter-Skript der Datei src/pages/tags/index.astro ein, welche deiner Seite Zugriff auf die Daten aller .md-Blogpost-Dateien gibt.

    Code anzeigen
    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. Füge als Nächstes die folgende JavaScript-Zeile zu deiner Seitenkomponente hinzu. Das ist derselbe Code, der auf der integrierten TypeScript-Unterstützung von Astro basiert, den du in src/pages/tags/[tag].astro benutzt hast, um eine Liste eindeutiger Tags zurückzugeben.

    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";
    ---

Erstelle deine Liste mit Tags

Abschnitt betitelt „Erstelle deine Liste mit Tags“

Anstatt diesmal Elemente in einer ungeordneten Liste zu erstellen, erstelle für jedes Element ein <p> innerhalb eines <div>. Das Muster sollte dir bekannt vorkommen!

  1. Füge den folgenden Code zu deiner Komponentenvorlage hinzu:

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

    Überprüfe in der Vorschau deines Browsers, ob deine Tags aufgelistet sind. Wenn bei Blogbeiträgen Tags fehlen oder diese falsch formatiert sind, zeigt dir die integrierte TypeScript-Unterstützung von Astro Fehler an, damit du deinen Code überprüfen und korrigieren kannst.

  2. Damit jeder Tag mit seiner eigenen Seite verlinkt ist, füge den folgenden <a>-Link zu jedem Tag-Namen hinzu:

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

Füge Styles zu deiner Tag-Liste hinzu

Abschnitt betitelt „Füge Styles zu deiner Tag-Liste hinzu“

  1. Füge die folgenden CSS-Klassen hinzu, um sowohl dein <div> als auch jedes <p> zu stylen, das generiert wird. Hinweis: Astro verwendet HTML-Syntax zum Hinzufügen von Klassennamen!

    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. Leg diese neuen CSS-Klassen fest, indem du den folgenden <style>-Tag zu dieser Seite hinzufügst:

    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. Schau dir die Vorschau in deinem Browser unter http://localhost:4321/tags an, um zu überprüfen, ob du ein paar neue Stile hast und ob jeder der Tags auf der Seite einen funktionierenden Link zu seiner eigenen individuellen Tag-Seite hat.

Code überprüfen

Abschnitt betitelt „Code überprüfen“

So sollte deine neue Seite aussehen:

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>

Füge diese Seite zu deiner Navigation hinzu

Abschnitt betitelt „Füge diese Seite zu deiner Navigation hinzu“

Im Moment kannst du zu http://localhost:4321/tags navigieren und diese Seite sehen. Von dieser Seite aus kannst du auf Links zu deinen einzelnen Tag-Seiten klicken.

Aber du musst diese Seiten noch von anderen Seiten deiner Website aus auffindbar machen.

  1. Füge in deiner Komponente Navigation.astro einen Link zu dieser neuen Tag-Indexseite ein.

    Code anzeigen
    src/components/Navigation.astro
    <a href="/">Startseite</a>
    <a href="/about/">Über mich</a>
    <a href="/blog/">Blog</a>
    <a href="/tags/">Tags</a>

Challenge: Füge Tags in dein Blogpost-Layout ein

Abschnitt betitelt „Challenge: Füge Tags in dein Blogpost-Layout ein“

Du hast jetzt den ganzen Code geschrieben, den du brauchst, um auch eine Liste von Tags in jedem Blogpost anzuzeigen und sie mit ihren Tag-Seiten zu verlinken. Du hast bereits Arbeit geleistet, die du wiederverwenden kannst!

Mach die folgenden Schritte und überprüf deine Arbeit, indem du sie mit dem endgültigen Code-Beispiel vergleichst.

  1. Kopier <div class="tags">...</div> und <style>...</style> aus src/pages/tags/index.astro und verwende sie in 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>Geschrieben von: {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>

Bevor dieser Code funktioniert, musst du eine kleine Änderung an dem Code vornehmen, den du in MarkdownPostLayout.astro eingefügt hast. Kannst du herausfinden, um welche Änderung es sich handelt?

Gib mir einen Hinweis

Wie sind die anderen Props (z. B. Titel, Autor usw.) in deiner Layoutvorlage geschrieben? Wie erhält dein Layout Props aus einem einzelnen Blogbeitrag?

Gib mir noch einen Hinweis!

Um Props (übermittelte Werte) aus einem .md-Blogbeitrag in deinem Layout zu verwenden, z. B. Tags, musst du dem Wert ein bestimmtes Wort voranstellen.

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

Code-Überprüfung: MarkdownPostLayout

Abschnitt betitelt „Code-Überprüfung: MarkdownPostLayout“

Um deine Arbeit zu überprüfen oder wenn du einfach nur einen vollständigen, korrekten Code zum Kopieren in MarkdownPostLayout.astro haben möchtest, sollte deine Astro-Komponente wie folgt aussehen:

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>Geschrieben von: {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>

Test dein Wissen

Abschnitt betitelt „Test dein Wissen“

Ordne jeden Dateipfad einem zweiten Dateipfad zu, der eine Seite mit derselben Route erstellt.

  1. src/pages/categories.astro

  2. src/pages/posts.astro

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

Checkliste

Abschnitt betitelt „Checkliste“

Ressourcen

Abschnitt betitelt „Ressourcen“
Wirke mit Community Sponsor