Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(de): update basics/layouts.mdx #10236

Merged
merged 2 commits into from
Dec 17, 2024
Merged

i18n(de): update basics/layouts.mdx #10236

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4d89942
changes from #9240
trueberryless Dec 6, 2024
9175a88
Merge branch 'main' into bas-lay
yanthomasdev Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 21 additions & 8 deletions src/content/docs/de/basics/layouts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Layouts
description: Eine Einführung in die Layouts, eine Art Astro-Komponente, die von mehreren Seiten für gemeinsame Layouts verwendet wird.
description: Eine Einführung in die Layouts in Astro.
i18nReady: true
---

Expand Down Expand Up @@ -102,7 +102,7 @@ const { title, description, publishDate, viewCount } = Astro.props;

Seitenlayouts sind besonders nützlich für einzelne Markdown-Seiten, die sonst keine Seitenformatierung haben würden.

Astro bietet eine spezielle Frontmatter-Eigenschaft `layout`, mit der du festlegen kannst, welche `.astro`-Komponente als Seitenlayout verwendet werden soll. Standardmäßig kann die angegebene Komponente automatisch auf Daten aus der Markdown-Datei zugreifen.
Astro bietet eine spezielle `layout`-Frontmatter-Eigenschaft für [einzelne `.md`-Dateien, die sich innerhalb von `src/pages/` befinden und dateibasiertes Routing verwenden](/de/guides/markdown-content/#individual-markdown-pages), um anzugeben, welche `.astro`-Komponente als Seitenlayout verwendet werden soll. Diese Komponente ermöglicht es dir, `<head>`-Inhalte wie Meta-Tags (z.B. `<meta charset="utf-8">`) und Stile für die Markdown-Seite anzugeben. Standardmäßig kann die angegebene Komponente automatisch auf Daten aus der Markdown-Datei zugreifen.

```markdown title="src/pages/page.md" {2}
---
Expand Down Expand Up @@ -132,6 +132,8 @@ const { frontmatter } = Astro.props;
<html>
<head>
<!-- Füge hier andere Head-Elemente wie Stile und Meta-Tags hinzu. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>{frontmatter.title}</title>
</head>
<body>
Expand Down Expand Up @@ -163,6 +165,7 @@ const { frontmatter, url } = Astro.props;
---
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href={new URL(url, Astro.site).pathname}>
<title>{frontmatter.title}</title>
</head>
Expand All @@ -185,7 +188,7 @@ Ein Markdown-Layout hat über `Astro.props` Zugriff auf die folgenden Informatio
- **`frontmatter.url`** - Dasselbe wie die Eigenschaft `url` der obersten Ebene.
- **`headings`** - Eine Liste von Überschriften (`h1 -> h6`) im Markdown- oder MDX-Dokument mit zugehörigen Metadaten. Diese Liste folgt dem Typ: `{ depth: number; slug: string; text: string }[]`.
- **`rawContent()`** - Eine Funktion, die das rohe Markdown-Dokument als String zurückgibt.
- **`compiledContent()`** - Eine Funktion, die das Markdown-Dokument zu einem HTML-String kompiliert zurückgibt.
- **`compiledContent()`** - Eine asynchrone Funktion, die das Markdown-Dokument zu einem HTML-String kompiliert zurückgibt.

:::note
Ein Markdown-Layout hat Zugriff auf alle [verfügbaren Eigenschaften](/de/guides/markdown-content/#available-properties) der Markdown-Datei aus `Astro.props` **mit zwei wesentlichen Unterschieden:**
Expand Down Expand Up @@ -225,13 +228,23 @@ Dann stehen dir deine Werte über `Astro.props` in deinem Layout zur Verfügung,
---
const { title, fancyJsHelper } = Astro.props;
---
<!-- -->
<h1>{title}</h1>
<slot /> <!-- dein Inhalt wird hier eingefügt -->
<p>{fancyJsHelper()}</p>
<!-- -->
<html>
<head>
<!-- -->
<meta charset="utf-8">
</head>
<body>
<!-- -->
<h1>{title}</h1>
<slot /> <!-- dein Inhalt wird hier eingefügt -->
<p>{fancyJsHelper()}</p>
<!-- -->
</body>
</html>
```

Wenn du ein Layout verwendest (entweder über die Frontmatter-Eigenschaft `layout` oder durch den Import eines Layouts), musst du den `<meta charset="utf-8">`-Tag in dein Layout einfügen, da Astro ihn nicht mehr automatisch in deine MDX-Seite einfügt.

<ReadMore>Erfahre mehr über die Markdown- und MDX-Unterstützung von Astro in unserem [Markdown-Leitfaden](/de/guides/markdown-content/).</ReadMore>

## Verschachtelte Layouts
Expand Down
Loading