|
| 1 | +--- |
| 2 | +title: Przegląd konfiguracji |
| 3 | +description: Dowiedz się, jak konfigurować i dostosowywać swój projekt Astro oraz środowisko programistyczne. |
| 4 | +i18nReady: true |
| 5 | +--- |
| 6 | +import ReadMore from '~/components/ReadMore.astro' |
| 7 | + |
| 8 | +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. |
| 9 | + |
| 10 | +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. |
| 11 | + |
| 12 | +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. |
| 13 | + |
| 14 | +## Plik konfiguracyjny Astro |
| 15 | + |
| 16 | +[Plik konfiguracyjny Astro](/pl/reference/configuration-reference/) to plik JavaScript znajdujący się w katalogu głównym każdego projektu startowego: |
| 17 | + |
| 18 | +```js |
| 19 | +// astro.config.mjs |
| 20 | +import { defineConfig } from "astro/config"; |
| 21 | + |
| 22 | +export default defineConfig({ |
| 23 | + // tutaj umieść swoje opcje konfiguracji... |
| 24 | +}); |
| 25 | +``` |
| 26 | + |
| 27 | +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. |
| 28 | + |
| 29 | +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. |
| 30 | + |
| 31 | +<ReadMore>Przeczytaj [referencję konfiguracji](/pl/reference/configuration-reference/), aby zapoznać się ze wszystkimi dostępnymi opcjami konfiguracyjnymi.</ReadMore> |
| 32 | + |
| 33 | +## Plik konfiguracyjny TypeScript |
| 34 | + |
| 35 | +Każdy projekt startowy Astro zawiera plik `tsconfig.json`. [Skrypty komponentów](/pl/basics/astro-components/#skrypt-komponentu) 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. |
| 36 | + |
| 37 | +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. |
| 38 | + |
| 39 | +<ReadMore>Przeczytaj [przewodnik po TypeScript](/pl/guides/typescript/) w Astro, aby poznać wszystkie dostępne opcje oraz wbudowane typy narzędziowe.</ReadMore> |
| 40 | + |
| 41 | +## Środowisko deweloperskie |
| 42 | + |
| 43 | +Podczas pracy w trybie deweloperskim możesz korzystać z edytora kodu i innych narzędzi, aby poprawić doświadczenie pracy z Astro. |
| 44 | + |
| 45 | +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. |
| 46 | + |
| 47 | +<ReadMore>Przeczytaj przewodniki o [konfiguracji edytora](/pl/editor-setup/) i [używaniu paska narzędzi deweloperskich](/pl/guides/dev-toolbar/), aby dowiedzieć się, jak dostosować swoje środowisko programistyczne.</ReadMore> |
| 48 | + |
| 49 | +## Typowe zadania w nowym projekcie |
| 50 | + |
| 51 | +Oto kilka pierwszych kroków, które możesz wykonać w nowym projekcie Astro. |
| 52 | + |
| 53 | +### Dodaj domenę wdrożeniową |
| 54 | + |
| 55 | +Aby wygenerować mapę witryny i utworzyć kanoniczne adresy URL, skonfiguruj adres URL wdrożenia w opcji [`site`](/pl/reference/configuration-reference/#site). 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`](/pl/reference/configuration-reference/#base) która określa katalog bazowy (root) Twojego projektu. |
| 56 | + |
| 57 | +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`](/pl/reference/configuration-reference/#trailingslash). |
| 58 | + |
| 59 | +```js title="astro.config.mjs" |
| 60 | +import { defineConfig } from "astro/config"; |
| 61 | + |
| 62 | +export default defineConfig({ |
| 63 | + site: "https://www.example.com", |
| 64 | + base: "/docs", |
| 65 | + trailingSlash: "always", |
| 66 | +}); |
| 67 | +``` |
| 68 | + |
| 69 | +### Dodaj metadane strony |
| 70 | + |
| 71 | +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. |
| 72 | + |
| 73 | +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. |
| 74 | + |
| 75 | +Często stosowanym wzorcem w Astro jest utworzenie [komponentu](/pl/basics/astro-components/) `<Head />` w pliku `.astro`, który można użyć we wspólnym [układzie strony (layout)](/pl/basics/layouts/), tak aby obowiązywał dla wszystkich stron. |
| 76 | + |
| 77 | +```astro title="src/components/MainLayout.astro" |
| 78 | +--- |
| 79 | +import Head from "./Head.astro"; |
| 80 | +
|
| 81 | +const { ...props } = Astro.props; |
| 82 | +--- |
| 83 | +<html> |
| 84 | + <head> |
| 85 | + <meta charset="utf-8"> |
| 86 | + <Head /> |
| 87 | + <!-- Dodatkowe elementy sekcji <head> --> |
| 88 | + </head> |
| 89 | + <body> |
| 90 | + <!-- Tutaj renderowana jest zawartość strony --> |
| 91 | + </body> |
| 92 | +</html> |
| 93 | +``` |
| 94 | + |
| 95 | +`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. |
| 96 | + |
| 97 | +```astro title="src/components/Head.astro" |
| 98 | +--- |
| 99 | +import Favicon from "../assets/Favicon.astro"; |
| 100 | +import SomeOtherTags from "./SomeOtherTags.astro"; |
| 101 | +
|
| 102 | +const { title = "Moja strona Astro", ...props } = Astro.props; |
| 103 | +--- |
| 104 | +<link rel="sitemap" href="/sitemap-index.xml"> |
| 105 | +<title>{title}</title> |
| 106 | +<meta name="description" content="Witamy na mojej nowej stronie Astro!"> |
| 107 | +
|
| 108 | +<!-- Analityka --> |
| 109 | +<script data-goatcounter="https://my-account.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script> |
| 110 | +
|
| 111 | +<!-- Open Graph --> |
| 112 | +<meta property="og:title" content="Moja nowa strona Astro" /> |
| 113 | +<meta property="og:type" content="website" /> |
| 114 | +<meta property="og:url" content="http://www.example.com/" /> |
| 115 | +<meta property="og:description" content="Witamy na mojej nowej stronie Astro!" /> |
| 116 | +<meta property="og:image" content="https://www.example.com/_astro/seo-banner.BZD7kegZ.webp"> |
| 117 | +<meta property="og:image:alt" content=""> |
| 118 | +
|
| 119 | +<SomeOtherTags /> |
| 120 | +
|
| 121 | +<Favicon /> |
| 122 | +``` |
0 commit comments