Šis „Astro“ maketų įvadas yra išimtis Astro galios išlaisvinimasdabar pasiekiama „SitePoint Premium“.
Nors kiekvienas .astro puslapis (maršrutas) gali turėti visavertį HTML dokumentą, neefektyvu tą struktūrą kopijuoti, ypač kai tam tikri elementai, pvz. <meta> ir <title> elementai – gali skirtis priklausomai nuo šiuo metu peržiūrimo puslapio. (Neveiksmingumas kyla dėl to, kad kiekvienam turėtume pridėti tą pačią HTML struktūrą .astro puslapis.)
Todėl patartina sukurti bendrą išdėstymą, kurį būtų galima naudoti visuose puslapiuose. Nors ir neprivaloma, išdėstymo failų tvarkymas src/layouts aplankas yra prasmingas, nes galima pridėti kelis išdėstymo failus, pvz., vieną naršymui ir kitą poraštei, arba netgi padalinti puslapio dalių išdėstymą (pavyzdžiui, atskiras viso puslapio ir tinklaraščio išdėstymas) .
Apsvarstykite toliau pateiktą pagrindinės svetainės, kuri apima bendrus vartotojo sąsajos elementus, pavyzdį:
layouts/Layout.astro: pagrindinis išdėstymo failaslayouts/Head.astro: skyrius, skirtas pagal užsakymą<head>elementų, kurie gali būti unikalūs kiekvienam puslapiuilayouts/Nav.astro: naršymo juostalayouts/Footer.astro: poraštės skyrius
Štai žvilgsnis į layouts/Layout.astro failas:
---
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">
<title>{title}</title>
<meta name="description" content={description}>
<body>
<Nav />
<div>
<main>
<slot />
</main>
</div>
<Footer />
</body>
</html>
Atminkite, kad aukščiau pateiktame pavyzdyje standartinius HTML elementus maišome su Astro komponentais. Tie, kurie rašomi didžiosiomis raidėmis (Nav ir Footer) yra Astro komponentai, importuojami viršutinėje šio pavyzdinio maketo failo dalyje.
Astro.rekvizitas
Čia yra keletas pagrindinių dalykų. Atkreipkite dėmesį į import funkcija ir naudojimas Astro.props. Mes galime lengvai importuoti bet kurį kitą komponentą naudodami import raktažodį. Specialus įmontuotas Astro.props Objektas leidžia mums siųsti ypatybes komponentams ir pasiekti juos. Aukščiau pateiktame kode numatytosios reikšmės nustatomos, jei Astro.props trūksta title arba description klavišus (numatytosios reikšmės yra Footie is the best ir An online football magazine). Tai yra gera praktika, ir mes naudojame „JavaScript“ numatytąsias parametrų funkcijas, sumaišytas su objektų sunaikinimu. Tačiau jei yra props išsiųstas, Astro juos pasiims. Pažvelkime į tai išnagrinėję toliau pateiktą kodą:
<!-- Uses the defaults -->
<Layout />
<!-- Sets title to "My Title," while description retains its default value -->
<Layout title="My Title" />
Pirmas <Layout /> komponentas neturi props prijungtas prie jo, todėl jis naudos anksčiau minėtas numatytąsias reikšmes. Tačiau pagal antrąjį scenarijų title rekvizitas siunčiamas su verte My Titleo tai reiškia, kad puslapyje bus rodomas atitinkamas pavadinimas.
Pasaulinės objekto savybės
Įtaisytajame visuotiniame objekte pasiekiamos kelios ypatybės Astro.
Galiausiai atkreipkite dėmesį į <slot /> elementas, kuris yra individualaus turinio įterpimo taškas .astro puslapių. Daugiau apie tai netrukus.
Taip pat atkreipkite dėmesį į <Head> Astro komponentas. Tarkime, nuosavybė ir kintamasis, turintys vertę, kurią norime siųsti nuosavybei, turi tą patį pavadinimą. Tokiu atveju galime naudoti paprastesnę sintaksę:
const title="my title";
<Head title={title} />
<!-- Can be simplified to 👇 -->
<Head {title} />
Lizdas
Galiausiai, pakalbėkime šiek tiek daugiau apie įmontuotą <slot /> elementas. Kai maketai bus paruošti, turinys iš Astro failų src/pages aplankas bus įterptas ten, kur yra aukščiau minėtas elementas.
Norėdami pritaikyti išdėstymą Astro failui, turime jį importuoti ir naudoti kaip bet kurį kitą komponentą:
---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Welcome">
<p>Some content that will be injected into the "slot"</p>
</Layout>Norite sužinoti daugiau apie „Astro“ – modernią „viskas viename“ sistemą, skirtą greitesnėms, į turinį orientuotoms svetainėms kurti? Patikrinkite Astro galios išlaisvinimasdabar pasiekiama „SitePoint Premium“.
