Share
To ganger i måneden besøker vi noen av våre leseres favorittinnlegg fra hele Nettuts + historien. Denne opplæringen ble først publisert i oktober 2010.
Denne opplæringen vil introdusere Haml og Sinatra. Haml er et oppslagsspråk som produserer ren, godt strukturert HTML. Sinatra er et enkelt, men kraftig Ruby-rammeverk for å lage nettsteder eller webtjenester. De to jobber veldig godt sammen og gir et kraftig verktøy for rask og enkel webutvikling. Jeg finner dem ideelle for prototyping.
Ved slutten av denne opplæringen har du opprettet et nettsted med to sider ved hjelp av Sinatra og Haml. Underveis lærer du hvordan Sinatra applikasjoner er strukturert, og blir introdusert til Haml. Du vil også lære å bruke en layoutfil for å redusere mengden duplisert kode og gi konsistens mellom sidene.
Du kan hoppe over denne delen hvis du allerede har Ruby installert og jobber med systemet.
Vi må installere Ruby-språket og Sinatra og Haml gems for å komme i gang.
Metoden for å gjøre dette vil variere avhengig av operativsystemet. Jeg liker å bruke Ruby Version Manager (RVM) til å administrere Ruby på OS X og Linux. (Windows-brukere vil kanskje se Pik som et alternativ til RVM.)
For de av dere som ikke har Ruby installert, last ned og installer RVM.
Følg instruksjonene på RVM Installasjonssiden, åpne en terminal og skriv inn følgende:
bash <<( curl http://rvm.beginrescueend.com/releases/rvm-install-head )
Dette vil laste ned og installere RVM. Vi må legge til en linje til slutten av vår .bashrc fil. De av dere som bruker et alternativ til skall til Bash, må endre den aktuelle profilen. Se RVM installasjonssiden for flere detaljer.
Ønsker å lære mer om å jobbe med RVM?
echo '[[-s "$ HOME / .rvm / scripts / rvm"]] && kilde "$ HOME / .rvm / scripts / rvm" # Dette laster RVM inn i en shell-sesjon.' >> ~ / .bashrc
Lukk og åpne på nytt ditt skall, og du bør være god å gå!
Skriv 'rvm notater'for å sjekke ut eventuelle avhengigheter du måtte installere for operativsystemet. Det finnes flere forskjellige versjoner av Ruby som RVM kan klare. Vi bruker standardversjonen MRI. Derfor, i produksjonen av rvm notater se etter delen som sier 'For MR og REE? '. Kopier og lim inn kommandoen som er oppgitt for 'rubin'.
For eksempel, på en ny installasjon av Ubuntu, fikk jeg følgende utdata og trengte å installere avhengighetene som ble oppført ved å bruke evne kommando gitt i utgangen. Se skjermbilde nedenfor.
Med den vanskelige biten er det enkelt å installere og bruke forskjellige Ruby-versjoner og perler. Installer versjon 1.9.2 av Ruby ved å skrive inn følgende:
rvm installere 1.9.2
RVM skal nå laste ned og installere Ruby versjon 1.9.2.
Det siste stadiet er å instalere Sinatra og Haml edelstener. Type:
perle installere sinatra
Du bør se følgende utgang i terminalen:
Installert suksessfullt rack-1.2.1 Installert sinatra-1.0 2 gems installert Installert ri-dokumentasjon for rack-1.2.1? Installere ri dokumentasjon for sinatra-1.0? Installere RDoc-dokumentasjon for rack-1.2.1? Installere RDoc-dokumentasjon for sinatra-1.0?
Skriv nå perle installere haml å installere Haml-perlen på systemet på samme måte.
Helt nytt til Sinatra? Ta vårt gratis kurs!
For å begynne å lage Sinatra-programmet, opprett en mappe som inneholder en Ruby-fil for programkoden. I din terminal, skriv inn:
mkdir sinatra-app cd sinatra-app berøre nettsiden.rb
Åpne den nyopprettede 'website.rb'-filen i tekstredigeringsprogrammet og skriv inn følgende:
krever 'rubygems' krever 'sinatra' get '/' do "Dette er Sinatra" slutt
Dette er et grunnleggende Sinatra-program. De to første linjene bringer inn 'RubyGems'og'sinatra'biblioteker for å gjøre det harde arbeidet.
Neste avsnitt forteller Sinatra hvordan du svarer på en 'få' be om. Spesielt forteller det det som skal gjøres når roten url (den '/' sti) er forespurt. I dette eksemplet returnerer Sinatra bare strengen "Dette er Sinatra". Dette er hva som vil vises i nettleseren når roadsadressen til applikasjonen blir bedt om.
For å se det i aksjon, gå tilbake til din terminal og kjør Sinatra-programmet ved å bruke følgende kommando:
ruby website.rb
Du må starte denne på nytt
website.rbfilen hver gang du endrer den. Derfor er det en god ide å holde et eget skall løp i eget vindu eller flipp for å starte og stoppe det.
Du bør få svaret:
== Sinatra / 1.0 har tatt scenen på 4567 for utvikling med backup fra WEBrick [2010-09-27 09:45:37] INFO WEBrick 1.3.1 [2010-09-27 09:45:37] INFO rubin 1.8. 7 (2010-08-16) [i686-darwin10.4.0] [2010-09-27 09:45:38] INFO WEBrick :: HTTPServer # start: pid = 14135 port = 4567
Dette forteller oss at en webserver (kalt WEBrick) har startet, og serverer nå søknaden din på port 4567.
For å se det, åpne nettleseren din og gå til "localhost: 4567". Du bør se programmets utgang:
Gratulerer! Din Sinatra-applikasjon er oppe og går!
La oss begynne å se på byggesider med Haml og noen standard Sinatra-konvensjoner for spesielle filer.
Vi skal bygge våre sider med Haml. Det første trinnet er å fortelle vår søknad at vi skal bruke Haml-perlen.
Vi gjør dette ved å legge til med 'Haml' mot toppen av koden. Forandre din 'website.rb'fil for å se ut som følgende:
krever 'rubygems' krever 'sinatra' krever 'Haml get' / 'do "Dette er Sinatra" -end
Din søknad vil nå vite å bruke Haml-perlen som vi installerte tidligere.
Haml er en enkel og ren måte å beskrive HTML på. Den kan også håndtere inline-koden, for eksempel PHP, ASP og Ruby script.
En av Hamls mål er å redusere mengden duplisering og gjentakelse som finnes i å lage websider med HTML; Et eksempel på dette er å lukke koder. Det gjør dette ved å stole på strukturen av strekkene i koden: Når du skriver i Haml, er det viktig å være i samsvar med strekkordene som de beskriver strukturen på siden.
Resultatet er oppslag som er logisk og mye lettere å lese enn HTML for alle, men de mest trivielle tilfellene.
La oss se på noen Haml-markering og vise HTML-en som produserer den.
!!! % html% head% title Dette er tittelen i en tittel-tag i hodetiketten% body% h1 Dette er en overskrift i en h1-tag% p Dette er tekst i et avsnitt. Legg merke til hvordan vi ikke lukker taggen? indrykkene gjør det!
'!!!"ved starten av koden forteller Haml å sende ut DOCTYPE stikkord. HTML-koder er beskrevet med en '%'tegn. Så % html outputs the stikkord, %hode skaper stikkord, % p- skaper
tag og så videre.
Innsnittene forteller Haml hvilke merker ligger innenfor andre. Så overskriften tag produsert av "% h1'Markup er innenfor tag laget av '%kropp'markup. Følgende avsnittskode merket av '% p-'-taggen er også innenfor kroppsmerket. Etter innsnittene kan vi se at teksten ligger i avsnittet.
Derfor gir oppmerkningen ovenfor følgende HTML-utgang:
Dette er tittelen i hodetiketten Dette er en overskrift i kroppsmerket
Dette er tekst i et avsnitt. Legg merke til hvordan vi ikke lukker taggen? indrykkene gjør det!
Du kan se hvor lukkekodene korresponderer med innrykket i den opprinnelige Haml-markeringen.
Med den raske introduksjonen til Haml ute av veien, kan vi begynne å bruke den i vår søknad. Som standard vil Sinatra lete etter nettsidemaler i en mappe som heter 'visninger'. La oss legge til den mappen nå.
Åpne en terminal, naviger til sinatra_app mappen vi laget tidligere og skriv inn følgende:
mkdir viser cd-visninger
Nå er vi inne i visningsmappen, la oss lage en "index.haml'side.
trykk på index.haml
Åpen 'index.haml'i teksteditoren og fyll ut følgende:
!!! % html% hode% tittelen Sin Sinatra Nettsted% kropp% h1 Velkommen% p Velkommen til min hjemmeside laget med Sinatra og HAML
Det neste trinnet er å fortelle Sinatra å bruke denne filen til hjemmesiden. Åpne 'website.rb'fil og endre koden i få '/' blokkere slik at filen nå leser:
krever 'rubygemer' krever 'sinatra' krever 'haml' get '/' do haml: index end
Dette instruerer applikasjonen til å sende utdataene fra Haml-filen, kalt index.haml (søkes automatisk i mappen "visninger"), når rotadressen er forespurt.
Tilbake i terminalen som kjører webserveren, skriv 'Ctrl-C'for å stoppe webserveren og ring den igjen ved hjelp av rubin kommandoen for å starte den på nytt:
[Ctrl-C] ruby website.rb
Oppdater nettleseren din og du bør se den resulterende nettsiden.
Vise kilden til denne nettsiden viser HTML som er generert av Haml:
Min Sinatra Nettsted Velkommen
Velkommen til nettstedet mitt gjort med Sinatra og HAML
Flott! Vi har nå vår nettside som arbeider ved å bruke Haml-malene i 'visnings'-katalogen.
La oss nå jobbe hjemmesiden til noe som følger en typisk struktur med et overskrift, bunntekst, innholdsområde og et sidebjelke. Vi legger også til noen grunnleggende CSS for å plassere og utforme siden. Ved å gjøre dette, ser vi hvordan du skal uttrykke Gå tilbake til filen 'index.haml' i tekstredigeringsprogrammet og endre det slik at det ser ut som følgende: Dette er et typisk layout med overskrift, innhold, side_bar og bunntekst div. Som du kan se, For å gi en HTML-kode et ID, kjedde vi bare Lagre filen og oppdatere den i nettleseren din. Du bør se noe slikt: Sinatra bruker andre spesielle katalognavn "offentlig" for å lagre eiendeler som CSS-filer og bilder. Opprett en mappe som heter «offentlig» i programmets rotmappe. Bytt til katalogen og opprett en kalt 'css' for å lagre css-filene. Fullfør ved å lage et tomt Gjør dette i din terminal ved å skrive: Åpne Jeg vil ikke gå inn i detaljene til Vi må koble til CSS-filen fra indekssiden. Jeg skal også legge til en kobling til Yahoo CSS tilbakestill for å hjelpe konsistens på tvers av nettlesere. Åpne Dette illustrerer hvordan vi kan bruke parenteser i Haml for ytterligere tagattributter: Din siste fil skal se slik ut: Oppdater nettleseren din, og du bør se hjemmesiden med styling og Vi har nå grunnleggende mal for våre nettsider som vi kan bruke til å opprette flere sider. Nå som vi har vårt grunnleggende sidelayout, kan vi se at mye av innholdet i vår index.html-fil kan være den samme for andre sider på nettstedet. I dette eksemplet vil vi holde topptekst, bunntekst og sidebar felles for begge sider. Vi kan bruke en Gå tilbake til Vi vil nå redigere Endre layoutfilen slik at den ser ut som: Nøkkelen her er " Vi kan nå redigere vår Forfriskende nettleseren skal gi nøyaktig samme resultat som tidligere. Men denne gangen, den Å lage flere sider som bruker denne mal er nå grei. Opprett en ny fil i mappen "visninger" som heter Din katalog og filstruktur for applikasjonen skal se slik ut: Skriv inn følgende kode i den nye filen: Som du kan se, er dette en veldig enkel side med en overskrift og et stykke tekst i en avsnittetikett. Vi har ingen måte å se siden for øyeblikket. For å gjøre det, må vi endre Vi gjør det ved å legge til følgende linjer til De Start på nytt Du bør se følgende side når du navigerer til ' Å legge til flere sider vil være så rask og så enkel som det. Bare husk at du må starte på nytt Vi må legge til noen måte å navigere mellom sidene; så legger vi til en enkel meny i oppsettet. Åpne Her oppretter vi en Oppdater nettleseren din, og du bør se en meny som lenker de to sidene: Hvis du klikker på koblingene i navigasjonsmenyen, skal du ta deg til hver side. Du kan eksperimentere med å legge til flere sider. Husk at trinnene er som følger: Det er absolutt mye mer til både Sinatra og Haml enn vi har sett her. Sinatra er et godt valg for nettsider og webtjenester, mens en tyngre ramme som Ruby on Rails kan være overkill. Videre finner jeg enkelhet og klarhet i Haml, kompletterer Sinatra vakkert, og gir en meget produktiv utviklingsmetode.Opprett hjemmesiden
!!! % html% hodet% tittel Sinatra Nettsted% body #wrapper #header% h1 Sin Sinatra Nettsted% h2 Et enkelt nettsted laget med Sinatra og HAML! #content% h1 Hjemmesiden% p Velkommen til nettstedet mitt laget med Sinatra og HAML. % p Dette er hjemmesiden, og dette er litt tekst for å fylle ut hjemmesiden! #side_bar% h1 Sidefelt% p Dette er sidelinjen på nettsiden #footer% p Dette er footer.
# skilt. Hele siden er pakket inn i en #wrapper'linje. # på slutten, så vi kunne skrive % Kroppen # my_ID å få . Klasser er merket med en prikk. Så % article.my_class ville gitt .
Legg til noen CSS Styling
css filen i den katalogen. mkdir offentlig cd offentlig mkdir css cd css touch styles.css
styles.css filen i editoren din og kopier og lim inn følgende i: #wrapper bredde: 66%; margin: auto; #header bakgrunnsfarge: #ade; #header> h1 font-size: 200%; h2 skriftstørrelse: 130%; font-family: uten seriffer; # innhold margin: 12px 0; float: venstre; #side_bar margin: 12px 0; bredde: 30%; float: right; klar: none; background-color: #ddd; h1 skriftstørrelse: 150%; #footer clear: both; background-color: #ade; font-size: 75%; font-family: uten seriffer; color: # 333; border-top: solid 1px # 69a; ol polstring-topp: 20px; background-color: #ade; display: block; li farge: hvit; tekst-Justering: center; display: inline; polstring: 5px 10px 0 10px; margin-right: 2 piksler; bakgrunnsfarge: # 69a; en tekst-dekorasjon: ingen;
css, som det er bare en rask og skitten måte å gjøre sideelementene mer tydelige i nettleseren.index.haml siden redigeringsprogrammet og legg disse to linjene til %hode seksjon. % link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% link (rel = "stylesheet" href = "css / stiler Css ")
rel og href i dette tilfellet. !!! % html% hode% tittel Min Sinatra Nettsted% link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% link (rel = "stylesheet" href = "css / styles.css")% body #wrapper #header% h1 Min Sinatra Website% h2 Et enkelt nettsted laget med Sinatra og HAML! #content% h1 Hjemmesiden% p Velkommen til nettstedet mitt laget med Sinatra og HAML. % p Dette er hjemmesiden, og dette er litt tekst for å fylle ut hjemmesiden! #side_bar% h1 Sidefelt% p Dette er sidelinjen på nettsiden #footer% p Dette er footer.
divs posisjonert.
Trinn 4: Opprette en felles layout
oppsett fil i Sinatra for å oppnå dette.index side i teksteditoren din; endre filnavnet ved å velge 'Lagre som' til layout.haml.oppsett fil og introdusere noen templerende markup ved hjelp av '='tag i Haml. !!! % html% hode% tittel Min Sinatra Nettsted% link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% link (rel = "stylesheet" href = "css / styles.css")% body #wrapper #header% h1 Min Sinatra Website% h2 Et enkelt nettsted laget med Sinatra og HAML! #content = yield #side_bar% h1 Sidefelt% p Dette er sidelinjen på nettsiden #footer% p Dette er footer.
= flyte'kommando. De = skilt forteller Haml å behandle noen Ruby-kode og sette utgangen i nettleseren. Her kaller vi bare Ruby's utbytte funksjon som vil returnere innholdet på siden.index.haml side for å ta ut all koden som er duplisert i oppsett fil. Endre det slik at det ser ut som: % h1 Hjemmesiden% p Velkommen til nettstedet mitt gjort med Sinatra og HAML. % p Dette er hjemmesiden, og dette er litt tekst for å fylle ut hjemmesiden!
oppsett filen blir automatisk hentet av Sinatra og index Siden blir gjengitt som et resultat av utbytte funksjon.Lag om siden
about.haml 
% h1 Om% p Dette er et enkelt program ved hjelp av Sinatra og HAML.
website.rb fil for å fortelle Sinatra å håndtere en forespørsel om "/handle om'og å returnere about.haml mal som et resultat.website.rb fil: krever 'rubygems' krever 'sinatra' krever 'haml' get '/' do haml: index end get '/ om' gjør haml: om slutten
få '/ om' blokk enkel forteller Sinatra å returnere "om" Haml mal som svar på en HTTP får for '/handle om'. WEBrick webserver ved å trykke Ctrl-C i terminalen der den kjører, som vi gjorde før, og ringer ruby website.rb.localhost: 4567 / om'i nettleseren din.
WEBrick server hvis du endrer programfilen.
Trinn 5: Legge til en meny (og rydde opp)
layout.haml fil og legg til navigasjonen div og koblingene som dette: !!! % html% hode% tittel Min Sinatra Nettsted% link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% link (rel = "stylesheet" href = "css / styles.css")% body #wrapper #header% h1 Min Sinatra Website% h2 Et enkelt nettsted laget med Sinatra og HAML! #nav% ol% a (href = "/")% li Hjem% a (href = "om")% li Om #content = yield #side_bar% h1 Sidefelt% p Dette er sidelinjen på nettsiden #footer % p Dette er bunnteksten.
div med id av nav. Dette div inneholder en liste med anker tags til '/' og 'handle om'. Legg merke til hvordan den koblede teksten er innrykket på den følgende linjen for å omslutte den i HTML anker tag.
website.rb filen for den nye ruten på samme måte som "/handle om'rute.
Konklusjon
Accentsconagua