Share
Aceasta este o parte dintr-o mică serie despre Middleman, "un generator de site-uri statice care utilizează toate comenzile rapide și instrumente în dezvoltarea web modernă". Primele două tutoriale vor acoperi elementele de bază, după care vom pune ceea ce am învățat în acțiune cu un proiect practic. Middleman necesită folosirea lui Ruby, dar nu ezitați să citiți dacă acesta este străin pentru dvs.; această serie este complet nouă.
Care e totul în ultima vreme cu site-uri statice? Ei bine, sunt rapizi, destul de ușor de configurat și ușor. Pe măsură ce nu oferiți nimic în legătură cu bazele de date, site-urile statice sunt destul de fiabile și rapide. HTML, CSS și, dacă este necesar, JS-asta e tot.
Mulți oameni utilizează site-uri web statice pentru a-și configura blogurile și paginile personale. Paginile de destinație care sunt puternic afectate de trafic sunt, de asemenea, un bun candidat. HealthCare.gov de la administrația Obama a folosit cu exactitate Jekyll, un alt generator de site-uri statice, pentru site-ul lor. Dacă aveți nevoie de ceva rapid și ușor, care este capabil să scadă din cutie, site-urile statice pot fi uimitoare. Mai ales ca le puteti gazdui gratuit pe paginile GitHub sau pe Heroku.
Probabil, întreaga hipness al site-ului static a început câțiva ani în urmă când a venit Jekyll. Desigur, site-urile statice sunt la fel de vechi ca și primul "Hello World!" De la Sir Tim Berners-Lee, dar în ultimii 15 ani, aplicațiile bazate pe baze de date au devenit "tot ce are importanță". Cu câțiva ani în urmă, unul dintre co-fondatorii lui GitHub avea nevoie de o modalitate mai bună de a scrie bloguri și a venit cu Jekyll - acest generator de site-uri statice pentru blogging-ul "Blogging like a hacker". Am folosit-o de câteva ori și am doar lucruri bune de raportat. Echipa de bază este de asemenea minunată. Oricum, pentru această serie, editorul meu și eu am fost de acord că ar fi mai interesant să-l acoperi pe Middleman. Ar putea fi corect să spunem că Middleman este un pic mai puțin "blog-aware" din cutie, dar cu toate acestea la fel de puternic și de mare calitate-înțelept.
Middleman folosește Ruby, oferind un set destul de extins de caracteristici pentru a construi lucruri reci. Dacă ați folosit vreodată Rails sau Sinatra, vă veți simți ca acasă. Se pare că Middleman și Jekyll sunt opțiunile go-to pentru site-urile statice din comunitatea Ruby. Am auzit, de asemenea, tot mai mulți designeri susțin că le place să le folosească pentru prototipuri și pentru a-și crea propriile pagini personale. Multe dintre aceste cadre statice ale site-ului au în comun că sunt destul de ușor de utilizat.
În acest articol, presupun că sunteți cel puțin a pic interesat de Ruby, și îl ai instalat pe sistemul tău. Dacă aveți nevoie de ajutor, aruncați o privire la Ruby for Newbies: Instalarea Ruby și Noțiuni de bază de Andrew Burgess.
Știind cum să te descurci cu RubyGems este necesar și, din nou, Ruby's Ruby for Newbies: Lucrul cu Gems vă va ajuta să începeți dacă este necesar. Voi face tot ce pot pentru a nu trece peste capul dvs. cu concepte de programare, dar nu voi acoperi elementele de bază ale programării, cum ar fi buclele, blocurile de coduri și altele asemenea. Pentru începătorii dintre dvs., nu vă faceți griji, Middleman nu are atât de multe părți în mișcare și voi demonstra cât de ușor este să învățați.
Deci ai Ruby și RubyGems sub centură? Multă, atunci e bine să plecăm.
Deschideți terminalul și introduceți:
bash gem instala un intermediar
Dacă vi se refuză permisiunea de a face acest lucru, va trebui să premedicați comanda cu sudo și introduceți parola de administrator de sistem. După terminarea acestui proces, veți putea folosi câteva comenzi intermediare la îndemână prin intermediul liniei de comandă.
Această comandă inițiază un nou proiect. Va trebui să îi furnizați numele aplicației dvs., apoi apăsați pe Enter.
bash intermediar init your_fancy_app De asemenea, este nevoie de argumente suplimentare cum ar fi ce șablon doriți să începeți. Acest lucru face foarte util pentru a vă personaliza aplicațiile cu șabloane chiar de la început, reducând destul de mult sarcinile de configurare repetitive! Vom discuta mai multe despre șabloane într-un tutorial ulterior.
bash intermediar init your_fancy_blog --template = blog
bash intermediar init your_fancy_mobile_app --template = mobil
Middleman vine cu un server local pentru dezvoltarea ta. Pornirea acestuia vă permite să vedeți site-ul dvs. la http: // localhost: 4567 / **. Dacă introduceți ** intermediar fără nici un argument suplimentar, acest lucru va împiedica, de asemenea, serverul dvs. sus. Închideți serverul cu CTRL-C.
Odată ce aveți ceva pe care sunteți gata să-l puneți pe un server cu care vă confruntați cu internet, trebuie să faceți acest lucru construi Site-ul tău. Asta înseamnă că orice ai pregătit în tine /sursă dosarul va fi procesat și ieșirea finală va fi transmisă către /construi dosarul pe care îl creează, de asemenea, pentru dvs. Toate fișierele care utilizează preprocesoare precum Slim, Haml, Sass, CoffeeScript vor fi procesate în omologii lor și vor fi puse în directorul dvs. / build.
Odată ce site-ul dvs. este gata să se confrunte cu internetul, această comandă vă pune în funcțiune /construi folder pe serverul dvs. web. Fiecare actualizare pe care o faceți va trece prin acest proces.
Faceți-vă imediat o favoare și activați LiveReload pentru a vă reîmprospăta automat paginile după modificarea fișierelor HTML, Sass sau JS. Acest lucru este de mare comoditate în timpul dezvoltării - nu veți regreta! Middleman oferă aceste zile LiveReload din cutie - trebuie doar să adăugați
ruby gem "intermediar-livereload"
pentru dumneavoastră Gemfile și să necompletați următoarea linie în config.rb:
rubin # Reîncarcă browserul automat ori de câte ori se schimbă fișierele active: livereload
Apoi tu îmbrățișezi pe Middleman
bash bundle # sau bundle exec middleman
Deci, să începem /sursă și /construi dosare. Între ele este linia de separare care separă secțiunile de dezvoltare și de producție. Când utilizați serverul web local pentru dezvoltare, / sursa devine obișnuită pentru a vă difuza aplicația. Folderul / build este folosit de serverele dvs. non-locale pentru a vă servi paginile statice. / build este creat de fiecare dată când utilizați constructorul intermediar în linia de comandă. Prin urmare, ar trebui să aveți grijă să nu vă petreceți accidental codarea de timp în / build, deoarece această lucrare va dispărea după procesul de construire. În general, toate dezvoltările se presupune că se produc în / sursă.
Procesul de construire creează site-urile statice pe care doriți să le găzduiască serverul dvs. Fiecare fișier din /sursă dosarul va fi procesat și apoi stocat în /construi. Așa cum am menționat mai sus, Sass, CoffeeScript, Slim / Haml și partiali vor procesa în omologii lor deprimați. Toate planșele vor fi alcătuite împreună. Dacă ați activat compresia pentru aceste fișiere, acesta este momentul în care acestea sunt "uglificate". În timpul întregului shabang, directorul / build se reînvine prin eliminarea fișierelor care nu mai au nici o referință în / sursă. Pe parcursul constructorul intermediar, orice modificări pe care le-ați făcut la fișierele din / sursă va declanșa o regenerare a fișierelor statice corespunzătoare pentru / build.
Procesul de implementare este ultimul pas. Cu /construi director în locul dvs. aveți tot ce aveți nevoie pentru a pune aplicația dvs. acolo. Recomandarea mea este să facem acest lucru devreme pentru a evita să fugi în orice surpriză.
Să verificăm structura de bază a unei aplicații Middleman. Componentele principale sunt:
După cum puteți vedea mai jos, cel mai Jazz intră în /sursă pliant. Ceea ce îmi place despre aplicațiile Middleman este organizarea lor simplă. Navigarea în structura documentului este directă, chiar și pentru începători.
Dacă nu sunteți mulțumit de denumirea anumitor foldere, puteți modifica configurația dvs. (config.rb). Aceleași nume vor fi utilizate pentru terminarea dvs. /construi pliant.
"set ruby: css_dir, 'custom_folder_name'
set: js_dir, 'custom_folder_name'
set: images_dir, 'custom_folder_name'
După ce porniți serverul, puteți să verificați alte opțiuni pentru a configura Middleman în browserul dvs.: http: // localhost: 4567 / __ middleman / config /. Nu toate ar putea avea sens, sau chiar sunt importante de știut în acest stadiu. Dați-i o privire și un marcaj mental este absolut suficient pentru acum.
Unul pe care îl conduci constructorul intermediar puteți vedea în /construi pliant. Toate fișierele simple HTML, CSS și JS de care aveți nevoie pentru a vă servi site-ul static.
Asta e tot ce trebuie să știți pentru a începe și pentru a te orienta.
Sugestie: La acest punct ar fi foarte logic să începeți să vă puneți împreună o aplicație de testare. Priviți în jur și obțineți un simț cum sunt organizate lucrurile și cum se potrivesc piesele împreună.
Termenul Front Matter vine de la publicarea de cărți și se referă la informațiile din fața unei cărți. În cazul fișierelor statice ale site-urilor Web, se referă la blocuri de informații stocate în YAML. Fiecare pagină vă permite să aveți variabile care pot fi stocate chiar în partea superioară a unei linii triple și a unei linii triple. De exemplu, aici este partea de sus a unui fișier fictiv numit: some.html.erb.
layout: titlu de obligațiuni: nume preferat fete obligațiuni data: 2015-11-09 tags: bond, 007
some_secret: Nu voi fi redat până nu mă veți folosi.
bond_girls: - câmpuri de căpșuni - Jill Masterson - caz Tiffany
"
Variabilele YAML arată exact ca un hash. Puteți accesa acele date locale prin pagina curenta obiect:
ruby current_page.data.some_variable
Utilizați adesea acest lucru pentru a stoca etichete, date, titluri și opțiuni de configurare - cum ar fi aspectul pe care doriți să îl utilizați pentru anumite pagini. Fața frontului este un magazin YAML pentru variabilele tale. De asemenea, puteți utiliza JSON dacă preferați acest lucru. Gândiți-vă la acesta ca la un loc pentru a pune date care ar putea fi în mod normal într-o bază de date. Voi discuta diferitele opțiuni și utilizări de-a lungul drumului când vor veni.
Aceasta este o bună ocazie pentru a trece pe scurt ERB. ERB vă permite să creați șabloane dinamice care au cod încorporat în ele. Numele de fișiere trebuie să aibă un .ERB extensie și trebuie să introduceți codul în următoarele două "containere".
Pentru codul care este executat, dar nu este "imprimat" pe pagina pe care o folosiți:
html <% %>
Gândiți-vă la aceasta ca la "doar calcul".
În caz contrar, pentru ca valorile returnate pe care doriți să le vedeți să apară "imprimate" pe pagină, trebuie să adăugați și un semn equals. Asta e.
html <%= %>
Conceptele layout-urilor și partialelor sunt strâns legate. Permiteți-mi să vă dau un mic turneu în cazul în care nu ați mai jucat cu Rails, Sinatra sau ceva similar înainte. Cred că ar trebui să încep cu asta aspecte primul.
Aspectul vă oferă structura de distribuire a marcajelor comune între diferite pagini - care aparțin aceleiași "familii" de pagini. Este un instrument pentru a evita duplicarea și pentru a vă grăbi munca. În loc să scrieți același schelet HTML peste tot, compuneți machete pentru anumite cazuri de utilizare. Exemple populare sunt două aspecte diferite pentru un administrator și un utilizator "normal". De obicei, aceștia au o experiență foarte diferită în privința paginii "aceleași".
Când inițiați o aplicație intermediară simplă, veți obține în mod automat o layout.erb fișier în sursa / machete. Luați notă că acest fișier se termină .ERB si nu .html.erb. Amenajările nu ar trebui să fie redate în HTML, iar Middleman va arunca o eroare dacă creați machete cu o extensie .html. Dacă utilizați un alt limbaj de template, cum ar fi Slim sau Haml, layouts ar putea avea extensiile lor în schimb. După cum sugerează implicit, ar trebui să puneți toate machetele în / machete director în sursă.
Iată un exemplu de sursă / layouts / layout.erb:
„html
"
Acest aspect implicit este destul de goale, dar oferă tot ce aveți nevoie pentru a începe. Haideți să aruncăm o privire:
Și de acolo puteți personaliza acest aspect la fiecare nevoie. Un aspect potențial confuz pentru începătorii Ruby este Randament cuvânt cheie - aceasta înseamnă doar că trece prin restul conținutului pe care îl creați. Cu alte cuvinte, Randament este un substituent pentru opiniile dvs. care vor fi redate în el. Dacă acest concept este complet străin de tine, amintiți-vă că nu îl atingeți pentru moment sau că aplicația dvs. ar putea să nu funcționeze conform așteptărilor. Ori de câte ori vă creați propriile machete, având Randament este esențial, altfel conținutul dvs. nu va apărea. O să vă agățați în cel mai scurt timp, îți promit.
Dacă ați creat diferite machete, puteți specifica prin aspectul frontal aspectul pe care doriți să îl utilizați pentru fiecare pagină. Să presupunem că aveți o structură specială pentru a vă bucura de utilizatori, care sunt puțin mai vândute. Aici avem welcome.html.erb.
layout: vânzări -
"
Alternativ, puteți specifica aspectul în fișierul dvs. config.rb.
pagina ruby "/welcome.html",: layout => "vânzări"
Dacă doriți să evitați să faceți acest lucru manual pentru fiecare pagină, puteți să le colectați într-un singur loc. Din nou, în config.rb, utilizați un wildcard (** \ ***) pentru a colecta o grămadă de pagini care utilizează același aspect.
pagina rubinică "/ sales / *",: layout => "vânzări"
Îmi place personal să pun această informație despre aspect în chestiunea din față. E foarte explicită și nu prea repetitivă. Dacă totuși aveam o grămadă de ele, aș prefera să utilizez abordarea cu metacaractere.
Paralele vă oferă mijloacele de încapsulare a codului de vizualizare pe care îl puteți reutiliza ori de câte ori aveți nevoie. Trebuie doar să-ți spui vedere în cazul în care pentru a insera o parțială și devine redat chiar acolo. Paralele sunt o tehnică foarte frecventă pentru a vă usca codul.
Exemple foarte frecvente includ navbari, subsoluri și secțiuni de cap, pe care nu doriți să le duplicați peste tot. Fișierele pentru partiale încep cu un subliniere. Pentru începători le puteți plasa sub /sursă. Modelele dvs. sunt un bun loc pentru a începe cu colectarea de cod pentru a extrage în partiale. Ori de câte ori găsiți ceva ce trebuie reutilizat, partialii vor fi un prieten la îndemână.
Iată un exemplu de /source/layouts/layout.erb.
„html
<%= partial "head" %> <%= partial "navbar" %> <%= yield %> <%= partial "footer" %>"
Și sursa parțială / _head.html.erb:
„html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
Uneori, veți dori să extrageți parțial nu numai pentru a evita duplicarea, ci pentru a vă face vizibilitatea mai ușor de citit. În timp, secțiunile capului sunt notorii pentru a deveni destul de încărcate, de exemplu. Înăuntrul lor poți avea alte partiale care se ocupă doar de stil sau fișierele JS.
Veți realiza cât de convenabile sunt partialele odată ce puteți aplica modificările care se învârt prin întreaga aplicație - oriunde ați inclus parțial. Nu este nevoie să treceți printr-o grămadă de fișiere pentru a aplica aceeași schimbare mereu.
Ajutorii sunt metode pe care le puteți utiliza pentru o mulțime de sarcini de zi cu zi în viziunea dvs. Cred că acest lucru a fost pionier în terenul Rails și a devenit rapid omniprezent pentru dezvoltarea web web moderne. Ați văzut deja asistenți care includ fișiere de stil și fișiere JavaScript. Sunt mult mai multe de unde vine asta.
Iată din nou /source/_head.html.erc parțial:
„html
<%= stylesheet_link_tag "normalize", "all" %> <%= javascript_include_tag "all" %>"
Acești ajutoare sunt menite să vă ajute să scrieți un cod de vizualizare mai curat și mai concis. În lista de ajutoare de mai jos veți găsi o mulțime de lucruri utile care ies din cutie. Nu sunteți limitat de acestea. Scrieți propriile metode de ajutor în config.rb sau le colectați separat într-un modul.
Funcționează astfel: În config.rb tu creezi un ajutoare blocați și puneți toate metodele de ajutor înăuntru. Asta e. Acum, opiniile dvs. au acces la ele.
Exemplu: /source/_navbar.erb.
„html
"
Și în config.rb:
"ajutați rubinii
def random_username "# lorem.first_name # lorem.last_name" sfârșit
def image_tag imagine_tag "# lorem.image ('30x40',: background_color => '333',: color => 'fff')
Sfârșit"
Acești ajutoare ar putea să vină la îndemână atunci când vreau rapid să prototip ceva și vreau să evit să instalez imagini și text fals. În general, ar trebui să aveți grijă de codul pe care doriți să fie mai concis sau pe care îl duplicați din nou și din nou. Ajutorul este adesea o casă bună pentru asta.
În interiorul acestor ajutoare personalizate am folosit alți ajutoare Middleman pentru a crea img prin etichete prin IMAGE_TAG la fel de bine ca Lorem obiect pentru unele nume de utilizatori aleatorii și substituenți de imagine. Aceste lucruri lorem poate fi un pic personalizat pentru a se potrivi nevoilor dumneavoastra.
Folosind modul de abordare cu toate acestea, aveți nevoie de un fișier separat pentru modulul dumneavoastră. Creați un director "lib" în folderul dvs. rădăcină (la același nivel ca "sursă" și "construiți") și creați un fișier pentru ajutorul dvs..
Aici avem /lib/helpers.rb:
"Modul ruby PrototypingProducts def image_image image_tag" # lorem.image ('300x400',: background_color => '333',: color => 'fff')
def random_username "# lorem.first_name # lorem.last_name" end end "
Apoi, va trebui să lăsați fișierul dvs. config.rb să știe că doriți să utilizați acești ajutoare:
ruby necesită ajutorul "lib / helpers" PrototypingHelpers
Boom! Ești gata să te duci. În general, aș merge imediat cu modulul de abordare. Se simte mult mai curat pentru mine, plus evitați poluarea fișierului config cu prea multe lucruri.
Aș dori, de asemenea, să mă uit în ajutoare de ieșire și content_for în special, deoarece acestea pot fi un pic confuz pentru începători. Acest lucru vă permite să capturați o grămadă de conținut pe care le puteți aduce / reutiliza în alt loc. Este o miniatură parțială. Aș merge personal cu o parte parțială de cele mai multe ori, dar din când în când când doriți să aplicați modificări on-off mai mult din punct de vedere chirurgical, este util să știți:
Iată index.html.erb:
„html <% content_for :navigation do %>
<% end %>
... "
Și admin_index.html.erb:
„html <% content_for :admin_navigation do %>
<% end %>
<% content_for :admin_javascript do %> <%= javascript_include_tag “admin” %> <%= javascript_include_tag “some_library” %> <% end %>
... "
Apoi în layout.erb:
„html
<% if content_for?(:admin_javascript) %> <%= yield_content :admin_javascript %> <% else %> <%= javascript_include_tag "all" %> <% end %> <%= yield %> <%= partial "footer" %>"
Cheia este utilizată yield_content care vă pune conținutul colectat de pe pagina individuală în aspect - dacă este găsit. Nu este nevoie să le folosiți decât cu machete. Când trebuie să faceți acest lucru un pic mai mult implicat, utilizați content_for? pentru a verifica anumite blocuri de conținut înainte de a le introduce. Este util atunci când doriți să faceți mici adaptări pentru secțiunile care diferă foarte puțin. Este minunat să salvați acest conținut puțin ca o configurație pe paginile relevante și să-l "activați" numai acolo unde este necesar. Probabil că nu ar trebui să fii prea inteligent cu aceste lucruri.
Un cuvânt despre LINK_TO Ajutorul pe care l-am folosit mai sus. Aceasta este probabil cea mai des întâlnită. În mod esențial, utilizați metoda un nume și un url sau o cale în care să se îndrepte acest link. Am înlocuit ultima parte cu un înlocuitor pentru scurtcircuit.
Mai jos este o vedere de ansamblu a ajutoarelor care sunt în afara casetei la dispoziția dumneavoastră. Cred că numele sunt mai ales explicative și nu ar trebui să trec peste ceea ce vă poate ajuta fiecare dintre acestea. Faceți un marcaj mental al a ceea ce este acolo și verificați-vă cu documentația dacă vă dau probleme.
Accentsconagua
etichetăLINK_TOinput_tagfavicon_tagstylesheet_link_tagjavascript_include_tagcontent_forcontent_for?capture_htmlyield_contentconcat_contentform_taglabel_tagselect_tagsubmit_tagfield_set_tagtext_field_tagcheck_box_tagpassword_field_tagtrunchiafi cumulardword_wrapescape_htmlsimple_formatjs_escape_htmltime_ago_in_wordsdistance_of_time_in_wordslorem.datelorem.wordlorem.namelorem.emaillorem.imagelorem.wordslorem.sentencelorem.last_namelorem.paragraphlorem.first_namelorem.paragraphsCred că aceasta este o bază bună pentru a începe să jucați cu o aplicație pentru jucării. Ar trebui să aveți un bun simț al ofertei Middleman și al navigării în cadru. În următoarea parte a acestei serii vom lua lucrurile mai departe și ne vom arunca cu puțin mai mult în cadru. Echipa Middleman a făcut într-adevăr o treabă excelentă în proiectarea API și în păstrarea lucrurilor simple.
Sperăm că puteți vedea de ce acest cadru a câștigat popularitate și de ce este o alegere bună pentru tot felul de proiecte statice.
