Zum Inhalt springen

Layouts kombinieren, um das Beste aus beiden Welten zu erhalten

Jetzt, da du jedem Blog-Beitrag ein Layout hinzugefügt hast, ist es Zeit, dass deine Beiträge wie der Rest der Seiten auf deiner Website aussehen!

Mach dich bereit, …

  • dein Blog-Beitrags-Layout in deinem Hauptseiten-Layout zu verschachteln

Verschachtle deine beiden Layouts

Abschnitt betitelt „Verschachtle deine beiden Layouts“

Du hast bereits ein BaseLayout.astro, um das grundlegende Layout deiner Seiten zu definieren.

MarkdownPostLayout.astro bietet zusätzliche Templates für allgemeine Blog-Beitrags-Eigenschaften wie title und date, aber deine Blog-Beiträge sehen noch nicht wie die anderen Seiten deiner Website aus. Du kannst das Erscheinungsbild deiner Blog-Beiträge an den Rest der Website anpassen, indem du Layouts verschachtelst.

  1. Importiere in src/layouts/MarkdownPostLayout.astro BaseLayout.astro und nutze es, um den gesamten Template-Inhalt zu umschließen. Vergiss nicht, das Prop pageTitle zu übergeben:

    src/layouts/MarkdownPostLayout.astro
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <meta charset="utf-8" />
      <h1>{frontmatter.title}</h1>
      <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} />
      <slot />
    </BaseLayout>

  2. In src/layouts/MarkdownPostLayout.astro kannst du nun das <meta>-Tag entfernen, da es bereits in deinem BaseLayout enthalten ist:

    src/layouts/MarkdownPostLayout.astro
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <meta charset="utf-8" />
      <h1>{frontmatter.title}</h1>
      <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} />
      <slot />
    </BaseLayout>

  3. Prüfe die Vorschau im Browser unter http://localhost:4321/posts/post-1. Jetzt solltest du Inhalte sehen, die gerendert werden durch:

    • Dein Hauptseiten-Layout, inklusive Styles, Navigationslinks und Social-Footer.
    • Dein Blog-Beitrags-Layout, inklusive Frontmatter-Eigenschaften wie Beschreibung, Datum, Titel und Bild.
    • Den einzelnen Markdown-Inhalt des Blog-Beitrags, also nur den Text, der in diesem Beitrag geschrieben wurde.

  4. Beachte, dass der Seitentitel nun zweimal angezeigt wird, einmal durch jedes Layout.

    Entferne die Zeile, die den Seitentitel in MarkdownPostLayout.astro anzeigt:

    src/layouts/MarkdownPostLayout.astro
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <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} />
      <slot />
    </BaseLayout>

  5. Prüfe erneut die Vorschau im Browser unter http://localhost:4321/posts/post-1 und vergewissere dich, dass diese Zeile nicht mehr angezeigt wird und der Titel nur einmal erscheint. Nimm weitere Anpassungen vor, um doppelte Inhalte zu vermeiden.

Achte darauf:

  • Jeder Blog-Beitrag zeigt dieselbe Seitenschablone, und keine Inhalte fehlen. (Wenn bei einem Blog-Beitrag Inhalte fehlen, prüfe seine Frontmatter-Eigenschaften.)
  • Keine Inhalte werden doppelt angezeigt. (Wenn etwas zweimal gerendert wird, entferne es aus MarkdownPostLayout.astro.)

Wenn du möchtest, kannst du dein Seitentemplate weiter anpassen.

Teste dein Wissen

Abschnitt betitelt „Teste dein Wissen“

  1. Welche der folgenden Eigenschaften erlaubt es, ein Layout in ein anderes zu verschachteln und modular mit Astro zu arbeiten?

  2. Mehrere Layouts sind besonders nützlich für Projekte, die Markdown-Seiten enthalten, wie z. B. ein …

  3. Welches dieser Layouts liefert die Templates für alle deine Seiten?

Checkliste

Abschnitt betitelt „Checkliste“

Ressourcen

Abschnitt betitelt „Ressourcen“
Wirke mit Community Sponsor