Română

English

Română

English

Aspect

Astro ​

Ar trebui să creezi o componentă de pagină sub src/pages/ ca punct de intrare al site-ului tău Astro. Codul tău Astro ar trebui să fie verificat folosind ESLint cu configurația Astro recomandată.

Fișierul de intrare ​

Fișierul de intrare pentru acest șablon este src/pages/index.astro. Astro asociază automat fișierele din src/pages/ cu rute în funcție de numele fișierului lor.

Un fișier Astro are două părți separate de delimitatori ---: frontmatter (JavaScript/TypeScript care rulează la momentul construirii/cererii) și șablonul (HTML-ul randat):

astro
---
// frontmatter — runs in Node
---

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Astro</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Versiune ​

Rulează pe Node.js v22.0.0

Limbi suportate ​

Javascript

Framework de testare ​

Vitest

Atenționări speciale și detalii de implementare ​

  • Testele folosesc Astro Container API experimental (experimental_AstroContainer) pentru a randa o pagină sub formă de șir de caractere fără a porni un server real.
  • Frontmatter rulează doar pe server — fără variabile globale de browser. Pentru a rula cod în browser, folosește o etichetă <script> în șablon, pe care Astro o va include în pachetul pentru client.
  • Componentele Astro nu conțin JavaScript în mod implicit. Componentele UI din React/Svelte/Solid/Vue pot fi adăugate cu integrările oficiale și directivele client:* atunci când este necesară interactivitatea.

Exemplu cu Vitest + Astro Container API: ​

js
import { describe, it, expect } from 'vitest';
import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import Page from './src/pages/index.astro';

describe('index.astro', () => {
  it('renders an <h1> containing "Hello, World!"', async () => {
    const container = await AstroContainer.create();
    const html = await container.renderToString(Page);
    expect(html).toMatch(/<h1[^>]*>\s*Hello, World!\s*<\/h1>/);
  });
});

Biblioteci incluse ​

Cum se depanează ​

Componentele Astro au două faze de execuție — frontmatter (pe partea de server) și șablonul (HTML-ul randat, hidratat opțional). Fiecare fază scrie loguri în locuri diferite.

Frontmatter (server) ​

Frontmatter rulează în Node la momentul construirii/cererii. console.log apelat de aici apare în terminalul în care rulează astro dev:

astro
---
const data = await fetch('/api/items').then((response) => response.json());
console.log('Fetched items:', data);
---

Șablon (client) ​

Pentru loguri pe partea de browser, adaugă o etichetă <script> — Astro o împachetează și o trimite către client:

astro
<script>
  console.log('This runs in the browser');
</script>

Pași pentru depanare folosind console.log ​

  1. Identifică zona cu probleme: Decide dacă problema se află în frontmatter (pregătirea datelor) sau în HTML-ul randat / scriptul de client hidratat.

  2. Introdu instrucțiuni console.log(): Adaugă apeluri de logare în faza relevantă. Frontmatter → terminal; <script> → instrumentele de dezvoltare din browser (devtools).

  3. Verifică rezultatul testelor (Results Output)

  4. Folosește pictograma Debug din zona Preview: Fă clic pe pictograma de depanare (debug) din zona Preview pentru a verifica rezultatul din terminal sau deschide consola DevTools a browserului tău pentru logurile de client.

  5. Analizează rezultatul: Compară logurile cu pagina randată pentru a depista datele lipsă, prop-urile greșite sau neconcordanțele de hidratare.

Iată un exemplu care combină ambele faze:

astro
---
const message = 'Hello, World!';
console.log('Built message:', message); // logs in the terminal
---

<h1>{message}</h1>
<script>
  console.log('Page loaded'); // logs in the browser
</script>