Share
De două ori pe lună, revizuim câteva postări preferate ale cititorilor noștri de-a lungul istoriei Nettuts +. Acest tutorial a fost publicat pentru prima oară în octombrie 2010.
Acest tutorial va introduce Haml și Sinatra. Haml este un limbaj de markup care produce HTML curat, bine structurat. Sinatra este un cadru simplu, dar puternic Ruby pentru crearea de site-uri sau servicii web. Cei doi lucrează foarte bine împreună și oferă un instrument puternic pentru dezvoltarea web rapidă și simplă. Le consider ideale pentru prototipuri.
Până la sfârșitul acestui tutorial, veți fi creat un site web cu două pagini utilizând Sinatra și Haml. Pe parcurs, veți afla cum sunt structurate aplicațiile Sinatra și vor fi introduse în Haml. Veți învăța, de asemenea, cum să utilizați un fișier de aspect pentru a reduce cantitatea de cod duplicat și a da consecvență între pagini.
Puteți sări peste această secțiune dacă aveți deja instalat Ruby și lucrați la sistemul dvs..
Trebuie să instalăm limbajul Ruby și pietrele Sinatra și Haml pentru a începe.
Metoda de a face acest lucru va varia în funcție de sistemul dvs. de operare. Îmi place să folosesc Ruby Version Manager (RVM) pentru a gestiona Ruby pe OS X și Linux. (Utilizatorii de Windows ar putea dori să se uite la Pik ca o alternativă la RVM.)
Pentru cei care nu au instalat Ruby, descărcați și instalați RVM.
Urmând instrucțiunile de pe pagina de instalare RVM, deschideți un terminal și introduceți următoarele:
bash <<( curl http://rvm.beginrescueend.com/releases/rvm-install-head )
Aceasta va descărca și instala RVM. Trebuie să adăugăm o linie la sfârșitul lui .bashrc fişier. Aceia dintre voi care folosesc o alternativă la coajă pentru Bash vor trebui să modifice profilul adecvat. Vedeți pagina de instalare RVM pentru mai multe detalii.
Doriți să aflați mai multe despre lucrul cu RVM?
echo "[[-s" $ HOME / .rvm / scripts / rvm "]] && sursă" $ HOME / .rvm / scripts / rvm "# Încărcă RVM într-o sesiune shell. >> ~ / .bashrc
Închideți și re-deschideți coaja și ar trebui să fiți bine să mergeți!
Tip 'rvm note"pentru a verifica eventualele dependențe de care ar putea fi necesare pentru a instala pentru sistemul dvs. de operare. Există diferite versiuni serveri ale Ruby pe care RVM le poate gestiona. Vom folosi versiunea standard numită RMN. Prin urmare, în producția de rvm note căutați secțiunea care spune:Pentru RMN și REE? “. Apoi copiați și lipiți comanda indicată pentru 'rubin'.
De exemplu, pe o instalare proaspătă de Ubuntu, am obținut următoarea ieșire și am nevoie de instalarea dependențelor enumerate folosind aptitudine comandă dată în ieșire. Vedeți captura de ecran de mai jos.
Odată cu biții dificili, instalarea și utilizarea diferitelor versiuni Ruby și pietre este acum ușor. Instalați versiunea 1.9.2 a Ruby introducând următoarele:
rvm install 1.9.2
RVM ar trebui să descarce și să instaleze versiunea Ruby 1.9.2.
Etapa finală este de a instala pietrele Sinatra și Haml. Tip:
gem instala sinatra
Ar trebui să vedeți următoarele ieșiri în terminal:
Instalat cu succes rack-1.2.1 Instalat cu succes sinatra-1.0 2 pietre instalate Instalarea documentației ri pentru rack-1.2.1? Instalarea documentației ri pentru sinatra-1.0? Instalarea documentației RDoc pentru rack-1.2.1? Instalarea documentației RDoc pentru sinatra-1.0?
Acum tastați gem instalați haml pentru a instala gemul Haml pe sistemul dvs. în același mod.
Brand nou pentru Sinatra? Ia cursul gratuit!
Pentru a începe să faceți aplicația Sinatra, creați un dosar care conține un fișier Ruby pentru codul aplicației. În terminalul dvs., tastați:
mkdir sinatra-app cd sinatra-app touch site.rb
Deschideți noul fișier "website.rb" creat în editorul de text și introduceți următoarele:
cereți "rubygems" necesită "sinatra" obține "/" face "Acesta este Sinatra" sfârșitul
Aceasta este o aplicație de bază Sinatra. Primele două linii aduc "rubygems' și 'Frank Sinatra"biblioteci pentru a face munca grea.
Următoarea secțiune îi spune lui Sinatra cum să răspundă la un "obține' cerere. În mod specific, aceasta îi spune ce trebuie să faceți atunci când url (root) '/' cale) este solicitată. În acest exemplu, Sinatra întoarce șirul "Acesta este Sinatra". Aceasta va apărea în browser atunci când se solicită adresa URL a root-ului aplicației.
Pentru ao vedea în acțiune, reveniți la terminalul dvs. și executați aplicația Sinatra utilizând următoarea comandă:
ruby site.rb
Va trebui să reporniți acest lucru
website.rbfișier de fiecare dată când îl schimbați. Prin urmare, este o idee bună să păstrați o cochilie separată care rulează în propria fereastră sau filă pentru ao porni și opri.
Ar trebui să obțineți răspunsul:
== Sinatra / 1.0 a luat etapa pe 4567 pentru dezvoltare cu backup de la WEBrick [2010-09-27 09:45:37] INFO WEBrick 1.3.1 [2010-09-27 09:45:37] INFO ruby 1.8. 7 (2010-08-16) [i686-darwin10.4.0] [2010-09-27 09:45:38] INFO WEBrick :: HTTPServer # început: pid = 14135 port = 4567
Acest lucru ne spune că un server web (numit WEBrick) a început și vă servește acum aplicația pe portul 4567.
Pentru ao vizualiza, deschideți browserul și accesați "localhost: 4567". Ar trebui să vedeți rezultatul aplicației:
Felicitări! Cererea dvs. Sinatra este în funcțiune!
Să începem să ne uităm la paginile de construcție cu Haml și câteva convenții Sinatra implicite pentru fișiere speciale.
Vom construi paginile cu Haml. Primul pas este să spunem cererea noastră că vom folosi gemul Haml.
Facem acest lucru prin adăugarea lui "Haml" în partea de sus a codului. Schimba-ti 'website.rb'pentru a arăta astfel:
cereți "rubygems" cer "sinatra" necesită "Haml get" / "do" Acesta este Sinatra "sfârșitul
Aplicația dvs. va ști acum să utilizeze bijuteria Haml pe care am instalat-o mai devreme.
Haml este un mod simplu și curat de descriere a codului HTML. Se poate ocupa și de codul inline, cum ar fi scriptul PHP, ASP și Ruby.
Unul dintre obiectivele lui Haml este de a reduce cantitatea de duplicare și repetiție găsită în crearea de pagini web cu HTML; un exemplu în acest sens este închiderea etichetelor. Ea face acest lucru bazându-se pe structura de indenturi în cod: Atunci când scrieți în Haml, este important să fie în concordanță cu liniuțe, deoarece descriu structura paginii.
Rezultatul este un markup care este logic și mult mai ușor de citit decât HTML pentru toate, cu excepția cazurilor cele mai banale.
Să ne uităm la un marcaj Haml și să arătăm HTML-ul pe care îl produce.
!!! % html% head% title Acesta este titlul dintr-o etichetă de titlu din eticheta head% body% h1 Aceasta este o rubrică în cadrul unei etichete h1% p Acesta este textul dintr-un paragraf. Observați cum nu închidem eticheta? indicele fac asta!
''!!!"la începutul codului spune Haml de a ieși DOCTYPE etichetă. Etichetele HTML sunt descrise cu un "%' semn. Asa de % html ieșire etichetă, %cap creează etichetă, % p creează
eticheta și așa mai departe.
Indents spune Haml care tag-uri se află în alte. Deci, eticheta de titlu produs de "% h1"marcarea este în interiorul eticheta creată de "%corp"marcaj. Eticheta de paragraf următor marcată de secțiunea "% p"este, de asemenea, în interiorul etichetei corporale. În urma indicațiilor, putem vedea că textul se află în paragraful.
Prin urmare, marcajul de mai sus oferă următoarea ieșire HTML:
Acesta este titlul din eticheta head Aceasta este o rubrică din eticheta corporală
Acesta este textul într-un paragraf. Observați cum nu închidem eticheta? indicele fac asta!
Puteți vedea unde etichetele de încheiere corespund indentării în marcajele originale Haml.
Odată cu introducerea rapidă la Haml, putem începe să o folosim în aplicația noastră. În mod implicit, Sinatra va căuta șabloanele de pagini web într-un folder numit "vizualizari“. Să adăugăm acel dosar acum.
Deschideți un terminal, navigați la dosarul sinatra_app pe care l-am făcut mai devreme și introduceți următoarele:
mkdir vizualizări cd
Acum suntem în dosarul de vizualizări, să creăm un "index.haml".
atingeți index.haml
Deschis 'index.haml"în editorul de text și completați următoarele:
!!! % html% head% title Site-ul meu Sinatra% body% h1 Bine ati venit% p Bine ati venit pe site-ul meu realizat cu Sinatra si HAML
Următorul pas este să-i spuneți lui Sinatra să utilizeze acest fișier pentru pagina de pornire. Deschide 'website.rb'și modificați codul în obține '/' blocați, astfel încât fișierul citește acum:
cereți "rubygems" cer "sinatra" necesită "haml 'get" /' do haml: end index
Aceasta instruiește aplicația să trimită ieșirea fișierului Haml, numită index.haml (căutat în mod automat în dosarul "vizualizări"), când se solicită adresa rădăcină.
Înapoi în terminalul care rulează serverul web, tastați 'Ctrl-C'pentru a opri serverul web și apoi apelați din nou folosind rubin comanda pentru a reporni:
[Ctrl-C] ruby site.rb
Reîmprospătați browserul dvs. și ar trebui să vedeți pagina Web care rezultă.
Vizionarea sursei acestei pagini web arată HTML-ul generat de Haml:
Site-ul meu Sinatra Bine ati venit
Bine ati venit pe site-ul meu realizat cu Sinatra si HAML
Grozav! Acum, site-ul nostru funcționează utilizând șabloanele Haml din directorul "Vizualizări".
Să lucrăm acum pagina de pornire în ceva care urmează o structură tipică cu un antet, subsol, zona de conținut și o bara laterală. Vom adăuga, de asemenea, câteva CSS de bază pentru poziționarea și stilul paginii. În acest sens, vom vedea cum să exprimăm Reveniți la fișierul "index.haml" din editorul dvs. de text și schimbați-l după cum urmează: Acesta este un aspect tipic cu antet, conținut, partiție laterală și subsol. După cum puteți vedea, Pentru a da o etichetă HTML un ID, noi lanțem Salvați fișierul și actualizați-l în browser. Ar trebui să vedeți ceva de genul: Sinatra folosește un alt nume de director special "public" pentru a stoca active, cum ar fi fișiere și imagini CSS. Creați un dosar numit "public" în dosarul rădăcină al aplicației. Schimbați în acel director și creați unul numit "css" pentru a stoca fișierele css. Terminați prin crearea unui gol Faceți acest lucru în terminalul dvs. tastând: Deschide Nu voi intra în detaliile Trebuie să conectăm fișierul CSS din pagina index. De asemenea, voi adăuga un link la resetarea Yahoo CSS pentru a ajuta la coerența între browsere. Deschide Acest lucru ilustrează modul în care putem folosi paranteze în Haml pentru atributele de etichete suplimentare: Fișierul dvs. final ar trebui să arate astfel: Reîmprospătați browserul dvs. și ar trebui să vedeți pagina de pornire cu styling și Acum avem șablonul de bază pentru paginile noastre web pe care le putem reutiliza pentru a crea pagini suplimentare. Acum, dacă avem aspectul de bază al paginii, putem vedea că o mare parte din conținutul din fișierul index.html ar putea fi același pentru alte pagini de pe site. În acest exemplu, vom păstra antetul, subsolul și bara laterală comune ambelor pagini. Putem folosi a Întoarceți-vă la Vom edita acum Schimbați fișierul de aspect astfel: Cheia aici este " Acum ne putem edita Reîmprospătarea browserului ar trebui să ofere exact același rezultat ca și mai devreme. Dar de data aceasta, Crearea de pagini suplimentare care utilizează acest șablon este acum simplă. Creați un fișier nou în dosarul "vizualizări" numit Directorul și structura fișierelor pentru aplicație ar trebui să arate astfel: Introduceți următorul cod în noul fișier: După cum puteți vedea, aceasta este o pagină foarte simplă, cu o rubrică și o bucată de text într-un etichetă de paragraf. Nu avem nici o modalitate de a vedea pagina în acest moment. Pentru a face acest lucru, trebuie să modificăm Facem asta prin adăugarea următoarelor linii la Reporniți Ar trebui să vedeți următoarea pagină când navigați la " Adăugarea mai multor pagini ar fi la fel de rapidă și la fel de simplă. Amintiți-vă că va trebui să reporniți Trebuie să adăugăm o modalitate de navigare între pagini; așa că vom adăuga un meniu simplu în aspect. Deschide Aici, creăm un Actualizați browserul dvs. și ar trebui să vedeți un meniu care să lege cele două pagini: Dacă faceți clic pe linkurile din meniul de navigare, ar trebui să ajungeți la fiecare pagină. Puteți experimenta adăugarea mai multor pagini. Rețineți că pașii sunt după cum urmează: Cu siguranță există mult mai mult pentru Sinatra și pentru Haml decât am văzut aici. Sinatra este o alegere excelentă pentru site-uri web și pentru servicii web, în timp ce un cadru mai greu, cum ar fi Ruby on Rails, ar putea fi prea mult. Mai mult, consider că simplitatea și claritatea lui Haml completează Sinatra frumos și fac o abordare de dezvoltare foarte productivă.Creați Pagina de pornire
!!! % html% head% title Site-ul meu Sinatra% body #wrapper #header% h1 Site-ul meu Sinatra% h2 Un site simplu realizat cu Sinatra și HAML! #content% h1 Pagina principală% p Bine ați venit pe site-ul meu realizat cu Sinatra și HAML. % p Aceasta este pagina de pornire și acesta este un text pentru a completa pagina de pornire! #side_bar% h1 Bara laterală% p Aceasta este bara laterală a paginii web #footer% p Acesta este subsolul.
# semn. Întreaga pagină este înfășurată într-un #wrapperlinie. # la sfârșit, ca să putem scrie % Corp # my_ID a obține . Clasele sunt marcate cu un punct. Asa de % article.my_class ar da .
Adăugați o anumită formă de CSS
css fișier în acel director. mkdir public cd public mkdir css CD css touch styles.css
styles.css fișier în editorul dvs. și copiați și lipiți următoarele în: #wrapper lățime: 66%; margin: auto; #header culoare-fundal: #ade; #header> h1 font-size: 200%; h2 font-size: 130%; font-family: sans-serif; #content margin: 12px 0; plutește la stânga; #side_bar marja: 12px 0; lățime: 30%; float: right; clar: nici unul; culoare de fundal: #ddd; h1 font-size: 150%; #footer clar: ambele; culoare de fundal: #ade; font-size: 75%; font-family: sans-serif; Culoare: # 333; frontieră: solid 1px # 69a; ol padding-top: 20px; culoare de fundal: #ade; display: block; li culoare: alb; text-align: center; display: inline; umplutura: 5px 10px 0 10px; marja de-dreapta: 2px; fundal-culoare: # 69a; a text-decoration: none;
css, deoarece este doar un mod rapid și murdar de a face elementele paginii mai evidente în browser.index.haml pagina editorului și adăugați aceste două linii la %cap secțiune. % link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% link (rel = "stylesheet" href = "css / stiluri .css ")
rel și href în acest caz. !!! % html% head% title Site-ul meu Sinatra% link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% "stylesheet" href = "css / styles.css")% body #wrapper #header% h1 Site-ul meu Sinatra% h2 Un site simplu realizat cu Sinatra și HAML! #content% h1 Pagina principală% p Bine ați venit pe site-ul meu realizat cu Sinatra și HAML. % p Aceasta este pagina de pornire și acesta este un text pentru a completa pagina de pornire! #side_bar% h1 Bara laterală% p Aceasta este bara laterală a paginii web #footer% p Acesta este subsolul.
divs poziţionat.
Pasul 4: Crearea unui aspect comun
schemă fișier în Sinatra pentru a realiza acest lucru.index în editorul de text; modificați numele fișierului selectând opțiunea "Salvați ca" la layout.haml.schemă fișier și introduceți un anumit markup templating folosind "="în Haml. !!! % html% head% title Site-ul meu Sinatra% link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% "stylesheet" href = "css / styles.css")% body #wrapper #header% h1 Site-ul meu Sinatra% h2 Un site simplu realizat cu Sinatra și HAML! #content = randament #side_bar% h1 Bară laterală% p Aceasta este bara laterală a paginii web #footer% p Acesta este subsolul.
= randament"comandă. = semnul îi spune lui Haml să proceseze un cod Ruby și să pună ieșirea în browser. Aici pur și simplu sunăm Ruby's Randament care va returna conținutul paginii.index.haml pentru a elimina tot codul care este duplicat în schemă fişier. Modificați-l astfel încât să arate: % h1 Pagina de pornire% p Bine ati venit pe site-ul meu realizat cu Sinatra si HAML. % p Aceasta este pagina de pornire și acesta este un text pentru a completa pagina de pornire!
schemă fișierul este preluat automat de către Sinatra și index pagina este redată ca rezultat al Randament funcţie.Creați pagina Despre
about.haml 
% h1 Despre% p Aceasta este o aplicație simplă folosind Sinatra și HAML.
website.rb fișier pentru a spune Sinatra să se ocupe de o cerere de "/despre"și să returneze about.haml șablon ca rezultat.website.rb fişier: cereți "rubygems" cer "sinatra" necesită "haml 'get" /' do haml: end end get '/ about' do haml:
obține "/ despre" blocul simplu spune Sinatra să returneze șablonul "despre" Haml ca răspuns la un HTTP obține pentru '/despre'. WEBrick server web prin apăsarea tastei Ctrl-C în terminalul în care rulează, așa cum am făcut-o înainte și chemând ruby site.rb.localhost: 4567 / despre"în browser-ul dvs..
WEBrick dacă modificați fișierul aplicației.
Pasul 5: Adăugarea unei meniuri (și alinierea)
layout.haml fișier și adăugați navigația div și legăturile de genul: !!! % html% head% title Site-ul meu Sinatra% link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% "stylesheet" href = "css / styles.css")% body #wrapper #header% h1 Site-ul meu Sinatra% h2 Un site simplu realizat cu Sinatra și HAML! #info% o% a (href = "/")% li Acasă% a (href = "despre")% li Despre #content = randament #side_bar% h1 Bară laterală% p Aceasta este bara laterală a paginii web #footer % p Acesta este subsolul.
div cu id-ul nav. Acest div conține o listă cu ancoră etichete pentru a '/' și 'despre“. Observați cum textul legat este indentat pe următoarea linie pentru al înconjura în HTML ancora.
website.rb fișier pentru noua rută în același mod ca și "/despre' traseu.
Concluzie
Accentsconagua