Skip to content

Commit 248cc7b

Browse files
sarah11918sarah11918
authored
Merge branch 'main' into patch-1
2 parents 80006b4 + 8277fd9 commit 248cc7b

10 files changed

Lines changed: 940 additions & 45 deletions

File tree

‎src/content/docs/de/core-concepts/astro-syntax.mdx‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
---
2+
title: Astro Syntax
3+
description: Eine Einführung in die Syntax der .astro-Komponenten
4+
i18nReady: true
5+
---
6+
7+
**Wenn du HTML kennst, weißt du bereits genug, um deine erste Astro-Komponente zu schreiben.**
8+
9+
Die Syntax von Astro-Komponenten ist eine Erweiterung von HTML. Die Syntax wurde [so entworfen, dass sie für jeden, der Erfahrung mit HTML oder JSX hat, vertraut wirkt](#unterschiede-zwischen-astro-und-jsx), und sie ermöglicht das Einbinden von Komponenten und JavaScript-Ausdrücken.
10+
11+
## JSX-ähnliche Ausdrücke
12+
13+
Du kannst lokale JavaScript-Variablen innerhalb des Skripts der Frontmatter-Komponente zwischen den beiden Code-Grenzen (`---`) einer Astro-Komponente definieren. Du kannst dann diese Variablen mithilfe von JSX-ähnlichen Ausdrücken in das HTML-Template der Komponente einfügen!
14+
15+
:::note[dynamisch vs reaktiv]
16+
Mit diesem Ansatz kannst du **dynamische** Werte einbinden, die im Frontmatter berechnet werden. Doch einmal eingefügt, ändern sich diese Werte nicht mehr und sind nicht **reaktiv**. Astro-Komponenten sind Vorlagen, die nur einmal während des Rendering-Schritts ausgeführt werden.
17+
18+
Weitere Beispiele für [Unterschiede zwischen Astro und JSX](#unterschiede-zwischen-astro-und-jsx) siehe unten.
19+
:::
20+
21+
### Variabeln
22+
23+
Lokale Variablen können mithilfe der geschweiften-Klammern-Syntax in das HTML eingefügt werden:
24+
25+
```astro title="src/components/Variables.astro" "{name}"
26+
---
27+
const name = "Astro";
28+
---
29+
<div>
30+
<h1>Hallo {name}!</h1> <!-- entspricht <h1>Hallo Astro!</h1> -->
31+
</div>
32+
```
33+
34+
### Dynamische Attribute
35+
36+
Lokale Variablen können in geschweiften Klammern verwendet werden, um Attributwerte sowohl an HTML-Elemente als auch an Komponenten zu übergeben:
37+
38+
```astro title="src/components/DynamicAttributes.astro" "{name}" "${name}"
39+
---
40+
const name = "Astro";
41+
---
42+
<h1 class={name}>Attribute expressions are supported</h1>
43+
44+
<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />
45+
```
46+
47+
:::caution
48+
HTML-Attribute werden in Zeichenketten umgewandelt, daher ist es nicht möglich, Funktionen und Objekte an HTML-Elemente zu übergeben.
49+
Beispielsweise ist es nicht möglich, in einer Astro-Komponente einen event handler einem HTML-Element zuzuweisen:
50+
51+
```astro
52+
---
53+
// tu-das-nicht.astro
54+
function handleClick () {
55+
console.log("Knopf gedrückt!");
56+
}
57+
---
58+
<!-- ❌ Das funktioniert nicht! ❌ -->
59+
<button onClick={handleClick}>Nichts wird passieren, wenn du auf mich klickst!</button>
60+
```
61+
62+
Stattdessen verwende ein clientseitiges Skript, um den event handler hinzuzufügen, so wie du es in reinem JavaScript tun würdest:
63+
64+
```astro
65+
---
66+
// tu-stattdessen-das.astro
67+
---
68+
<button id="button">Drücke Mich</button>
69+
<script>
70+
function handleClick () {
71+
console.log("Knopf gedrückt!");
72+
}
73+
document.getElementById("button").addEventListener("click", handleClick);
74+
</script>
75+
```
76+
:::
77+
78+
### Dynamisches HTML
79+
80+
Lokale Variablen können in JSX-ähnlichen Funktionen verwendet werden, um dynamisch generierte HTML-Elemente zu erzeugen:
81+
82+
```astro title="src/components/DynamicHtml.astro" "{item}"
83+
---
84+
const tiere = ["Dog", "Cat", "Platypus"];
85+
---
86+
<ul>
87+
{tiere.map((tier) => (
88+
<li>{tier}</li>
89+
))}
90+
</ul>
91+
```
92+
93+
Astro kann bedingt HTML anzeigen, indem es JSX-logische Operatoren und Ternär-Ausdrücke verwendet.
94+
95+
```astro title="src/components/ConditionalHtml.astro" "visible"
96+
---
97+
const sichtbar = true;
98+
---
99+
{sichtbar && <p>Zeige mich!</p>}
100+
101+
{sichtbar ? <p>Zeige mich!</p> : <p>Zeige mich sonst!</p>}
102+
```
103+
104+
### Dynamische Tags
105+
106+
Du kannst auch dynamische Tags verwenden, indem du eine Variable auf einen HTML-Tag-Namen oder einen Komponentenimport setzt:
107+
108+
```astro title="src/components/DynamicTags.astro" /Element|(?<!My)Component/
109+
---
110+
import MyComponent from "./MyComponent.astro";
111+
const Element = 'div'
112+
const Component = MyComponent;
113+
---
114+
<Element>Hallo!</Element> <!-- rendert als <div>Hallo!</div> -->
115+
<Component /> <!-- rendert als <MyComponent /> -->
116+
```
117+
118+
Bei der Verwendung von dynamischen Tags:
119+
120+
- **Die Variablennamen müssen großgeschrieben sein.** Verwende beispielsweise `Element` und nicht `element`. Andernfalls wird Astro versuchen, deinen Variablennamen als wörtlichen HTML-Tag zu rendern.
121+
122+
- **Hydratisierungsanweisungen werden nicht unterstützt.** Bei Verwendung von Hydratisierungsanweisungen [`client:*`](/de/core-concepts/framework-components/#interaktive-komponenten-hydratisieren) muss Astro wissen, welche Komponenten für die Produktion gebündelt werden sollen, und das Muster dynamischer Tags verhindert dies.
123+
124+
### Fragmente
125+
126+
Astro unterstützt die Verwendung von `<Fragment> </Fragment>` oder der Kurzform `<> </>`.
127+
128+
Fragments können nützlich sein, um Wrapper-Elemente zu vermeiden, wenn [`set:*`-Anweisungen](/de/reference/directives-reference/#sethtml) hinzugefügt werden, wie im folgenden Beispiel:
129+
130+
```astro title="src/components/SetHtml.astro" "Fragment"
131+
---
132+
const htmlString = '<p>Roher HTML-Inhalt</p>';
133+
---
134+
<Fragment set:html={htmlString} />
135+
```
136+
137+
### Unterschiede zwischen Astro und JSX
138+
139+
Die Syntax der Astro-Komponenten ist eine Erweiterung von HTML. Sie wurde so entworfen, dass sie für jeden mit HTML- oder JSX-Erfahrung vertraut wirkt, aber es gibt ein paar wesentliche Unterschiede zwischen `.astro`-Dateien und JSX.
140+
141+
#### Attribute
142+
143+
In Astro verwendest du den Standard `kebab-case` für alle HTML-Attribute anstelle von `camelCase`, wie es in JSX verwendet wird. Dies gilt sogar für `class`, was von React nicht unterstützt wird.
144+
145+
```jsx del={1} ins={2} title="example.astro"
146+
<div className="box" dataValue="3" />
147+
<div class="box" data-value="3" />
148+
```
149+
150+
#### Mehrere Elemente
151+
152+
Eine Astro-Komponentenvorlage kann mehrere Elemente rendern, ohne dass alles in ein einzelnes `<div>` oder `<>` eingebettet werden muss, im Gegensatz zu JavaScript oder JSX.
153+
154+
```astro title="src/components/RootElements.astro"
155+
---
156+
// Vorlage mit mehreren Elementen
157+
---
158+
<p>Es ist nicht erforderlich, Elemente in einen einziges umschließendes Element einzubetten.</p>
159+
<p>Astro unterstützt mehrere Root-Elemente in einer Vorlage.</p>
160+
```
161+
162+
#### Kommentare
163+
164+
In Astro kannst du Standard-HTML-Kommentare oder Kommentare im JavaScript-Stil verwenden.
165+
166+
```astro title="example.astro"
167+
---
168+
---
169+
<!-- Die Syntax für HTML-Kommentare ist in .astro-Dateien gültig -->
170+
{/* Die Syntax für JS-Kommentare ist ebenfalls gültig */}
171+
```
172+
173+
:::caution
174+
HTML-Kommentare werden in dem DOM des Browsers enthalten sein, während JavaScript-Kommentare übersprungen werden. Um TODO-Nachrichten oder andere nur für die Entwicklung bestimmte Erläuterungen zu hinterlassen, empfiehlt es sich, Kommentare im JavaScript-Stil zu verwenden.
175+
:::

‎src/content/docs/en/core-concepts/astro-pages.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ The `export const partial` must be identifiable statically. It can have the valu
163163
</section>
164164
```
165165

166-
The .`astro` partial must exist at the corresponding file path, and include an export defining the page as a partial:
166+
The `.astro` partial must exist at the corresponding file path, and include an export defining the page as a partial:
167167

168168
```astro title="src/pages/partials/clicked.astro" {2}
169169
---

‎src/content/docs/en/guides/backend/xata.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,9 @@ const { records } = await xata.db.Posts.getPaginated({
9797
---
9898
9999
<ul>
100-
{records.map(post) => (
100+
{records.map((post) => (
101101
<li>{post.title}</li>
102-
)}
102+
))}
103103
</ul>
104104
```
105105
It's important to note the SDK needs to be regenerated everytime your schema changes. So, avoid making changes to the generated files the Xata CLI creates because once schema updates, your changes will be overwritten.

‎src/content/docs/ja/recipes/add-yaml-support.mdx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: ViteまたはRollupプラグインをインストールする
3+
description: プロジェクトにRollupプラグインを追加することでYAMLデータをインポートする方法を学びます。
4+
i18nReady: true
5+
type: recipe
6+
---
7+
8+
AstroはViteの上に構築されViteとRollupの両方のプラグインをサポートしています。このレシピではRollupプラグインを使用して、AstroにYAML（`.yml`）ファイルをインポートする機能を追加します。
9+
10+
## レシピ
11+
12+
1. `rollup/plugin-yaml`をインストールします。
13+
14+
```bash
15+
npm install @rollup/plugin-yaml --save-dev
16+
```
17+
18+
2. プラグインを`astro.config.mjs`にインポートし、Viteのplugins配列に追加します。
19+
20+
```js title="astro.config.mjs" ins={2,5-7}
21+
import { defineConfig } from 'astro/config';
22+
import yaml from '@rollup/plugin-yaml';
23+
24+
export default defineConfig({
25+
vite: {
26+
plugins: [yaml()]
27+
}
28+
});
29+
```
30+
31+
32+
3. 最後に、`import`文を使いYAMLデータをインポートします。
33+
34+
```js
35+
import yml from './data.yml';
36+
```
37+
38+
:::note
39+
AstroプロジェクトでYAMLデータをインポートできるようになりましたが、エディタはインポートしたデータの型を提供しません。型を追加するには、プロジェクトの`src`ディレクトリに`*.d.ts`ファイルを作成するか、既存のファイルを見つけて、以下を追加します。
40+
```ts title="src/files.d.ts"
41+
// インポートするファイルの拡張子を指定します。
42+
declare module "*.yml" {
43+
const value: any; // 必要であれば、ここに型の定義を追加します。
44+
export default value;
45+
}
46+
```
47+
これでエディターがYAMLデータの型ヒントを提供できるようになります。
48+
:::

‎src/content/docs/ko/core-concepts/astro-components.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
6262

6363
여기에 일반 HTML을 작성하면 해당 컴포넌트는 Astro 페이지에서 불려 사용되는 경우 작성된 해당 HTML을 렌더링합니다.
6464

65-
그러나, [Astro’s component template syntax](/ko/core-concepts/astro-syntax/)은 **JavaScript 표현식**, Astro [`<style>`](/ko/guides/styling/#styling-in-astro)과 [`<script>`](/ko/guides/client-side-scripts/#using-script-in-astro) 태그들, **가져온 컴포넌트** 그리고, [**special Astro directives**](/ko/reference/directives-reference/)도 지원합니다. 컴포넌트 스크립트에서 정의한 데이터와 값을 컴포넌트 템플릿에 사용하여 페이지 빌드 시 동적으로 HTML을 생성할 수 있습니다.
65+
그러나, [Astro의 컴포넌트 템플릿 구문](/ko/core-concepts/astro-syntax/)은 **JavaScript 표현식**, Astro [`<style>`](/ko/guides/styling/#styling-in-astro)과 [`<script>`](/ko/guides/client-side-scripts/#using-script-in-astro) 태그들, **가져온 컴포넌트** 그리고, [**special Astro directives**](/ko/reference/directives-reference/)도 지원합니다. 컴포넌트 스크립트에서 정의한 데이터와 값을 컴포넌트 템플릿에 사용하여 페이지 빌드 시 동적으로 HTML을 생성할 수 있습니다.
6666

6767
```astro title="src/components/MyFavoritePokemon.astro"
6868
---

0 commit comments

Comments
 (0)