Išoriniai požiūriai ir stiliai Sinatroje

Nors galima sukurti svetainę su Sinatra Viename faile tai tikrai bloga idėja, nes problema yra ta, kad kuo sudėtingesnė mūsų svetainė, tuo sunkiau bus naršyti tame faile, todėl, kai įvyks klaida, bus sunkiau ją ištaisyti .
Tokios sistemos naudojimo idėja Sinatra kad galėtume supaprastinti savo darbą, tuo pačiu pasinaudodami visomis pakuotėje mums siūlomomis priemonėmis, taip pat įtraukdami mūsų darbo būdą, todėl labai tikėtina, kad viskam naudoti ne vieną failą mūsų filosofijoje.
Štai kodėl galime pradėti dirbti su išoriniais vaizdais ir stiliais, kad kiekvienas mums reikalingas vaizdas būtų atskirame faile, kuriame, pirma, galėtume lengviau aptikti klaidas ir, antra, organizuoti daug praktiškesnę mūsų projekto struktūrą. .
1- Pirmiausia turime turėti kalbą Rubinas atsisiųsti, įdiegti ir sukonfigūruoti mūsų kūrimo aplinkoje.
2- Prieiga prie interneto, kad būtų galima atsisiųsti kai kuriuos išteklius, kuriuos nurodysime pavyzdžiuose.
3- Pakankami leidimai rašyti naujus failus ir kurti aplankus, be to, galima vykdyti failus naudojant Rubinas.
4- Teksto redaktorius, kad būtų galima parašyti kodą, kurį naudosime failams, jis gali būti Aukščiausias tekstas arba „NotePad ++“, bet tai, kas mums žinoma, atitinka mūsų tikslą.
The HTML Pagrindiniame projekto faile nerekomenduojama, nebent mūsų svetainė yra nejudanti ar laikina ir mes turime nedelsdami su kažkuo eiti į rinką, nes, kaip jau minėjome, ši praktika daro mūsų kodą neįskaitomą ir jo negalima išlaikyti laiku.
Norėdami įveikti šią iškilusią problemą, Sinatra suteikia mums galimybę sukurti išorinius vaizdus, ​​kurie yra ne kas kita, kaip failai .erb kur mes patalpinsime HTML atitinka mūsų požiūrį, kur Sinatra Maršrutuodamas sukurtą rodinį, jis iš karto ieškos šių failų ir sugeneruos atsakymą vartotojui. Toliau pateiktame kode pažiūrėkime, kaip sukūrėme išorinį vaizdą, kad mūsų projektas rodytų naudotojui tam tikrą informaciją.
Pirmiausia mes sukursime failą pavadinimu pagrindinis.rb ir ten mes sukuriame savo bazinę struktūrą, kaip matysime žemiau:

 reikalauti 'sinatra' get '/' do erb: start end get get '/ on' do erb: end get '/ contact' do erb: contact end

Kol kas tai nėra nieko naujo, jei jau matėme pirmųjų žingsnių su Sinatra vadovėlį, čia mes importuojame biblioteką su reikalauti ir galiausiai mes apibrėžiame maršrutus, kuriais rodiniai grįš, naudodami šį metodą GET HTTP.
Dabar mes sukursime failą pavadinimu išdėstymas.erb ir mes ketiname įdėti jį į naują aplanką pavadinimu Peržiūrėjo kuris turi būti tame pačiame kataloge, kuriame sukūrėme savo failą pagrindinis.rb, pažiūrėkime kodą, kurį turės mūsų failas išdėstymas.erb:

Pradėti
Apie mane
kontaktas

Dabar tame pačiame aplanke Peržiūrėjo ką tik sukurtą, mes sukursime naują failą, kad galėtume išbandyti savo pavyzdį, šiuo atveju mes jį pavadinsime šiuo failu namo.erb ir turi šį pavadinimą, nes vienas iš mūsų maršrutų apibrėžtas pagrindinis.rb turi šį pavadinimą, norėdami užbaigti šį failą, įdėsime šį kodą:

Sveiki atvykę į mano svetainę, čia matome, kaip veikia mūsų pirmasis išorinis vaizdas „Sinatra“

Jei atidžiai pažvelgsime, suprasime, kad tai ne kas kita HTML. Kai tai bus baigta, dabar mes tiesiog einame į komandų konsolę ir paleidžiame naują programą, tam turime atlikti tik šiuos veiksmus:

 rubino pagrindinis.rb

Ši komanda pakelia integruotą kūrimo žiniatinklio serverį WEBrick kaip matome šiame paveikslėlyje:

Kai šis veiksmas bus atliktas, galime pereiti į savo puslapį su išoriniu vaizdu, todėl eisime adresu vietinis šeimininkas: 4567, kuris suteikia mums tokį rezultatą, kokį matome šiame paveikslėlyje:

