Zum Inhalt springen

Erstelle ein individuelles Blog-Layout und übergib Daten

Jetzt, da du ein Layout für deine Seiten hast, ist es Zeit, ein Layout für Blog-Beiträge hinzuzufügen!

Mach dich bereit, …

  • ein neues Blog-Beitrags-Layout für deine Markdown-Dateien zu erstellen
  • YAML-Frontmatter-Werte als Props an die Layout-Komponente zu übergeben

Füge ein Layout zu deinen Blog-Beiträgen hinzu

Wenn du die Frontmatter-Eigenschaft layout in einer .md-Datei angibst, stehen alle Frontmatter-YAML-Werte der Layout-Datei zur Verfügung.

  1. Erstelle eine neue Datei unter src/layouts/MarkdownPostLayout.astro

  2. Kopiere den folgenden Code in MarkdownPostLayout.astro

    ---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>Geschrieben von {frontmatter.author}</p>
<slot />

  3. Füge die folgende Frontmatter-Eigenschaft in post-1.md ein:

    ---
layout: ../../layouts/MarkdownPostLayout.astro
title: 'Mein erster Blog-Beitrag'
pubDate: 2022-07-01
description: 'Dies ist der erste Beitrag meines neuen Astro-Blogs.'
author: 'Astro-Lernender'
image:
    url: 'https://docs.astro.build/assets/rose.webp' 
    alt: 'Das Astro-Logo auf dunklem Hintergrund mit rosa Leuchten.'
tags: ["astro", "bloggen", "öffentlich lernen"]
---

  4. Prüfe die Vorschau im Browser erneut unter http://localhost:4321/posts/post-1 und beachte, was das Layout deiner Seite hinzugefügt hat.

  5. Füge dieselbe Layout-Eigenschaft zu deinen beiden anderen Blog-Beiträgen post-2.md und post-3.md hinzu. Überprüfe im Browser, ob das Layout auch auf diese Beiträge angewendet wird.

:::tipBeim Verwenden von Layouts hast du nun die Möglichkeit, Elemente wie einen Seitentitel im Markdown-Inhalt oder im Layout zu platzieren. Prüfe die Vorschau deiner Seite visuell und nimm Anpassungen vor, um doppelte Elemente zu vermeiden.:::

Probiere es selbst – Passe dein Blog-Layout an

Aufgabe: Identifiziere Elemente, die bei jedem Blog-Beitrag gleich sind, und verwende MarkdownPostLayout.astro, um sie zu rendern, anstatt sie in deinem Markdown (post-1.md) oder in zukünftigen Beiträgen zu wiederholen.

Hier ein Beispiel, wie du pubDate in die Layout-Komponente verschiebst, anstatt es im Markdown zu schreiben:

Veröffentlicht am: 2022-07-01

Willkommen zu meinem *neuen Blog* über das Lernen von Astro! Hier teile ich meinen Lernweg, während ich eine neue Website erstelle.
---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>Veröffentlicht am: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Geschrieben von {frontmatter.author}</p>
<slot />

Refaktoriere so viel wie nötig für dich und füge beliebig viele Elemente in dein Layout ein. Alles, was du ins Layout einfügst, musst du nicht mehr in jedem einzelnen Blog-Beitrag schreiben!

Hier ein Beispiel für ein refaktoriertes Layout, das nur noch die individuellen Inhalte der Blog-Beiträge über den Slot rendert:

---
const { frontmatter } = Astro.props;
---
<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 />

:::note[Doppelte Inhalte vermeiden]Alles, was von deinem Layout gerendert wird, muss nicht in deinem Blog-Beitrag erneut geschrieben werden! Wenn du bei der Vorschau im Browser Duplikate bemerkst, entferne den entsprechenden Inhalt aus der Markdown-Datei.:::

Teste dein Wissen

Kannst du herausfinden, was in die Lücken gehört, damit die beiden folgenden Komponenten zusammen funktionierenden Astro-Code ergeben?

  1. ---
layout: ../../__________/MyMarkdownLayout.astro
title: "Markdown in Astro kennenlernen"
author: Astro-Lernender
____: 2022-08-08
---
Heute habe ich so viel gelernt! Astro erlaubt mir, in Markdown zu schreiben, und gleichzeitig Variablen aus dem Frontmatter zu verwenden. Ich kann diese Werte sogar in einer Astro-Layout-Komponente abrufen.
  2. ---
import ____________ from '../components/Footer.astro'
const { ___________ } = Astro.props
---
<h1>{frontmatter.title}</h1>
<p>Geschrieben von: {frontmatter.______} am {frontmatter.pubDate}</p>
< _______ />
<Footer />

    Lösungen für die Lücken anzeigen

    1. ---
layout: ../../layouts/MyMarkdownLayout.astro
title: "Markdown in Astro kennenlernen"
author: Astro-Lernender
pubDate: 2022-08-08
---
Heute habe ich so viel gelernt! Astro erlaubt mir, in Markdown zu schreiben, und gleichzeitig Variablen aus dem Frontmatter zu verwenden. Ich kann diese Werte sogar in einer Astro-Layout-Komponente abrufen.
    2. ---
import Footer from '../components/Footer.astro'
const { frontmatter } = Astro.props
---
<h1>{frontmatter.title}</h1>
<p>Geschrieben von: {frontmatter.author} am {frontmatter.pubDate}</p>
<slot />
<Footer />

Checkliste

Ressourcen

Wirke mit Community Sponsor