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

   src/layouts/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:

   src/pages/posts/post-1.md

   ---
   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.

Tipp

Beim 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:

src/pages/posts/post-1.md

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.

src/layouts/MarkdownPostLayout.astro

---
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:

src/layouts/MarkdownPostLayout.astro

---
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 />

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. src/pages/posts/learning-astro.md

   ---
   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. src/layouts/MyMarkdownLayout.astro

   ---
   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. src/pages/posts/learning-astro.md

      ---
      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. src/layouts/MyMarkdownLayout.astro

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

• Ich kann die Layout-Eigenschaft in das YAML-Frontmatter eines Markdown-Blog-Beitrags einfügen.
• Ich kann ein separates Layout für Markdown-Beiträge erstellen.
• Ich kann Werte aus dem Frontmatter eines Blog-Beitrags in einer Layout-Komponente verwenden.

Ressourcen

• Markdown-Layouts in Astro (EN)

• Markdown-Layout-Eigenschaften

• Einführung in YAML extern