Share
Denne andre opplæringen om å bygge statiske nettsteder med Middleman dykker litt dypere inn i rammen. Til slutt bør du vite nok til å bygge ditt eget prosjekt fra bunnen av. Vi vil dekke emner som Datafiler, Pretty URLs, Project Maler og Asset Pipeline, så la oss bli sittende fast i!
Så, etter å ha fulgt den første opplæringen, har du allerede lært å spille med data; Frontmateriell lagret i de tredobbelte bindestrek-avgrensede seksjonene på de enkelte sidene. Du kan også skrive separate datafiler i YAML eller JSON og sette dem i en "/ data" -katalog. Dette er nyttig hvis du har mer komplekse nettsteder med data som sjelden endres, og hvor du ikke vil opprettholde data direkte i HTML-koden din.
La oss si at du har rett til å selge alle James Bond-filmer. Vi kunne sette en liste over dem i en datafil og lukte over dem etter vår oppfatning. Hvis vi trenger å endre eller oppdatere dataene når en ny film er tilgjengelig, trenger du bare å bruke den endringen i din .YAML eller .json data fil. Jeg vil ikke anbefale driver med det for data som er på noen måte komplisert; det er gjennomførbart, men føles veldig dumt og galt.
For eksempel, her er hva en /data/bond.yaml-fil kan se ut som:
Ruby-filmer: - tittel: "Dr. No" år: "1962" -tekst: "John Strangways, SIS-stasjonssjefen i Jamaica, blir drept. Som svar er britisk agent James Bond-også kjent som 007-er sendt til Jamaica for å undersøke omstendighetene. Under sin undersøkelse møter Bond Quarrel, en Cayman-fisker, som hadde jobbet med Strangways rundt de nærliggende øyene for å samle mineralprøver. En av øyene var Crab Key, hjemmet til den tilbakestående Dr. " image: "bond_movie_01.png" - tittel: "Fra Russland med kjærlighet" år: "1963" tekst: "SPECTERs ekspertplanlegger Kronsteen utarbeider et tomt for å stjele en kryptografisk Lektor-enhet fra sovjettene og selge den tilbake til dem samtidig som det hevdes hevn på Forbundet for å drepe sin agent Dr. No, ex-SMERSH-operatøren Rosa Klebb er ansvarlig for oppdraget. Hun rekrutterer Donald "Red" Grant som en snikmorder og Tatiana Romanova, en cipher clerk på sovjetkonsulatet i Istanbul som den uvitende agn ." image: "bond_movie_02.png" - tittel: "Goldfinger" år: "1964" tekst: "Bond er beordret til å observere bullion-forhandleren Auric Goldfinger: han ser Goldfinger juks på kort og stopper ham ved å distrahere sin ansatt, som senere blir drept av Goldfinger er den koreanske tjeneren Oddjob. Bond blir deretter bedt om å undersøke gullfingerens gullsmugling, og han følger forhandleren til Sveits. Bond blir fanget når han rekonverterer Goldfinger sin plante og er drugged, han blir tatt til Goldfinger's Kentucky stud farm og er fengslet. Han rømmer kort til vitne Goldfingers møte med amerikanske mafiosi, som har hentet materialene han trenger for en operasjon for å rane Fort Knox. " bilde: "bond_movie_03.png" ...
Send så ut som i kilde / bond-movies.html.erb:
"html
<%= movie.text %>
"
En av fordelene med disse datafilene er at de er sikre. Enda bedre, din /data katalog med alle YAML- eller JSON-dataene blir ikke presset til din live server. Under byggfasen blir dataene dine sprøytet inn i malene dine lokalt før det blir distribuert. Etter det er dataene i dine synspunkter bare ren statisk HTML. Ganske kult!
Et ord om navngiving konvensjoner her. Når du har datafiler i en "data" katalog får du tilgang til a data gjenstand. Middleman skaper da "objekter" for hver .YML, .YAML eller .json fil som du kan få tilgang til via det initale data objekt ved å koble den på. Du har da tilgang til attributene du har lagret. I vårt tilfelle har vi en filmer YAML "objekt" med attributter tittel, år, tekst og bilde.
"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 %>"
Hvis du har underkataloger, trenger du bare å takke dem på. La oss si at du har din obligasjonsfilmdatafil under a spy_movies katalog (for eksempel: /data/spy_movies/bond.yaml) Du vil nå få tilgang til det slik:
html <%= data.spy_movies.bond.movies.title %>
Til slutt, jeg bør legge til at lagring av det i JSON kan være å foretrekke for noen mennesker, men alle overskytende kommaer, braketter og braces gjør meg av å være ærlig. Ikke bare i datafiler, men også i frontmatterseksjoner. Det er opp til deg som passer deg best selvfølgelig, se for deg selv:
some_file.yaml:
plain bond_girls: - Strawberry Fields - Jill Masterson - Tiffany Veske
some_file.json:
javascript "bond_girls": ["Strawberry Fields", "Jill Masterson", "Tiffany Case"]
Hvis du har en fil som kilde / bond-movies.html.erb, vil den ende opp som http://appname.com/bond-movies.html. Under byggeprosessen løsner vi filtypen ".erb" og slutter med den endelige ". Html" -versjonen av den siden som er speilet i nettadressen. Det er greit, vanlige ting. For mer avanserte nettadresser som http://appname.com/bond-movies må vi jobbe litt.
Du må aktivere Katalogindekser utvidelse i config.rb. Dette lager en mappe for hver .html-fil. Under mellommann bygge Den ferdige siden ender opp som indeksfilen til den mappen, noe som betyr at det ikke er nødvendig å oppgi en utvidelse i nettadressen som en indeksfil. Hvis du har betalt oppmerksomhet, har du kanskje allerede sett dette på jobb med standard index.html-filen som blir opprettet for hvert Middleman-prosjekt som en destinasjonsside. Brann opp serveren din og se for deg selv.
I config.rb:
rubin aktivere: directory_indexes
La oss se hva som skjedde etter mellommann bygge til filen bond-movies.html.erb hvis du har aktivert utvidelsen. Middleman vil ha opprettet en "build / bond-movies" -mappe og ditt opprinnelige filnavn vil bli endret til index.html (build / bond-movies / index.html).
Her er Shell-produksjonen:
bash lage build / bond-movies / index.html
Det er imidlertid en liten advarsel skjønt. Før du aktiverte ganske nettadresser, kan du stole på å bruke eiendomsbanen. Nå med katalogindekser på plass må du levere eiendeler med full, absolutt sti. Så kaller et bilde bare ved navn, for eksempel, vil ikke fly lenger.
Hvis du av en eller annen grunn vil overstyre oppførselen til den utvidelsen for en bestemt fil du kan.
I config.rb:
ruby side "/bond-movies.html",: directory_index => false
Her er Shell-utgangen hvis du endrer den tilbake for bond-movies.html.erb:
bash lage build / bond-movies.html fjern build / bond-movies / index.html fjern build / bond-movies
Nå er nettadressen sin tilbake til normal for den filen igjen. (Http://appname.com/bond-movies.html)
I tillegg kan du velge fra katalogen for katalogindeksering lokalt i de enkelte sidens frontmatter:
directory_index: false -
... "
Hvis du vil bygge den strukturen med mapper og deres respektive indeksfiler selv, vil Middleman ikke rote med deg. Den fungerer på samme måte og mellommann ignorerer dem hvis du blander og samsvarer med denne tilnærmingen.
Jeg vil gjerne klippe til jakten med denne og bare vise deg brikkene som jeg synes er virkelig relevante.
"Pipeline" er Rails lingo importert til Middleman. Under hetten gjør en perle kalt Sprockets alt tungt løft. Det hjelper deg med å håndtere avhengighetsadministrasjon, kombinere og redusere eiendeler, noe som bidrar til å redusere dine eiendeler betydelig. Noen få hjelpemetoder til kortfattede referansemidler er også til din disposisjon. Utover det får du også midler til å skrive Sass og CoffeeScript-kode, helt ut av boksen.
Sammenkobling er en av de viktigste funksjonene i aktivpiplinjen. I stedet for å ha mange separate HTML-forespørsler for hver CSS og JS-fil, kan du redusere dem drastisk ved å sammenkoble dem til en, eller en håndfull filer. Jo færre ber deg om at jo raskere søknaden din vil bli lastet inn.
Som standard vil Sprockets trykke alle JavaScript-filer i en enkelt .js fil. Etter mellommann bygge, denne filen finner du under /build/javascripts/all.js. Det samme gjelder for CSS. Etter byggeprosessen vil du ha alle Sass-filer sammenkoblet sammen i build / stylesheets / all.css.
Du kombinerer JavaScript-eiendelene dine ved å bruke partials (hvis filnavn starter med et understrek) og deretter krever dem øverst i kilde / javascripts / all.js-filen. Filer med en ekstra .coffee-utvidelse fungerer nøyaktig det samme. Bestillingen har betydning for denne prosessen.
Her er for eksempel toppen av kilden / javascript / all.js:
javascript // = krever "_jquery" // = krever "_lib_code" // = krever "_animations"
Når du ser på det nye /bygge katalog, finner du bare en .js-fil under / javascripts.
For Sass-koden er historien den samme, men du bør bruke Sass @importere for å importere delene dine, i stedet for krever fra sprockets. Sett igjen de "nødvendige" filene helt øverst, denne gangen legger du oppmerksomhet på rekkefølge. I motsetning til å kreve JavaScript-partisjoner, går du av understreken når du importerer Sass partials. For eksempel
css @ import "normalisere"; @import 'header'; @import 'navigasjon'; @import 'footer';
En annen kul funksjon av tannhjul er kompresjon, også kalt minifisering. Denne prosessen kutter ut mye av fettet, som å kvitte seg med unødvendig hvite plass og kommentarer. Folk kaller også denne prosessen uglifying (og selvfølgelig er det en perle kalt uglifier som gjør en vakker jobb med dette). Sammenlignet med JavaScript-aktivering, er CSS-forkortelse ikke så komplisert.
For å komme i gang må du legge til følgende i config.rb-filen din:
ruby configure: build aktivere: minify_css aktivere: minify_javascript-slutt
Egentlig trenger du bare å uncomment disse linjene under din :bygge blokkere. Neste gang du bruker mellommann bygge Aktivene i din / bygge-mappen vil alle bli uglified og slanke. Nedenfor er to små eksempler hvordan denne koden faktisk ender opp med å se:
Minifisert CSS under /build/stylesheets/all.css:
css body bakgrunnsfarge: # d0e4fe h1 farge: oransje; tekst-align: center p font-family: "Times New Roman"; skriftstørrelse: 20px
Minifisert JS under /build/javascripts/all.js:
javascript-bryter ((ny dato) .getDay ()) tilfelle 0: dag = "søndag"; pause; sak 1: dag = "mandag"; pause; sak 2: dag = "tirsdag"; pause; sak 3: dag = "Onsdag"; pause; sak 4: dag = "torsdag"; pause; sak 5: dag = "fredag"; pause; sak 6: dag = "lørdag"
Uten aktivitetspipeline må du sette opp din egen ting å skrive JavaScript og CSS via høyere nivå språk som CoffeeScript og Sass.
For dine Sass-filer har du fire hjelpere til din disposisjon:
Accentsconagua
IMAGE_PATH ()font_path ()image_url ()font_url ()Etter hvert som du har fulgt konvensjoner så langt, kan du bruke disse hjelperne til å legge ut den riktige katalogbanen til dine eiendeler.
I en Sass-fil, for eksempel:
"css image_path ('logo.png') # => images / logo.png
image_path ('nested_folder / some.png') # => bilder / nested_folder / some.png "
Anleggsrørledningen bruker importbaner via kjedehjul for dine eiendeler. Som standard : js_dir og : css_dir er allerede lagt til den banen. Det betyr at filer legges inn / SOURCE / javascripts og / SOURCE / stil er tilgjengelige og importeres automatisk. På den annen side, hvis du har eiendeler som du vil beholde i andre kataloger, kan du også legge dem til importbanen ved å redigere config.rb:
ruby sprockets.append_path '/ noen / andre / assets_folder /'
I dette eksemplet er andre eiendeler i kilde / noen / andre / assets_folder / other.css er også på Middleman's disposisjon via denne banen. Det samme gjelder .js filer også.
Middleman kommer med et par praktiske prosjektmaler som du bør vite om. Disse malene gir deg et godt utgangspunkt når du starter en ny Middleman-app. Du kan også legge til disse malene når som helst senere:
Du kan bruke dem som dette, via kommandolinjen:
bash middleman init your_fancy_app --template = smacss Malen vil gi deg alle filene og mappene den trenger. Hvis du allerede har en app og vil legge til en mal, bruker du samme kommando uten å nevne appens navn. Samme avtale:
bash middleman init --template = smacss
Nå kommer min favoritt del av Middleman. Det er veldig greit å bygge dine egne maler og gjenbruk dem når du vil. Du starter med å opprette en ~ / .Middleman mappe i rotkatalogen din (ikke glem punktet foran navnet). Innenfor denne katalogen lager du nye mapper for maler. For eksempel /.middleman/podcast ville være en podcast mal. Deretter fyller du denne podcastdirktory med alle filene og mappene du trenger. Hvis du for eksempel vil ha flere stilark til din Middleman-app, må du simulere Middleman's filepath for å gjøre det super enkelt å bruke dem.
I skjermbildet nedenfor har jeg utarbeidet et dummyeksempel som har et par filer som jeg kanskje trenger for hvert prosjekt plassert i en "bourbon" -mappe. Nå har jeg en bourbon mal.
Siden jeg simulerte Middlemans filstruktur, vil disse stilarkene dukke opp akkurat der jeg trenger dem etter at jeg startet denne malen. Mine filer er nå under / SOURCE / stil og også klar til å bli importert til min /source/stylesheets/all.css.scss fil.
Siden jeg allerede har gjort mine malestiler delvise, er det som vanlig. Her er min kilde / stylesheets / all.css.scss:
css @ import 'bourbon_mixins / mixins'; @import 'bourbon_neat / grids'; @import 'bourbon_refills / cards'; ...
Ferdig! En ting du bør være forsiktig med skjønt: når vi bruker mellommann bygge å lage vår nye bygge katalog disse filene vil bli absorbert av all.css og ingen av bourbon malmappene vil dukke opp der. Men hvis du glemmer å ha en ledende understrekning i filnavnene dine for disse stilene, overføres den komplette mappen til /bygge, sammen med respektive .css-filer. De @importere uttalelser i all.css.scss vil heller ikke gjøre forskjell i det tilfellet.
Hvis du har massevis av maler og bare vil sjekke listen for et navn, kan du bruke følgende kommando:
"bash middleman init -help
"
Hvis du vil gjenoppfinne hjulet, ta en titt på disse åpnede maler. Hvis du aldri har spilt mye med maler, anbefaler jeg at du starter en dummy-app og tar dem til et spinn. Se hvilke filer som blir opprettet eller overskrevet. Poke rundt litt. Deretter bygger du en dummy-mappe med et par Sass-filer for en mal under ~ / .Middleman og se hva som skjer når du starter den malen. Ingenting slår læring ved å gjøre disse små eksperimenter underveis!
Jeg tror du er nå mer enn klar til å begynne å bygge en liten app med Middleman. Det er noen ting igjen for deg å lære på egen hånd, men jeg har presentert deg med de viktigste stykkene i puslespillet.
Middleman er mye moro og et godt valg teknologi-klokt. Den er kraftig, enkel å bruke og har en enkel API som er nybegynner vennlig; det er alt som betyr noe for nå. Ha det gøy!
