Susun atur di Astro-tutorial js-php.cn

Susun atur di Astro

William Shakespeare

Lepaskan： 2025-02-08 11:17:09

asal

919 orang telah melayarinya

Petikan tutorial susun atur Astro ini, dari melepaskan kuasa Astro (tersedia di SitePoint Premium), menunjukkan penstrukturan laman web yang cekap. Walaupun setiap halaman Astro boleh mengandungi dokumen HTML yang lengkap, redundansi dielakkan dengan menggunakan susun atur. Ini amat bermanfaat untuk unsur -unsur seperti <meta> dan <title></title> tag, yang sering berubah setiap halaman.

menganjurkan fail susun atur dalam folder src/layouts disyorkan untuk berskala. Susun atur berbilang boleh dibuat -contohnya, susun atur berasingan untuk navigasi, footers, atau bahkan bahagian halaman yang berbeza.

Struktur laman web sampel mungkin termasuk:

layouts/Layout.astro: fail susun atur utama.
layouts/Head.astro: mengendalikan kandungan spesifik halaman.
layouts/Nav.astro: bar navigasi.
layouts/Footer.astro: footer.

Layouts in Astro

fail

mungkin kelihatan seperti ini: layouts/Layout.astro

---
import Head from './Head.astro';
import Nav from './Nav.astro';
const { title = 'Footie is the best', description = 'An online football magazine' } = Astro.props;
import Footer from './Footer.astro';
---

<html lang="en">
<head>
  <Head />
  <title>{title}</title>
  <meta content="{description}" name="description">
</head>
<body>
  <Nav />
  <main>
    <slot />
  </main>
  <Footer />
</body>
</html>

Salin selepas log masuk

Pendekatan ini menggalakkan kod yang lebih bersih, lebih banyak dikekalkan dengan memusatkan elemen umum dan membolehkan penyesuaian mudah setiap halaman.

Atas ialah kandungan terperinci Susun atur di Astro. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!