Skip to content
Merged
Changes from all commits
Commits
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
57 changes: 25 additions & 32 deletions src/content/docs/pl/basics/astro-pages.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ title: Strony
description: Wprowadzenie do stron Astro
i18nReady: true
---

import ReadMore from '~/components/ReadMore.astro';
import Since from '~/components/Since.astro'

Expand All @@ -12,6 +11,7 @@ import Since from '~/components/Since.astro'
## Obsługiwane typy plików stron

Astro obsługuje następujące typy plików w katalogu `src/pages/`:

- [`.astro`](#strony-astro)
- [`.md`](#strony-markdownmdx)
- `.mdx` (z zainstalowaną [Integracją MDX](/pl/guides/integrations-guide/mdx/#installation))
Expand Down Expand Up @@ -57,9 +57,8 @@ Strona musi produkować pełny dokument HTML. Jeśli nie zostanie to jawnie uwzg

Aby uniknąć powtarzania tych samych elementów HTML na każdej stronie, możesz przenieść wspólne elementy `<head>` i `<body>` do własnych [komponentów układu](/pl/basics/layouts/). Możesz użyć tylu komponentów układu, ile chcesz.

```astro {3} /</?MySiteLayout>/
```astro title="src/pages/index.astro" /</?MySiteLayout>/ {2}
---
// src/pages/index.astro
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
Expand All @@ -82,8 +81,8 @@ Pliki Markdown mogą wykorzystywać specjalną właściwość frontmatter `layou
```md {3}
---
# Przykład: src/pages/page.md
layout: '../layouts/MySiteLayout.astro'
title: 'Moja strona Markdown'
layout: ../layouts/MySiteLayout.astro
title: Moja strona Markdown
---
# Tytuł

Expand All @@ -104,7 +103,7 @@ To zbuduje stronę `404.html`. Większość [usług wdrożeniowych](/pl/guides/d

## Niestandardowa strona błędu 500

Aby uzyskać niestandardową stronę błędu 500 do wyświetlenia dla stron, które są [renderowane na żądanie](/pl/guides/on-demand-rendering/), utwórz plik `src/pages/500.astro`. Ta niestandardowa strona nie jest dostępna dla stron renderowanych wstępnie i nie może być wstępnie renderowana.
Aby uzyskać niestandardową stronę błędu 500 do wyświetlenia dla stron, które są [renderowane na żądanie](/pl/guides/on-demand-rendering/), utwórz plik `src/pages/500.astro`. Ta niestandardowa strona nie jest dostępna dla stron renderowanych wstępnie.

Jeśli wystąpi błąd podczas renderowania tej strony, Twojemu odwiedzającemu zostanie pokazana domyślna strona błędu 500 Twojego hosta.

Expand All @@ -118,18 +117,18 @@ W fazie rozwoju aplikacji, przy obecności pliku `500.astro`, błąd rzucony w c

`src/pages/500.astro` to specjalna strona, która automatycznie otrzymuje prop `error` dla każdego błędu rzuconego podczas renderowania. Pozwala to na użycie szczegółów błędu (np. ze strony, z middleware, itp.) do wyświetlenia informacji Twojemu odwiedzającemu.

Typ danych prop error może być dowolny, co może wpłynąć na to, jak typujesz lub używasz wartości w swoim kodzie:
Typ danych prop `error` może być dowolny, co może wpłynąć na to, jak typujesz lub używasz wartości w swoim kodzie:

```astro title="src/pages/500.astro"
---
interface Props {
error: unknown
error: unknown;
}

const { error } = Astro.props
---

<div>{error instanceof Error ? error.message : 'Nieznany błąd'}</div>
<div>{error instanceof Error ? error.message : "Nieznany błąd"}</div>
```

Aby uniknąć wycieku wrażliwych informacji podczas wyświetlania zawartości z prop `error`, rozważ najpierw ocenienie błędu i zwrócenie odpowiedniej zawartości na podstawie rzuconego błędu. Na przykład, powinieneś unikać wyświetlania błędu stosu, ponieważ zawiera on informacje o tym, jak Twój kod jest strukturyzowany na serwerze.
Expand All @@ -148,32 +147,24 @@ Strony częściowe to komponenty stron zlokalizowane w `src/pages/`, które nie

Podobnie jak komponenty zlokalizowane poza tym folderem, te pliki nie zawierają automatycznie deklaracji `<!DOCTYPE html>`, ani żadnej zawartości `<head>`, takiej jak style i skrypty o ograniczonym zasięgu.

Jednakże, ponieważ znajdują się one w specjalnym katalogu `src/pages/`, wygenerowany HTML jest dostępny pod adresem URL odpowiadającym jego ścieżce pliku. Pozwala to bibliotece renderującej (np. htmx, Stimulus, jQuery) na dostęp do niego po stronie klienta i dynamiczne ładowanie sekcji HTML na stronie bez odświeżania przeglądarki lub nawigacji strony.
Jednakże, ponieważ znajdują się one w specjalnym katalogu `src/pages/`, wygenerowany HTML jest dostępny pod adresem URL odpowiadającym jego ścieżce pliku. Pozwala to bibliotece renderującej (np. [htmx](https://htmx.org/), [Stimulus](https://stimulus.hotwired.dev/), [jQuery](https://jquery.com/)) na dostęp do niego po stronie klienta i dynamiczne ładowanie sekcji HTML na stronie bez odświeżania przeglądarki lub nawigacji strony.

Strony częściowe, w połączeniu z biblioteką renderującą, zapewniają alternatywę dla [wysp Astro](/pl/concepts/islands/) i [tagów `<script>`](/pl/guides/client-side-scripts/) do budowania dynamicznej zawartości w Astro.

Pliki stron, które mogą eksportować wartość (np. `.astro`, `.mdx`) mogą być oznaczone jako częściowe.

Skonfiguruj plik w katalogu `src/pages/`, aby był częściowy, dodając następujący eksport:
Pliki stron, które mogą eksportować wartość dla [`partial`](/pl/reference/routing-reference/#partial) (np. `.astro` i `.mdx`, ale nie `.md`) mogą być oznaczone jako częściowe.

```astro title="src/pages/partial.astro" ins={2}
---
export const partial = true;
---

<li>Jestem częściowy!</li>
```

`export const partial` musi być możliwy do zidentyfikowania w sposób statyczny. Może przyjmować następujące wartości:

- Wartość logiczną __`true`__.
- Zmienną środowiskową używającą import.meta.env, na przykład `import.meta.env.USE_PARTIALS`.

### Używanie z biblioteką

Strony częściowe są używane do dynamicznego aktualizowania sekcji strony za pomocą biblioteki takiej jak [htmx](https://htmx.org/).
Strony częściowe są używane do dynamicznego aktualizowania sekcji strony za pomocą biblioteki takiej jak [htmx](https://htmx.org/).

Poniższy przykład pokazuje atrybut `hx-post` ustawiony na URL strony częściowej. Zawartość ze strony częściowej zostanie użyta do aktualizacji docelowego elementu HTML na tej stronie.
Poniższy przykład pokazuje atrybut `hx-post` ustawiony na URL strony częściowej. Zawartość ze strony częściowej zostanie użyta do aktualizacji docelowego elementu HTML na tej stronie.

```astro title="src/pages/index.astro" 'hx-post="/partials/clicked/"'
<html>
Expand All @@ -183,18 +174,20 @@ export const partial = true;
integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
crossorigin="anonymous"></script>
</head>
<body>
<section>
<div id="parent-div">Cel tutaj</div>

<button hx-post="/partials/clicked/"
hx-trigger="click"
hx-target="#parent-div"
hx-swap="innerHTML"
>
Kliknij Mnie!
</button>
</section>
</body>
</html>
<section>
<div id="parent-div">Cel tutaj</div>

<button hx-post="/partials/clicked/"
hx-trigger="click"
hx-target="#parent-div"
hx-swap="innerHTML"
>
Kliknij Mnie!
</button>
</section>
```

Strona częściowa `.astro` musi istnieć pod odpowiednią ścieżką pliku i zawierać eksport definiujący stronę jako częściową:
Expand Down