DIDELIS

Kadangi sukūrėme pirmąjį išorinį vaizdą, vis dar turime ką paaiškinti, ir tai yra projekto struktūra, nes pagal numatytuosius nustatymus Sinatra tikėtis struktūros, kurią laikydamiesi neturėtume daryti nieko kito, tačiau jei tai mums nepatinka, galime ją pakeisti.
Pagrindo struktūraPagrindinė struktūra yra pagrindinis failas, kuriame yra sistema ir kuriami maršrutai, tada mes turime du papildomus aplankus, vieną Peržiūrėjo kurį mes naudojame savo failams saugoti .erb kurie atitinka rodinius ir aplanką viešas kur mes laikysime skirtingus statinius failus, tokius kaip .css arba .js.
Jei matome šį vaizdą, galime įvertinti bazinę struktūrą, kurią sukūrėme taikydami ankstesnį pavyzdį:

Čia matome, kad pagrindinis mūsų projekto aplankas vadinamas sinatra, tada mes turime savo failą pagrindinis.rbir pagaliau turime du aplankus, kuriuos minėjome, su aplanku Peržiūrėjo rodomi du failai, kuriuos sukūrėme ankstesniame pavyzdyje.
O kas, jei nenorime naudoti numatytųjų pavadinimų Sinatra nes dėl tam tikrų priežasčių mūsų programa turi turėti kitus aplankus, kaip mes tiesiog nurodome failą pagrindinis.rb taip:
rinkinys: public_folder, 'staticSu šia instrukcija mes sakome Sinatra kad dabar užuot ieškoję aplanko viešas, turėtumėte ieškoti aplanko pavadinimu „Static“.
rinkinys: rodiniai, šablonaiSu šia instrukcija mes sakome Sinatrai, kad užuot ieškoję Peržiūrėjo ieškoti šablonų.
Tai jau perrašėme, kaip sistema tvarko tuos failus, suteikdama mums daugiau laisvės mūsų projektui.
Dabar, kai suprantame, kaip veikia mūsų programos struktūra, ketiname įtraukti stilius, todėl galime taikyti kelis metodus, tačiau labiausiai rekomenduojama sukurti bendrą failą, kuris tinka visiems rodiniams. Nors galime taikyti savo kūrimo metodą CSS rankiniu būdu, šiame pavyzdyje paaiškinsime, kaip pridėti „Bootstrap“ ir taip turėti tvirtesnį pradinį tašką.
Pirmiausia turime atsisiųsti sistemą Bootstrap ir išsaugokite gautą aplanką mūsų kataloge viešas arba statinis tuo atveju, jei mes vadovavomės pavadinimo keitimo instrukcijomis aplanko struktūros paaiškinime. Tada mūsų faile išdėstymas Mes šiek tiek pakeisime etiketės turinį, kad galėtume įtraukti veiklai reikalingas bibliotekas Bootstrap, pažiūrėkime, kokie pakeitimai taikomi:

Įtraukę biblioteką Bootstrap ketiname keisti savo HTML Norėdami suteikti jai struktūrą, labiau atitinkančią sistemą, tai galime tiesiogiai pastebėti mūsų svetainės stilių pasikeitimą:

Pradėti
Apie mane
kontaktas

Jei pažvelgsime, kai kuriuos dalykus pakeitėme, visų pirma etiketėje, į kurią įtraukėme bibliotekas Bootstrap, tada sukūrėme stilių, kuris taikomas tik viduje išdėstymas.erb elementams, kurie turi ID stilius, šio pavyzdžio atveju mes jį taikome elementui ir galiausiai naudojame komponentus Bootstrap pridedame klasę nav navigacijos skirtukai kad mūsų meniu būtų rodomas skirtukų pavidalu.
Iš naujo paleidžiame serverį iš WEBrick ir mes įvedame nurodytą kelią, kuriuo veikia mūsų programa, kuri turėtų atrodyti taip su pritaikytais pakeitimais:

Kaip matome, savo žiniatinklio programoje, sukurtoje naudojant, veiksmingai pritaikėme stilių SinatraŽinoma, dar reikia daug nuveikti, kad ši programa labiau atitiktų gamybos aplinką, tačiau naudojant šią bazę yra daug lengviau eksperimentuoti ir pridėti funkcijų, kurios mums suteiks daug daugiau galimybių.
Taigi baigiame šią pamoką, su kuria išmokome organizuoti savo projektą naudodamiesi išoriniais vaizdais, apibrėžiančiais aplankų struktūrą ir padarę mūsų programą daug patrauklesnę įtraukdami stilių, bet ne tik paprastą CSS, bet ir įtraukėme sistemą Bootstrap kuris padeda mums sukurti daug patrauklesnes vartotojo sąsajas be daug galvos skausmo.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką