Przegląd konfiguracji

Astro to elastyczny framework bez narzuconych rozwiązań, który pozwala na konfigurację projektu na wiele różnych sposobów. Może to sprawiać wrażenie przytłaczającego na początku, ponieważ nie istnieje „jeden najlepszy sposób” na skonfigurowanie projektu Astro.

Przewodniki w tej sekcji “Konfiguracja” pomogą Ci zapoznać się z różnymi plikami, które umożliwiają konfigurację i dostosowanie poszczególnych elementów Twojego projektu oraz środowiska programistycznego.

Jeśli to Twój pierwszy projekt Astro lub minęło już trochę czasu, odkąd ostatnio konfigurowałeś nowy projekt, skorzystaj z poniższych przewodników i dokumentacji referencyjnej, aby uzyskać pomoc.

Plik konfiguracyjny Astro

Plik konfiguracyjny Astro (EN) to plik JavaScript znajdujący się w katalogu głównym każdego projektu startowego:

import { defineConfig } from "astro/config";

export default defineConfig({
  // tutaj umieść swoje opcje konfiguracji...
});

Ten plik jest wymagany tylko wtedy, gdy masz coś do skonfigurowania, ale większość projektów będzie korzystać z tego pliku. Pomocnicza funkcja defineConfig() zapewnia automatyczne podpowiedzi IntelliSense w edytorze i służy do definiowania wszystkich opcji konfiguracyjnych, które informują Astro, jak budować i renderować projekt do HTML.

W większości przypadków zalecamy używanie domyślnego formatu pliku .mjs lub .ts, jeśli chcesz pisać konfigurację w TypeScript. Jednakże astro.config.js i astro.config.cjs są również obsługiwane.

Przeczytaj referencję konfiguracji (EN), aby zapoznać się ze wszystkimi dostępnymi opcjami konfiguracyjnymi.

Plik konfiguracyjny TypeScript

Każdy projekt startowy Astro zawiera plik tsconfig.json. Skrypty komponentów w Astro domyślnie używają składni TypeScriptu, co zapewnia wsparcie narzędzi w edytorze oraz umożliwia opcjonalne dodanie typów do własnego kodu JavaScript.

Plik tsconfig.json służy do konfigurowania szablonu TypeScript, który odpowiada za sprawdzanie typów w Twoim kodzie, pozwala dodawać pluginy, ustawiać aliasy importów i nie tylko.

Przeczytaj przewodnik po TypeScript (EN) w Astro, aby poznać wszystkie dostępne opcje oraz wbudowane typy narzędziowe.

Środowisko deweloperskie

Podczas pracy w trybie deweloperskim możesz korzystać z edytora kodu i innych narzędzi, aby poprawić doświadczenie pracy z Astro.

Astro oferuje oficjalne rozszerzenie dla VS Code i jest kompatybilne z wieloma innymi popularnymi edytorami. Udostępnia również konfigurowalny pasek narzędzi wyświetlany w podglądzie przeglądarki podczas działania serwera deweloperskiego. Możesz zainstalować, a nawet zbudować własne aplikacje paska narzędzi dla dodatkowej funkcjonalności.

Przeczytaj przewodniki o konfiguracji edytora i używaniu paska narzędzi deweloperskich, aby dowiedzieć się, jak dostosować swoje środowisko programistyczne.

Typowe zadania w nowym projekcie

Oto kilka pierwszych kroków, które możesz wykonać w nowym projekcie Astro.

Dodaj domenę wdrożeniową

Aby wygenerować mapę witryny i utworzyć kanoniczne adresy URL, skonfiguruj adres URL wdrożenia w opcji site (EN). Jeśli Twoja strona będzie dostępna pod określoną ścieżką (np. www.example.com/docs), możesz również ustawić opcję base (EN) która określa katalog bazowy (root) Twojego projektu.

Różni dostawcy hostingu mogą też inaczej obsługiwać końcowe ukośniki w adresach URL (np. example.com/about vs example.com/about/). Po wdrożeniu strony możesz określić preferencję za pomocą opcji trailingSlash (EN).

import { defineConfig } from "astro/config";

export default defineConfig({
  site: "https://www.example.com",
  base: "/docs",
  trailingSlash: "always",
});

Dodaj metadane strony

Astro nie używa pliku konfiguracyjnego do ustawień typowych danych SEO ani metadanych — ten plik służy wyłącznie do konfiguracji procesu budowania i renderowania projektu do HTML.

Tego rodzaju informacje należy dodać ręcznie do znacznika <head> w HTML przy użyciu znaczników <link> i <meta>, tak jak w przypadku klasycznego HTML.

Często stosowanym wzorcem w Astro jest utworzenie komponentu <Head /> w pliku .astro, który można użyć we wspólnym układzie strony (layout), tak aby obowiązywał dla wszystkich stron.

---
import Head from "./Head.astro";

const { ...props } = Astro.props;
---
<html>
  <head>
    <meta charset="utf-8">
    <Head />
    <!-- Dodatkowe elementy sekcji <head> -->
  </head>
  <body>
    <!-- Tutaj renderowana jest zawartość strony -->
  </body>
</html>

Head.astro to standardowy komponent Astro, więc możesz w nim importować inne pliki i odbierać propsy przekazane z innych komponentów, takie jak tytuł strony.

---
import Favicon from "../assets/Favicon.astro";
import SomeOtherTags from "./SomeOtherTags.astro";

const { title = "Moja strona Astro", ...props } = Astro.props;
---
<link rel="sitemap" href="/sitemap-index.xml">
<title>{title}</title>
<meta name="description" content="Witamy na mojej nowej stronie Astro!">

<!-- Analityka -->
<script data-goatcounter="https://my-account.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

<!-- Open Graph -->
<meta property="og:title" content="Moja nowa strona Astro" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:description" content="Witamy na mojej nowej stronie Astro!" />
<meta property="og:image" content="https://www.example.com/_astro/seo-banner.BZD7kegZ.webp">
<meta property="og:image:alt" content="">

<SomeOtherTags />

<Favicon />

Pomóż nam Społeczność Sponsor