Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Next.js yra galinga sistema, skirta kurti didelio našumo React programas. Viena iš jo funkcijų yra galimybė kurti pasirinktinius puslapių maketus, leidžiančius sukurti nuoseklų dizainą, kurį lengva prižiūrėti ir atnaujinti visoje programoje.

Pasirinkto išdėstymo komponento kūrimas toliau. JS

Aplanke pavadinimu komponentai savo Next.js projekte sukurkite Layout.jsx ir pridėkite šį kodą, kad sukurtumėte išdėstymo komponentą.

importuoti Galva iš"kitas / galva"
importuoti Antraštė iš„./Header.jsx“
importuoti Poraštė iš„./Footer.jsx“
konst Išdėstymas = (vaikai) => (



Mano programa<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <antra></antra><br> {vaikai}<br> <pora></pora><br> <<span>/div></span><br>)<br><span>eksportuoti</span> <span>numatytasis</span> išdėstymas<br> < p>Šis komponentas importuoja antraštės ir poraštės komponentus ir <span>priima vaikus kaip rekvizitai</span>. Jis pateikia <strong>vaikus</strong> tarp antraštės ir poraštės komponentų. Kai apvyniojate puslapį šiuo išdėstymu, viršuje ir apačioje bus rodoma antraštė ir poraštė.<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6975751975873345" crossorigin="anonymous"></script>
<!-- den1 -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6975751975873345" data-ad-slot="1357082842" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<a href="https://greatfon.com">instagram viewer</a>
</div>
<h2 id="using-the-layout-component"> Naudojant Maketo komponentas </h2>
<p>Jei norite naudoti išdėstymo komponentą, importuokite jį į puslapio komponentą ir naudokite, kaip parodyta toliau.</p> <pre> <code><span>importuoti</span> Išdėstymas <span>iš</span> <span>'../components/Layout'</span><br><span>const</span> Puslapis = <span><span>()</span> =></span> (<br> <i><br> <h1>Pagrindinis<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>eksportuoti</span> <span> numatytasis</span> puslapis<br>
</h1></i></code> </pre>
<p>Jis bus pritaikytas šio puslapio išdėstymas. Šį procesą galite pakartoti visuose puslapiuose, kuriuose norite taikyti išdėstymą.</p>
<p>Jei norite naudoti maketą visuose programų puslapiuose vienu metu, importuokite išdėstymo komponentą į <strong>/page/_app.js</strong> failą ir naudokite jį taip.</p> <pre> <code><span>importuoti</span> Maketas <span>iš span> <span>"../components/layout"</span>;<br><span><span>funkcija</span> <span>Mano programa</span> (<span>{ Component, pageProps } span>) </span>{ <br> <span>grįžti</span> ( <br> <i> <br> <komponentas></komponentas> <br> <<span>/Layout> </span><br> ) ;<br>}</i></span></span></code> </pre>
<p>Iki šiol pateikti pavyzdžiai naudokite Next.js 12 puslapių aplankus. 13 versijos Next.js maketą sukuriate programos aplanke (rašant jis yra beta versijoje).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Pasirinktinio išdėstymo kūrimas programų aplanke </h2>
<p><span>Next.js 13 versijos programos aplanke </span> reikia sukurti pagrindinį išdėstymą. Tai yra išdėstymas, kurį Next.js taikys visiems jūsų programos puslapiams.</p>
<p>Norėdami parodyti, sukurkite failą pavadinimu <strong>layout.jsx</strong> ir pridėkite šį kodą.</p> p> <pre> <code><span>eksportuoti</span> <span>numatytoji</span> <span><span>funkcija</span> <span>RootLayout</span>(<span>{ vaikai } span>) </span>{<br> <span>grąžinti</span> (<br> "en"</span>><br> {vaikai}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Šakninio išdėstymo komponentas priima ir pateikia <strong>vaikai</strong>. Toliau pateikiami keli dalykai, kuriuos turėtumėte žinoti apie šakninį išdėstymą:</p>
<ul> <li> Turite įtraukti jį į programos aplanką. </li> <li> Jis pakeičia <strong>_app.js</strong> ir <strong>_document.js</strong> Next.js 12 puslapio aplanke. </li> <li> Turite aiškiai įtraukti HTML ir turinio žymą. </li> <li> Pagal numatytuosius nustatymus tai yra serverio komponentas. </li> </ul>
<p>Kaip minėta, šakninis išdėstymas taikomas visiems puslapiams, taigi, kaip sukurti tinkintus išdėstymus skirtingų maršruto atkarpų?</p>
<p>Programos aplanke galite apibrėžti maršrutą, sukurdami kiekvieno maršruto aplankus segmentas. Pavyzdžiui, sukūrus aplanką, pavadintą <strong>straipsniai</strong>, susieta su URL keliu <strong>programa / straipsniai</strong>. Norėdami pridėti daugiau maršruto atkarpų, pagrindiniame maršruto aplanke sukurkite poaplankį. Pavyzdžiui, aplanko, pavadinto <strong>populiarūs</strong>, įtraukimas į <strong>straipsnių</strong> aplanko žemėlapius prie URL kelio <strong>programa/straipsniai/tendencijos</strong>.</p>
<p>Kai prie maršruto aplanko pridedate komponentą <strong>layout.jsx</strong>, jis bus taikomas visiems jo puslapiams maršruto atkarpa ir jos poaplankiai. Pavyzdžiui, pridėjus išdėstymo komponentą į aplanką <strong>straipsniai</strong>, jis bus taikomas visiems straipsnių maršruto puslapiams, įskaitant esančius <strong>populiarūs</strong> poaplankyje. Jei taip pat pridėsite išdėstymo komponentą į aplanką <strong>populiarūs</strong>, straipsnių aplanko išdėstymas bus įdėtas į jį.</p>
<h2 id="advantages-of-using-layouts"> Maketų naudojimo pranašumai </h2>
<p>Next.js leidžia kurti išdėstymo komponentus, kuriuos galite pakartotinai naudoti įvairiose puslapių. Tai leidžia nuosekliai žiūrėti į svetainę nedubliuojant kodo keliuose puslapiuose. Be to, išdėstymai padeda greitai įgyvendinti pakeitimus, nes nereikia keisti kiekvieno puslapio.</p>