- „Blade“ kompiliuoja .blade.php šablonus į gryną PHP ir siūlo aiškias direktyvas sąlyginiams veiksmams, ciklams, maketams ir komponentams.
- „Blade“ stekai (@stack, @push, @prepend) leidžia centralizuoti scenarijus ir stilius, deleguojant tai, kas sukrauta, antriniams rodiniams.
- Aplinkos, autorizacijos, sesijos ir patvirtinimo direktyvos saugiai ir aiškiai integruoja vaizdus su likusia sistema.
- Pasirinktinės direktyvos ir pagalbinės priemonės, tokios kaip „Js::from“, atveria duris į sudėtingesnius šablonus, įskaitant „hasStack“ tipo direktyvą.
Jei kasdien dirbate su „Laravel“, anksčiau ar vėliau susidursite su „Blade“, jos direktyvomis ir, žinoma, rodinių stekais bei hipotetinės „hasStack“ direktyvos idėja , skirta geriau juos valdyti. Galbūt anksčiau naudojote klasikinius PHP šablonus arba esate įpratę prie „React“ ar „Vue“, bet kai iš tikrųjų suprantate „Blade“ ir viską, ką jis siūlo (įskaitant stekus), jūsų rodinių organizavimas žengia reikšmingą šuolį į priekį.
Šiame straipsnyje mes išsamiai apžvelgsime subtilybes: išsamiai sužinosite, kaip veikia „Blade“, kas yra valdymo direktyvos, kaip struktūrizuoti maketai, komponentai, lizdai, atributai, autorizacija ir aplinkos, ir, atsižvelgiant į tai, kaip dera stekų ir „hasStack“ direktyvos koncepcija, leidžianti patikrinti, ar nėra sukrauto turinio prieš pateikiant vaizdą. Visa tai bus iliustruota praktiniais pavyzdžiais ir realistišku požiūriu, skirtu šiuolaikiniams „Laravel“ projektams.
Kas yra „Blade“ ir kodėl svarbu suprasti jo nurodymus?
Ašmenys yra oficialus „Laravel“ šablonų variklisTai neverčia jūsų nustoti naudoti PHP, bet suteikia daug švaresnę sintaksę pateikimo logikai ir HTML derinti be nuolatinio žymų atidarymo ir uždarymo. Visą laiką. Kiekvienas šablonas .blade.php Jis sukompiliuojamas į gryną PHP ir talpinamas storage/framework/views, todėl vykdymo laiko sąnaudos yra minimalios.
Ašmenų vaizdai paprastai išsaugomi ištekliai / peržiūros ir grąžinami iš maršrutų arba valdiklių naudojant pagalbininką view()Šiam pagalbininkui galite perduoti duomenis antrame argumente (asociatyviame masyve, compact()ir kt.), o rodinyje jie yra suvartojami su sintaksės dvigubi raktai , kad būtų rodomas išėjimo simboliais pažymėtas turinys, arba su šauktukais, jei turinys nėra išėjimo simboliais pažymėtas.
Pagrindinis „Blade“ privalumas yra tas, kad jis siūlo konkrečios direktyvos (tie žodžiai, kurie prasideda @) tvarkyti sąlyginius veiksmus, ciklus, autorizaciją, scenarijų paketus, komponentus, laiko tarpsnius, patvirtinimą, aplinkas... Visa tai daro peržiūros kodą daug lengviau skaitomą ir prižiūrimą nei chaotiškas klasikinio PHP ir echo ir paprastą HTML.
Pagrindinė „Blade“ sintaksė: aidas, pabėgimas ir pažodinis perrašymas
Tipiškiausia rodinio operacija yra duomenų rodymas. „Blade“ atveju, norint atspausdinti kintamojo turinį, tereikia naudoti {{ }}, kuris viduje reiškia a echo e($variable) ir todėl, Escape HTML objektai, siekiant išvengti XSS:
Išeitinių kintamųjų rodymas yra toks paprastas:
{{ $name }}
Jei norite rodyti iš anksto sugeneruotą HTML arba turinį, kurio nereikėtų kaitinti (pavyzdžiui, todėl, kad jūs jį kontroliuojate ir žinote, kad jis saugus), galite naudoti sintaksę {!!! !!} , kuri išjungia automatinį kaitinimą ir leidžia naršyklei jį interpretuoti tokį, koks jis yra:
{!! $htmlSeguro !!}
Jei dirbate su front-end karkasais, kurie taip pat naudoja raktus (pvz., „Vue“ arba kokia nors kliento pusės šablonų biblioteka), „Blade“ leidžia jums „Ištrūkti“ nuo savo paties variklio su priešdėliu @. Tokiu būdu @{{ kintamasisJavascript }} Jis nebus interpretuojamas kaip „Blade“ išraiška, bet liks HTML faile, kad jį apdorotų naršyklės sistema.
Kai turite didelius blokus, kuriuose reikia visiškai atsižvelgti į dvigubus riestinius skliaustus, kad „Blade“ jų neliestų, galite juos apsupti direktyva @verbatim … @endverbatim . Viskas viduje liks nepaliesta – tai labai naudinga priemonė integruojant sudėtingus front-end šablonus.
Valdymo struktūros: if, switch, ciklai ir $loop kintamasis
„Blade“ siūlo visą srauto valdymo direktyvų rinkinį , kuris PHP sintaksę pateikia lengviau skaitomu ir nuoseklesniu būdu. Praktiškai logika yra beveik identiška, tačiau įgyjate aiškumo ir išvengiate per didelio PHP žymų naudojimo HTML kode.
Jei teiginiai yra parašyti su @if, @elseif, @else ir jie užsidaro su @endifTaip pat turite sparčiųjų klavišų, pvz. @unless (sąlygos neigimas), @isset patikrinti, ar kintamasis yra apibrėžtas ir @empty kad patikrintumėte, ar jis tuščias.
Scenarijuose su keliomis galimomis reikšmėmis direktyva @jungiklis atkartoja PHP jungiklio struktūrą su @case, @break, @default ir uždarykite su @endswitch, palengvinant kelių lengvai skaitomų sąlyginių sakinių naudojimą.
Kalbant apie ciklus, turite @už, @kiekvienam y @kol, Plius @forelseTai labai naudinga, kai norite iteruoti per rinkinį, bet taip pat reikia apdoroti tuščio sąrašo atvejį nerašant papildomo „if“ sakinio. @forelse ... @empty ... @endforelse Jei nėra elementų, galite pateikti alternatyvų turinį.
Keliaudami per @kiekvienam„Blade“ suteikia jums prieigą prie kintamojo $ciklas, objektas, kuriame yra labai naudingos informacijos apie dabartinę iteraciją: indeksas, ar tai pirmas, ar paskutinis posūkis, ar indeksas lyginis, ar nelyginis, kiek iš viso yra iteracijų, ar net prieiga prie pirminio ciklo įterptųjų ciklų atveju, naudojant $loop->parent.
Šablono paveldėjimas, maketai ir sekcijos
Realaus pasaulio programose nenorite kartoti antraščių, meniu ar poraštės kiekviename rodinyje. „Blade“ leidžia jums apibrėžti pagrindinis išdėstymas (paprastai jis saugomas) resources/views/layouts/master.blade.php), kuriuos paveldi visi puslapiai. Makete apibrėžiate „tuščias“ sritis su @yield o likusi įprasto HTML dalis išlieka stabili.
Norėdami naudoti tą išdėstymą iš antrinio rodinio, jums tereikia nurodyti @extends('išdėstymai.master') ir deklaruokite norimus užpildyti skyrius naudodami @skyrius y @endsection. Kiekvienas @yield('nombre') magistro laipsnis atitiks a @section('nombre') dukters požiūriu.
Be to, direktyva @parent leidžia ne tik perrašyti skyrių, bet ir pridėti turinį virš arba po tuo, ką apibrėžia išdėstymas . Tai labai naudinga šoninėse juostose arba blokuose, kuriuos norite išplėsti, o ne pakeisti.
Jei reikia įtraukti pakartotinai naudojamus HTML fragmentus be visiško paveldėjimo, „Blade“ teikia @įtraukti ir visa susijusių direktyvų šeima: @includeIf, @includeWhen, @includeUnless y @includeFirstkurie leidžia sąlyginai įtraukti antrinius rodinius arba pasirinkti pirmąjį galimų maršrutų sąraše.
Tais atvejais, kai kiekvienam kolekcijos elementui kartojamas nedidelis fragmentas, „@each“ direktyva sujungia „foreach“ ir „include“ į vieną eilutę ir netgi gali apibrėžti alternatyvų rodinį tuo atveju, kai kolekcija atkeliauja tuščia.
Peilio komponentai, lizdai ir atributai
Blade komponentai yra natūrali maketų evoliucija ir apima: jie leidžia apjungti pakartotinai naudojamas sąsajos dalis (mygtukus, įspėjimus, korteles, formas...) su jų pačių logika, savybėmis ir lizdais su turiniu, kurį galima įterpti iš išorės, o visa tai naudojant sintaksę, labai artimą šiuolaikiniams JS karkaso komponentams.
Yra du pagrindiniai komponentų tipai: klasės pagrindu (įsikūręs app/View/Components, sugeneruota su php artisan make:component) ir Anoniminiskurie matomi tik resources/views/components be susijusios klasės. Abiem atvejais jie pateikiami rodiniuose su tipo etiketėmis <x-alert /> o <x-forms.input />.
Klasėmis pagrįsti komponentai gauna duomenis per HTML atributai (su kebab-case akyse ir camelCase konstruktoriuje), komponentų rodinyje yra rodomi kaip viešosios savybės ir gali pasirinkti metodą shouldRender() sąlyginai nuspręsti, ar juos rodyti.
Lankstaus turinio komponentams būdinga lizdaiPagrindinis turinys pasiekiamas kaip $slot komponento šablone ir lizdai su pavadinimu yra apibrėžti naudojant <x-slot name="titulo">...</x-slot> Naudojant komponentą. Iš vidaus galite iškviesti komponentų metodus per $component ir netgi patikrinti, ar lizdas tuščias $slot->isEmpty() arba jei jame yra tikro turinio $slot->hasActualContent().
Komponentai taip pat elegantiškai valdo papildomų atributų kurios neatitinka konstruktoriaus savybių (pvz. class, id, data-*Visa tai sugrupuota į lengvai prieinamą „atributų krepšelį“ su $attributeskurį galite pateikti tokį, koks yra, arba manipuliuoti tokiais metodais kaip merge(), class(), prepend(), filter(), whereStartsWith(), has() o get().
Be to, „Blade“ apima specialias direktyvas tipinei HTML formai: @checked , @selected , @disabled , @readonly ir @required , kurios spausdina atitinkamą atributą tik tuo atveju, jei gauta sąlyga yra „true“.
Maketai naudojant komponentus ir klasikinį paveldėjimą
Šiuolaikinėje „Laravel“ kalboje vis dažniau apibrėžiamas programos globalus išdėstymas kaip Ašmenų komponentas (pvz., <x-layout>) užuot naudojęs tik klasikinį paveldėjimą @extendsTokiu būdu maketas gali gauti laiko tarpsnius, atributus ir ypatybes, kaip ir kiti komponentai.
Tipinis modelis apima komponento sukūrimą maketavimas su php artisan make:component LayoutApibrėžkite pagrindinę HTML struktūrą (antraštę, CSS nuorodas, naršymo juostą, poraštę) savo šablone ir naudokite ją. {{ $slot }} pagrindiniam turiniui įterpti. Pasirinktinai, apibrėžiamas pavadintas lizdas. title kad kiekvienas puslapis deklaratyviai nurodytų savo pavadinimą.
Kita vertus, vis dar egzistuoja „klasikinis“ variantas šablono paveldėjimas per @extends, @section y @yieldTai buvo plačiai naudojama prieš komponentų išpopuliarėjimą. Galite ir toliau derinti abu metodus, naudodami komponentais pagrįstus išdėstymus viskam arba laikytis tradicinio paveldėjimo, jei jūsų projektas jau yra taip sukonfigūruotas.
Abiem atvejais tikslas yra tas pats: išvengti HTML skeleto kartojimo kiekviename rodinyje , išlaikyti vieną teisingą išdėstymo principą ir leisti kiekvienam puslapiui sutelkti dėmesį tik į konkretų turinį.
Sesija, autentifikavimas, aplinka ir autorizacija „Blade“ sistemoje
„Blade“ labai gerai integruojasi su likusia sistema, todėl neapsiriboja vien HTML atvaizdavimu: ji taip pat suteikia aukšto lygio direktyvas, skirtas sąveikai su sesija, autentifikavimo sistema, programos aplinka ir autorizacijos taisyklėmis.
Autentifikavimui yra tokios direktyvos kaip „@auth“ ir „@guest“ , kurios rodo savo turinį tik tuo atveju, jei vartotojas yra autentifikuotas arba svečias. Be to, galite nurodyti konkretų apsaugą kaip argumentą, kad patikslintumėte naudojamą autentifikavimo kontekstą.
The aplinkosaugos direktyvos kaip @production o @env('local') Jie leidžia sąlygoti rodinio dalis atsižvelgiant į dabartinę „Laravel“ aplinką. Labai naudinga, pavyzdžiui, norint rodyti reklamines juostas, derinimo pėdsakus ar scenarijus tik vietinėje arba testavimo aplinkoje.
Kalbant apie sesijas, @session direktyva leidžia lengvai patikrinti, ar sesijos raktas egzistuoja, ir, jei taip, pateikti jo reikšmę per kintamąjį $value . Tai elegantiškai išsprendžia klasikinį momentinių pranešimų ar įspėjimų atvejį.
„Blade“ teikia politikos ir vartų tipo autorizaciją @gali, @negalima y @cananySu jais galite rodyti arba slėpti mygtukus, nuorodas ar ištisus blokus, priklausomai nuo to, ar vartotojas turi leidimą atlikti konkretų veiksmą su modeliu ar klase. Kartu su @guest o @authJie leidžia sukurti daug saugesnes ir aiškesnes sąsajas.
Formos, patvirtinimas ir klaidų tvarkymas rodiniuose
Pereinant nuo statinių rodinių prie formų, išties pastebimas „Blade“ patogumas. „Laravel“ reikalauja, kad visose duomenis modifikuojančiose formose būtų įtrauktas CSRF prieigos raktas , o kad nereikėtų rankiniu būdu rašyti paslėpto lauko, yra direktyva „@csrf“ , kuri generuoja įvestį su atitinkamu prieigos raktu.
HTTP metodai, tokie kaip Įdėti, pataisyti arba ištrinti Jie imituojami per paslėptą lauką _method, ir „Blade“ suteikia jums tai prieinamą @method('PUT') (arba PATCH/DELETE), kad jis būtų automatiškai sugeneruotas formoje.
Parodyti patvirtinimo klaidos Direktyva egzistuoja @klaidakuris yra susietas su konkrečiu lauku. Jame yra kintamasis. $ žinutė su klaidos tekstu. Kadangi tai iš tikrųjų yra kompiliuojamas „if“ sakinys, galite naudoti @else rodyti alternatyvų turinį, kai nėra klaidos.
Objektas $klaidos Jis visada yra rodiniuose ir grupuoja visus dabartinės užklausos patvirtinimo pranešimus. Jis sklandžiai integruojasi su pagalbininku. old(), kuri leidžia „iš naujo užpildyti“ formą vartotojo pateiktomis reikšmėmis po patvirtinimo klaidos, išsaugant įrašus ir aiškiai rodant klaidas.
Derindami šias direktyvas su patvirtinimo taisyklėmis valdikliuose arba formų užklausose, gaunate patikimą serverio pusės patvirtinimo srautą , papildantį kliento pusės patvirtinimą ir daug labiau apsaugantį nuo kenkėjiškų manipuliacijų.
Stekai „Blade“ kalboje: @stack, @push, @prepend ir „hasStack“ koncepcija
Viena iš mažiau aptarinėjamų, bet naudingiausių „Blade“ funkcijų dideliems projektams yra stekai . Stekas iš esmės yra rodinių fragmentų rinkinys, į kurį galite pridėti turinį iš antrinių rodinių, komponentų ar įtraukimų, o tada visa tai kartu atvaizduoti konkrečiame pagrindinio maketo taške.
Direktyva `@stack('name')` nurodo, kur bus perkelti visi su tuo steku susiję fragmentai. Priešingai, iš bet kurio kito rodinio galite naudoti `@push('name')` , kad turinys būtų perkeltas į steko galą, arba `@prepend('name') `, kad jis būtų perkeltas į pradžią. Tai dažnai naudojama scenarijams ir konkretiems puslapiams būdingiems stiliams.
Įsivaizduokite, pavyzdžiui, kad jūsų makete yra kažkas panašaus į tai <head> ir pabaigoje <body>:
@stack('styles')
...
@stack('scripts')
Tada konkrečiame rodinyje, kuriam reikia papildomo JS , galėtumėte atlikti šiuos veiksmus:
@push('scripts')
<script src="/js/pagina-especifica.js"></script>
@endpush
Tai leidžia maketui nereikėti žinoti kiekvieno scenarijaus ar stiliaus kiekviename puslapyje ; jis apibrėžia tik stekus, o antriniai rodiniai sudeda tai, ko jiems reikia. Taip pat yra „@pushIf“ , skirta turiniui perkelti pagal loginę sąlygą, nerašant viso „if“ sakinio.
Šiame kontekste daugelis kūrėjų pasigenda tokios direktyvos kaip „@hasStack“ ar panašios , kuri leistų jiems patikrinti, ar tam tikrame steke yra turinio prieš jį atvaizduojant. Nors „Blade“ neįtraukia tokios direktyvos iš karto, idėja aiški: turėti galimybę atlikti tokius veiksmus kaip „jei scenarijų stekas tuščias, nespausdinti papildomų etikečių“ arba „jei metaduomenų steke yra elementų, juos įtraukti į konkretų bloką“.
Šiandien lygiavertį elgesį galima pasiekti papildyti steko direktyvas logika išdėstyme arba su pasirinktiniais pagalbininkais, arba net su mūsų pačių registruotomis direktyvomis per Blade::directive()Tokiu būdu galima imituoti „hasStack“ direktyvą, kuri prieš nuspręsdama, kurį HTML generuoti, pateikia vidinę užklausą steko sistemai.
JSON, „JavaScript“ ir pagalbinės direktyvos „Blade“ kalboje
Daugelyje „Laravel“ rodinių reikia perduoti duomenis iš serverio į „JavaScript“. Paprastai tai reiškia, kad reikia atlikti json_encode() masyvo ar kolekcijos ir palikti jį eilutės scenarijuje, bet tai ne visada saugu ar patogu. „Laravel“ tai palengvina naudodama pagalbininką Js::from(), kuris serializuoja ir teisingai konvertuoja PHP reikšmes į JSON, kad būtų galima įterpti į HTML.
Kai naršyklėje pateikiate sudėtingus duomenis, Js::from() Tai išvengia problemų dėl kabučių ar specialiųjų simbolių ir grąžina išraišką JSON.parse() Saugu įtraukti į atributus arba scenarijus. Sudėtingų išraiškų perdavimas direktyvoje nerekomenduojamas, nes „Blade“ kompiliuodamas naudoja reguliariąsias išraiškas, o tai gali netikėtai sutrikdyti darbą.
Be to, „Blade“ leidžia apibrėžti šablonų komentarus, kurie neperduodami galutiniam HTML (skirtingai nei klasikiniai HTML komentarai), ir @php … @endphp blokus , kuriuose galite vykdyti mažus gryno PHP fragmentus, kai tai absoliučiai būtina. Galite netgi naudoti @use , norėdami importuoti klases į rodinį arba priskirti joms slapyvardžius, o tai patogu dirbant su pagalbininkais ar labai specifiniais komponentais.
Jei pasieksite tašką, kai tam tikriems objektams reikės labai specializuotos aidėjimo funkcijos, galite užsiregistruoti pasirinktiniai aido tvarkyklės su Blade::stringable()kad atkartojant konkretų objektą, Blade iškviestų jūsų grįžtamąjį ryšį, o ne magišką metodą __toString() klasės.
Klaidų rodiniai, fragmentai ir pasirinktinės direktyvos
„Laravel“ leidžia jums pritaikyti klaidų peržiūrostiesiog sukurkite failus resources/views/errors su HTTP kodu kaip pavadinimu (pavyzdžiui, 404.blade.php o 500.blade.phpKiekvieną kartą, kai įvyksta ši klaida, vietoj bendrojo šablono iš sistemos bus naudojamas jūsų šablonas.
Tais atvejais, kai dirbate su tokiais įrankiais kaip „Turbo“ arba „htmx“ ir norite tiesiog grįžti konkretūs vaizdo fragmentaiBlade siūlo direktyvas @fragment … @endfragment kartu su tokiais metodais kaip view('...')->fragment('nombre'), fragmentIf(), fragments() y fragmentsIf()Tokiu būdu galite pakartotinai naudoti tą patį šabloną ir išgauti tik tas dalis, kurių jums reikia, priklausomai nuo konteksto.
Jei direktyvų repertuaro jums nepakanka, visada galite susikurti savo su Blade::direktyva()Įprasta praktika yra juos registruoti naudojant metodą boot() de AppServiceProvider arba per specialų teikėją. „Blade“ kompiliatorius perduos jums direktyvos viduje esančią išraišką kaip eilutę, o jūs grąžinsite PHP kodą, kurį norite sugeneruoti kompiliavimo metu.
Paprastoms, pritaikytoms sąlygoms taip pat yra Blade::if()kuri sukuria sąlygines direktyvas vienoje eilutėje. Pavyzdžiui, galite apibrėžti @disk('s3') , kad patikrintumėte, ar numatytasis programos diskas yra S3, ir tada jį naudotumėte bet kuriame rodinyje taip, lyg tai būtų vietinė direktyva.
Naudodami šį arsenalą galite sukurti šablonų kalbą, praktiškai pritaikytą jūsų poreikiams , įskaitant „hasStack“ tipo direktyvą, jei norite, kuri veikia kaip sintaksinis cukrus logikai, kuri prieš spausdindama tikrina, ar steke yra turinio, ar ne.
Išsamus „Blade“ įvaldymas – nuo pagrindinės sintaksės iki pažangių komponentų, autorizacijos direktyvų, patvirtinimo, aplinkų ir, svarbiausia, steko valdymo – leidžia kurti modulinius, saugius, nuoseklius ir lengvai prižiūrimus rodinius , kur būsima direktyva, pvz., „hasStack“, natūraliai tiktų, kad dar labiau sustiprintų kontrolę, kas įšvirkščiama į kiekvieną jūsų maketo sritį.