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

Co-authored-by: Yan <[email protected]>
ArmandPhilippot · Dec 17, 2024 · 9460206 · 9460206
1 parent 172d384
commit 9460206
Showing 1 changed file with 21 additions and 8 deletions.
diff --git a/src/content/docs/de/basics/layouts.mdx b/src/content/docs/de/basics/layouts.mdx
@@ -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
 ---
 
@@ -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} 
 ---
@@ -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>
@@ -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>
@@ -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:**
@@ -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