Strony

Strony to pliki znajdujące się w podkatalogu src/pages/ Twojego projektu Astro. Odpowiadają one za obsługę routingu, ładowanie danych i ogólny układ każdej strony Twojej witryny internetowej.

Obsługiwane typy plików stron

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

.astro
.md
.mdx (z zainstalowaną Integracją MDX)
.html
.js/.ts (jako endpointy)

Routing oparty na plikach

Astro wykorzystuje strategię routingu zwaną routingiem opartym na plikach. Każdy plik w Twoim katalogu src/pages/ zamienia się w endpoint na Twojej stronie, w oparciu o jego lokalizację w strukturze plików.

Pojedynczy plik może również generować wiele stron za pomocą dynamicznego routingu. Pozwala to tworzyć strony nawet wtedy, gdy Twoja zawartość znajduje się poza specjalnym katalogiem /pages/, na przykład w kolekcji zawartości lub CMS.

Przeczytaj więcej o Routingu w Astro.

Linkowanie między stronami

Napisz standardowe elementy HTML <a> na Twoich stronach Astro, aby linkować do innych stron na Twojej stronie. Użyj ścieżki URL względnej do Twojej domeny głównej jako Twojego linka, a nie względnej ścieżki pliku.

Na przykład, aby linkować do https://example.com/authors/sonali/ z dowolnej innej strony na example.com:

Przeczytaj więcej <a href="/authors/sonali/">o Sonali</a>.

Strony Astro

Strony Astro używają rozszerzenia pliku .astro i obsługują te same funkcje co komponenty Astro.

---
---
<html lang="pl">
  <head>
    <title>Moja Strona Główna</title>
  </head>
  <body>
    <h1>Witaj na mojej stronie!</h1>
  </body>
</html>

Strona musi produkować pełny dokument HTML. Jeśli nie zostanie to jawnie uwzględnione, Astro domyślnie doda niezbędną deklarację <!DOCTYPE html> i zawartość <head> do każdego komponentu .astro zlokalizowanego w src/pages/. Możesz zrezygnować z tego zachowania dla poszczególnych komponentów, oznaczając je jako częściowe strony.

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. Możesz użyć tylu komponentów układu, ile chcesz.

---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>Zawartość mojej strony, opakowana w układ!</p>
</MySiteLayout>

Przeczytaj więcej o komponentach układu w Astro.

Strony Markdown/MDX

Astro traktuje również pliki Markdown (.md) wewnątrz src/pages/ jako strony w Twojej końcowej witrynie. Jeśli masz zainstalowaną Integrację MDX, to pliki MDX (.mdx) traktowane są w ten sam sposób.

Pliki Markdown mogą wykorzystywać specjalną właściwość frontmatter layout, aby określić komponent układu, który otoczy ich treść Markdown w pełny dokument strony <html>...</html>.

---
layout: '../layouts/MySiteLayout.astro'
title: 'Moja strona Markdown'
---
# Tytuł

To jest moja strona, napisana w **Markdown.**

Przeczytaj więcej o Markdown w Astro.

Strony HTML

Pliki z rozszerzeniem .html mogą być umieszczone w katalogu src/pages/ i używane bezpośrednio jako strony na Twojej stronie. Zauważ, że niektóre kluczowe funkcje Astro nie są obsługiwane w Komponentach HTML.

Niestandardowa strona błędu 404

Aby uzyskać niestandardową stronę błędu 404, możesz utworzyć plik 404.astro lub 404.md w src/pages.

To zbuduje stronę 404.html. Większość usług wdrożeniowych znajdzie ją i jej użyje.

Niestandardowa strona błędu 500

Aby uzyskać niestandardową stronę błędu 500 do wyświetlenia dla stron, które są renderowane na żądanie, 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.

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

Dodane w: astro@4.10.3

W fazie rozwoju aplikacji, przy obecności pliku 500.astro, błąd rzucony w czasie wykonywania jest logowany w Twoim terminalu, w przeciwieństwie do pokazywania się w nakładce błędów.

`error`

Dodane w: astro@4.11.0

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:

---
interface Props {
    error: unknown
}

const { error } = Astro.props
---

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

Strony częściowe

Dodane w: astro@3.4.0

Strony częściowe to komponenty stron zlokalizowane w src/pages/, które nie są przeznaczone do renderowania jako pełne strony.

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.

Strony częściowe, w połączeniu z biblioteką renderującą, zapewniają alternatywę dla wysp Astro i tagów <script> 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:

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

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.

<html>
  <head>
    <title>Moja strona</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
</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ą:

---
export const partial = true;
---
<div>Zostałem kliknięty!</div>

Zobacz dokumentację htmx aby uzyskać więcej szczegółów na temat używania htmx.

Pomóż nam

Społeczność