Share
Acest al doilea tutorial despre construirea de site-uri statice cu Middleman scufundă un pic mai adânc în cadru. Până la urmă, trebuie să știți suficient pentru a vă construi propriul proiect de la zero. Vom aborda subiecte cum ar fi fișierele de date, adresele URL destul de bune, șabloanele de proiect și conductele de materiale, așa că hai să rămânem blocați!
Deci, după ce ați urmat deja primul tutorial, veți fi învățat deja cum să jucați cu date; chestiunea frontală stocată în secțiunile delimitate în triple-cratime ale paginilor individuale. De asemenea, puteți scrie fișiere de date separate în YAML sau JSON și le puteți plasa într-un director "/ data". Acest lucru este util dacă aveți site-uri mai complexe cu date care se schimbă rar și unde nu doriți să mențineți aceste date direct în codul HTML.
Să presupunem că aveți dreptul să vindeți toate filmele lui James Bond. Am putea pune o listă a acestora într-un fișier de date și să le repetăm în viziunea noastră. Dacă ar trebui să modificăm sau să actualizăm aceste date atunci când este disponibil un film nou, este suficient să aplicați acea modificare în versiunea dvs. .YAML sau .JSON fișier de date. Nu aș recomanda face pentru date care sunt în orice fel complexe; este posibil, dar se simte foarte confortabil și greșit.
De exemplu, iată ce ar putea fi un fișier /data/bond.yaml:
rubin: - titlu: "Dr. No" anul: "1962" text: "John Strangways, șeful postului britanic de informații (SIS) din Jamaica, este ucis. trimis în Jamaica pentru a investiga circumstanțele În timpul anchetei sale, Bond întâlnește pe Quarrel, un pescar din Cayman, care lucra cu Strangways în jurul insulelor din apropiere pentru a colecta mostre de minereu Unul dintre insule a fost Crab Key, acasă la Dr. " image: "bond_movie_01.png" - titlul: "Din Rusia cu dragoste" an: "1963" text: "Planificatorul expert Kronsteen realizează un complot pentru a fura un dispozitiv criptografic Lektor de la sovietici și a le vinde înapoi, Bond pentru uciderea agentului lor Dr. No, fostul agent SMERSH, Rosa Klebb, se ocupă de misiune, recrutează-l pe Donald "Red" Grant ca asasin și Tatiana Romanova, funcționar la consulatul sovietic din Istanbul, .“ image: "bondfmovie_02.png" - titlu: "Goldfinger" anul: "1964" text: "Bondul este obligat să observe dealerul de aur Auric Goldfinger: îl vede pe Goldfinger înșelând cărțile și îl oprește distragându-l pe angajatul său, Aparatul lui Bond este apoi instruit să investigheze contrabanda cu aurul Goldfinger și îl urmărește pe el în Elveția. Bond este capturat în momentul în care recunoaște planta lui Goldfinger și este drogat, este dus la ferma lui Goldfinger din Kentucky și este întemnițat. martorul întâlnirii lui Goldfinger cu mafiotele americane, care au adus materialele de care are nevoie pentru o operațiune de a jefui Fort Knox ". imagine: "bond_movie_03.png" ...
Apoi, ieșire ca în sursă / bond-movies.html.erb:
„html
<%= movie.text %>
"
Unul dintre avantajele acestor fișiere de date este că sunt sigure. Chiar mai bine, dvs. /date directorul cu toate datele YAML sau JSON nu va fi împins la serverul dvs. live. În timpul fazei de construire, datele dvs. sunt injectate în șabloanele dvs. local înainte de a fi implementate. După aceea, datele din vizualizările dvs. sunt doar simple HTML statice. Destul de la moda!
Un cuvânt despre convențiile de numire aici. Când aveți fișiere de date dintr-un director "date" primiți acces la un date obiect. Middleman creează apoi "obiecte" pentru fiecare .YML, .YAML sau .JSON fișier pe care îl puteți accesa prin intermediul rețelei date obiect prin legarea acestuia. Apoi, aveți acces la atributele pe care le-ați stocat. În cazul nostru, avem a filme YAML "obiect" cu atributele titlu, an, text și imagine.
„html <%= data.data_file_name.yaml_or_json_object.attribute %>
<%= data.bond.movies.image %> <%= data.bond.movies.title %> <%= data.bond.movies.year %> <%= data.bond.movies.text %>"
Dacă aveți subdirectoare, trebuie doar să le atașați. Să presupunem că aveți fișierul de date de filme de obligațiuni sub a spy_movies (de exemplu: /data/spy_movies/bond.yaml) Ați accesat-o astfel:
html <%= data.spy_movies.bond.movies.title %>
În cele din urmă, ar trebui să adaug că stocarea în JSON ar putea fi preferabilă pentru unii oameni, dar toate virgulele în exces, paranteze și brațele mă fac să fiu cinstit. Nu numai în fișierele de date, dar și în secțiunile frontmatter. Depinde de tine ceea ce ti se potriveste cel mai bine, vezi-te:
some_file.yaml:
simple bond_girls: - câmpuri de căpșuni - Jill Masterson - caz Tiffany
some_file.json:
javascript "bond_girls": ["Strawberry Fields", "Jill Masterson", "Tiffany Case"]]
Dacă aveți un fișier ca source / bond-movies.html.erb, acesta va sfârși ca http://appname.com/bond-movies.html. În timpul procesului de construire, pierdem extensia ".erb" și ajungem la ultima versiune ".html" a acelei pagini care este oglindită în URL. E în regulă, lucruri normale. Pentru URL-urile fanionului, cum ar fi http://appname.com/bond-movies, trebuie să lucrăm puțin.
Trebuie să activați Indexul directorilor extensie în config.rb. Aceasta creează un dosar pentru fiecare fișier .html. Pe parcursul constructorul intermediar pagina finită se termină ca fișier index al acelui dosar - ceea ce înseamnă că, ca fișier index, extinderea acestuia nu va trebui să apară în adresa URL. Dacă ați acordat atenție, este posibil să fiți văzut deja acest lucru la locul de muncă cu fișierul index.html standard care este creat pentru fiecare proiect Middleman ca pagină de destinație. Porniți serverul și vedeți-vă singur.
În config.rb:
ruby activ: director_indexes
Să vedem ce sa întâmplat după constructorul intermediar la fișierul bond-movies.html.erb dacă ați activat extensia respectivă. Middleman va crea un folder "build / bond-movies", iar numele original va fi schimbat în index.html (build / bond-movies / index.html).
Iată outputul Shell:
bash creați build / bond-movies / index.html
Există însă o mică avertizare. Înainte de a activa destul de multe adrese URL, te poți baza pe utilizarea căii de valori. Acum, cu indici de directoare în loc trebuie să furnizați active cu calea lor completă, absolută. Deci, apelarea unei imagini doar după numele ei, de exemplu, nu va mai zbura.
Dacă, din anumite motive, doriți să înlocuiți comportamentul extensiei respective pentru un anumit fișier, puteți.
În config.rb:
pagina ruby "/bond-movies.html",: directory_index => false
Iată outputul Shell dacă îl schimbați înapoi pentru bond-movies.html.erb:
bash creați build / bond-movies.html eliminați build / bond-movies / index.html eliminați build / bond-movies
Acum URL-ul său este din nou la normal pentru acel fișier din nou. (Http://appname.com/bond-movies.html)
În plus, puteți renunța la schema de indexare a indexului directorului local în fața frontală a paginilor dvs. individuale:
director_index: false -
... "
Dacă vrei să construiești acea structură cu dosarele și cu fișierele index index, Middleman nu te va mizeria. Funcționează în același fel și agentul intermediar le ignoră dacă amestecați și potriviți această abordare.
Aș vrea să vă dau drumul la urmărire și să vă arăt doar piesele pe care le consider relevante.
"Activitatea" este Rails lingo importată în Middleman. Sub capota, o bijuterie numită Sprockets face toată ridicarea greoaie. Vă ajută să gestionați gestionarea dependenței, combinând și minimizând activele, ceea ce vă ajută să reduceți semnificativ activele. Sunt disponibile, de asemenea, câteva metode de ajutor pentru a face referire la activele concise. Dincolo de asta, aveți la dispoziție și mijloacele de a scrie codul Sass și CoffeeScript, chiar din cutie.
Concatenarea este una dintre cele mai importante caracteristici ale portofoliului de active. În loc să aveți o mulțime de cereri HTML separate pentru fiecare fișier CSS și JS, le puteți reduce drastic prin concatenarea acestora într-una sau o mână de fișiere. Cele mai putine solicitari pe care le cauti cu cat mai repede se va incarca aplicatia.
În mod implicit, Sprocket-urile vor apăsa toate fișierele JavaScript într-un singur fișier .js fişier. După constructorul intermediar, acest fișier va fi găsit sub /build/javascripts/all.js. Același lucru este valabil pentru CSS. După procesul de construire, veți avea toate fișierele Sass concatenate împreună în build / stylesheets / all.css.
Combinați activele dvs. JavaScript utilizând paralele (ale căror nume de fișiere încep cu o subliniere) și apoi necesita acestea sunt chiar în partea de sus a fișierului sursă / javascripts / all.js. Fișierele cu extensie .coffee adăugată funcționează exact la fel. Ordinul are importanță pentru acest proces.
Aici, de exemplu, este partea de sus a sursei / javascript / all.js:
javascript // = necesită "_jquery" // = necesită "_lib_code" // = necesită "_animations"
Când te uiți în noul tău /construi directorul, veți găsi numai un fișier .js sub / javascripts.
Pentru codul tău Sass, povestea este la fel de importantă, dar ar trebui să folosești Sass @import pentru importul partialelor dvs., în loc de necesita de la sprockets. Din nou, plasați fișierele "necesare" chiar în partea de sus, de această dată acordând atenție ordinii. Spre deosebire de necesitatea paralelismelor JavaScript, lăsați sublinierea atunci când importați partiții Sass. De exemplu
css @import 'normalize'; @import "header"; @import "navigare"; @import "subsol";
O altă trăsătură rece a pinioanelor este compresia, numită și minificare. Acest proces elimină o mulțime de grăsimi, cum ar fi eliminarea spațiului alb și a comentariilor inutile. Oamenii numesc, de asemenea, acest proces uglificator (și, desigur, există un bijuterie numit uglifier care face o treabă frumoasă a acestui lucru). Comparativ cu minificarea activelor JavaScript, uglificarea CSS nu este atât de complicată.
Pentru a începe, va trebui să adăugați următoarele în fișierul dvs. config.rb:
ruby configure: build activate: minify_css activ: minify_javascript end
De fapt, trebuie doar să dezintegrați aceste linii sub dumneavoastră :construi bloc. Data viitoare când îl utilizați constructorul intermediar activele din folderul dvs. / build vor fi ugioase și subțiri. Mai jos sunt două exemple mici despre modul în care se termină de fapt acest cod:
CSS miniaturat în /build/stylesheets/all.css:
css corp background-color: # d0e4fe h1 culoare: portocaliu; text-align: center p font-family: "Times New Roman"
JS Miniaturat în /build/javascripts/all.js:
javascript switch ((dată nouă) .getDay ()) caz 0: zi = "duminică"; pauză; cazul 1: zi = "luni"; = "Miercuri"; pauză; cazul 4: zi = "joi"; pauză; cazul 5: zi = "vineri"; pauză; cazul 6: zi = "sâmbătă"
Fără activul pipleline va trebui să vă configurați propriul lucru pentru a vă scrie JavaScript și CSS prin intermediul unor limbi de nivel superior precum CoffeeScript și Sass.
Pentru fișierele Sass aveți la dispoziție patru asistenți:
Accentsconagua
IMAGE_PATH ()font_path ()Imagine URL()font_url ()Pe măsură ce ați urmat convențiile până acum, puteți utiliza acești ajutoare pentru a prefixa calea corectă a directorilor către activele dvs..
Într-un fișier Sass, de exemplu:
"css image_path ('logo.png') # => images / logo.png
image_path ('nested_folder / some.png') # => imagini / nested_folder / some.png "
Conducta de materiale utilizează căi de import prin intermediul pinioanelor pentru activele dvs. În mod implicit : js_dir și : css_dir sunt deja adăugate la această cale. Asta înseamnă că fișierele sunt introduse / sursa / javascripts și / sursa / stylesheets sunt disponibile și importate automat. Pe de altă parte, dacă aveți active pe care doriți să le păstrați în alte directoare, le puteți adăuga și pe calea de import prin editarea config.rb:
ruby sprockets.append_path '/ unele / altele / assets_folder /'
În acest exemplu, alte active în sursa / unele / altele / assets_folder / other.css sunt de asemenea la dispoziția Middleman prin această cale. Același lucru este valabil .js și fișierele.
Middleman vine cu câteva șabloane de proiect la îndemână pe care ar trebui să le știi cel puțin. Aceste șabloane vă oferă un bun punct de plecare când inițiați o nouă aplicație Middleman. De asemenea, puteți adăuga aceste șabloane oricând mai târziu:
Puteți să le folosiți astfel, prin linia de comandă:
bash intermediar init your_fancy_app --template = smacss Șablonul vă va oferi toate fișierele și folderele de care are nevoie. Dacă aveți deja o aplicație și doriți să adăugați un șablon, utilizați aceeași comandă fără a menționa numele aplicației dvs. Aceeași afacere:
bash intermediar init --template = smacss
Acum vine partea mea favorită a lui Middleman. Este foarte simplu să vă construiți propriile șabloane și să le reutilizați ori de câte ori doriți. Începeți prin a crea un ~ / .Middleman în directorul rădăcină (nu uitați punctul aflat în fața numelui). În acest director creați dosare noi pentru șabloanele dvs. De exemplu /.middleman/podcast ar fi a podcast șablon. Apoi, completați această dictatură de podcast cu toate fișierele și folderele de care aveți nevoie. De exemplu, dacă doriți să aveți mai multe foi de stil disponibile pentru aplicația dvs. Middleman, atunci trebuie să simulați calea de fișiere a lui Middleman pentru a fi foarte ușor de utilizat.
În captura de ecran de mai jos am pregătit un exemplu fals, care are câteva fișiere de care am putea avea nevoie pentru fiecare proiect plasat într-un dosar "bourbon". Acum am un șablon de bourbon.
De când am simulat structura de fișiere a Middleman, aceste foi de stil vor apărea exact acolo unde am nevoie de ele după ce am inițiat șablonul. Fișierele mele sunt acum sub / sursa / stylesheets și, de asemenea, gata să fie importate în mine /source/stylesheets/all.css.scss fişier.
Din moment ce am făcut deja șabloanele mele șabloane, este vorba de afaceri ca de obicei. Iată sursa mea / stylesheets / all.css.scss:
css @import 'bourbon_mixins / mixins'; @import 'bourbon_neat / grids'; @import 'bourbon_refills / cards'; ...
Terminat! Un lucru pe care ar trebui să fiți atent cu totuși: când îl folosim constructorul intermediar pentru a crea noile noastre construi directorul acestor fișiere va fi absorbit de all.css și niciunul din dosarele șablonului bourbon nu va apărea acolo. Cu toate acestea, dacă uitați să aveți un sublinieră de vârf în numele fișierelor pentru aceste stiluri, dosarul complet va fi transferat în /construi, împreună cu fișierele respective .css. @import declarațiile din toate.css.scss nu vor face nici o diferență în acest caz.
Dacă aveți o tona de șabloane și doriți doar să verificați lista pentru un nume, puteți utiliza următoarea comandă:
"bash intermediar init -help
"
În cazul în care doriți să reinventați roata, aruncați o privire asupra acestor șabloane deschise. Dacă nu ați jucat prea mult cu șabloanele, vă recomand să inițiați o aplicație falsă și să le luați pentru o rotire. Vedeți ce fișiere sunt create sau suprascrise. Încearcă puțin. Apoi, construiți un dosar manechin cu câteva fișiere Sass pentru un șablon de sub ~ / .Middleman și vedeți ce se întâmplă când inițiați șablonul respectiv. Nimic nu se învață prin a face aceste mici experimente de-a lungul drumului!
Cred că acum sunteți mai mult decât pregătit să începeți să construiți o mică aplicație cu Middleman. Sunt câteva lucruri pe care trebuie să le învățați singuri, dar v-am prezentat cele mai importante piese ale puzzle-ului.
Middleman este o mulțime de distracție și o alegere bună din punct de vedere tehnologic. Este puternic, ușor de utilizat și are un API simplu care este ușor de început; asta e tot ce contează acum. A se distra!
