Share
Deze tweede tutorial over het bouwen van statische websites met Middleman duikt een beetje dieper in het raamwerk. Tegen het einde zou je genoeg moeten weten om je eigen project helemaal opnieuw te kunnen bouwen. We behandelen onderwerpen zoals gegevensbestanden, mooie URL's, projectsjablonen en de Asset-pipeline, dus laten we vastlopen in!
Nadat u de eerste zelfstudie al hebt gevolgd, hebt u dus al geleerd hoe u met gegevens kunt spelen; voorkant materie opgeslagen in de drievoudig-koppelteken afgebakende secties van individuele pagina's. U kunt ook afzonderlijke gegevensbestanden in YAML of JSON schrijven en deze in een map "/ data" plaatsen. Dit is handig als u complexere sites hebt met gegevens die zelden veranderen en waar u niet wilt dat die gegevens rechtstreeks in uw HTML behouden blijven.
Laten we zeggen dat je het recht hebt om alle James Bond-films te verkopen. We zouden een lijst van deze in een gegevensbestand kunnen zetten en deze volgens ons kunnen herhalen. Als we die gegevens moeten wijzigen of bijwerken wanneer een nieuwe film beschikbaar is, hoeft u die wijziging alleen toe te passen in uw .YAML of .json data bestand. Ik zou het niet aanbevelen aan het doen dat voor gegevens die op welke manier dan ook ingewikkeld zijn; het is te doen, maar voelt heel dubieus en verkeerd.
Dit is bijvoorbeeld wat een /data/bond.yaml-bestand eruit zou kunnen zien:
robijn films: - titel: "Dr. Nee" jaar: "1962" tekst: "John Strangways, de Britse inlichtingendienst (SIS), hoofd van Jamaica, wordt gedood. Als reactie hierop is de Britse agent James Bond - ook wel bekend als 007 - verzonden naar Jamaica om de omstandigheden te onderzoeken.Tijdens zijn onderzoek ontmoet Bond Quarrel, een visser uit Cayman, die samen met Strangways rond de nabijgelegen eilanden had gewerkt om minerale monsters te verzamelen.Een van de eilanden was Crab Key, de thuishaven van het teruggetrokken Dr. " afbeelding: "bond_movie_01.png" - titel: "From Russia with Love" jaar: "1963" tekst: "SPECTLE's deskundige planner Kronsteen bedenkt een complot om een Lektor-cryptografisch apparaat van de Sovjets te stelen en het aan hen terug te verkopen, terwijl veeleisende wraak op Bond voor het doden van hun agent Dr. Nee, de ex-SMERSH-agent Rosa Klebb heeft de leiding over de missie en werft Donald "Red" Grant aan als een huurmoordenaar en Tatiana Romanova, een cipher-klerk bij het Sovjetconsulaat in Istanbul, als het onwetende lokaas ." afbeelding: "bond_movie_02.png" - titel: "Goldfinger" jaar: "1964" tekst: "Bond krijgt opdracht om edelmetaalhandelaar Auric Goldfinger te observeren: hij ziet dat Goldfinger vals speelt met kaarten en hem tegenhoudt door zijn werknemer af te leiden, die vervolgens wordt vermoord door De Koreaanse knecht van Goldfinger, Oddjob, krijgt de opdracht om Goldfingers goudsmokkel te onderzoeken en hij volgt de dealer naar Zwitserland, Bond wordt gevangen genomen wanneer hij de fabriek van Goldfinger bezoekt en gedrogeerd is, hij wordt naar de studiefokkerij in Kentucky gebracht en wordt gevangengenomen. getuige zijn van de ontmoeting van Goldfinger met de Amerikaanse maffiosi, die het materiaal hebben meegenomen dat hij nodig heeft voor een operatie om Fort Knox te beroven. ' afbeelding: "bond_movie_03.png" ...
Voer vervolgens als volgt uit in source / bond-movies.html.erb:
"html
<%= movie.text %>
"
Een van de voordelen van deze gegevensbestanden is dat ze veilig zijn. Nog beter, jouw /gegevens directory met alle YAML- of JSON-gegevens wordt niet naar uw live server gepusht. Tijdens de bouwfase worden uw gegevens lokaal in uw sjablonen geïnjecteerd voordat deze worden geïmplementeerd. Daarna zijn de gegevens in uw weergaven gewoon statische HTML. Best wel gaaf!
Hier een woord over het benoemen van conventies. Wanneer u gegevensbestanden in een "gegevens" -directory hebt, krijgt u toegang tot een gegevens voorwerp. Middleman maakt dan "objecten" voor elke .YML, .YAML of .json bestand dat u kunt openen via de inital gegevens voorwerp door het aan te hangen. U hebt dan toegang tot de kenmerken die u hebt opgeslagen. In ons geval hebben we een films YAML "object" met de attributen titel, jaar, tekst en beeld.
"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 %>"
Als je submappen hebt, moet je ze gewoon aanpassen. Stel dat u uw databestand met bond-films onder a hebt spy_movies directory (bijvoorbeeld: /data/spy_movies/bond.yaml) Je zou nu toegang hebben zoals:
html <%= data.spy_movies.bond.movies.title %>
Ten slotte zou ik moeten toevoegen dat het opslaan in JSON misschien de voorkeur verdient boven sommige mensen, maar alle overtollige komma's, haakjes en beugels geven me de schuld om eerlijk te zijn. Niet alleen in databestanden, maar ook in frontmatter-secties. Het is aan jou wat je het beste uitkomt, zie het zelf:
some_file.yaml:
plain bond_girls: - Strawberry Fields - Jill Masterson - Tiffany Case
some_file.json:
javascript "bond_girls": ["Strawberry Fields", "Jill Masterson", "Tiffany Case"]
Als je een bestand hebt zoals source / bond-movies.html.erb zal het eindigen als http://appname.com/bond-movies.html. Tijdens het bouwproces verliezen we de extensie ".erb" en eindigen met de laatste ".html" -versie van die pagina die in de URL wordt gespiegeld. Dat is goed, normaal spul. Voor liefhebber-URL's zoals http://appname.com/bond-movies moeten we een beetje werken.
U moet de activeren Directory-indexen extensie in uw config.rb. Hiermee wordt een map gemaakt voor elk .html-bestand. Gedurende tussenpersoon bouwen de voltooide pagina eindigt als het indexbestand van die map, wat betekent dat de extensie als een indexbestand niet in de URL hoeft te worden weergegeven. Als je oplet, heb je dit misschien al aan het werk gezien met het standaardindex.html-bestand dat voor elk Middleman-project als bestemmingspagina wordt gemaakt. Start uw server op en overtuig uzelf.
In config.rb:
ruby activeren: directory_indexes
Laten we kijken wat er daarna is gebeurd tussenpersoon bouwen naar je bond-movies.html.erb bestand als je die extensie hebt geactiveerd. Middleman heeft een map "build / bond-movies" gemaakt en je oorspronkelijke bestandsnaam is gewijzigd in index.html (build / bond-movies / index.html).
Dit is de Shell-uitvoer:
bash maak build / bond-films / index.html
Er is echter een kleine waarschuwing. Voordat u mooie URL's activeerde, kon u erop vertrouwen dat u het activapad gebruikte. Nu met directory-indexen op hun plek moet je assets met hun volledige, absolute pad leveren. Dus een afbeelding alleen bij de naam bellen, zal niet meer vliegen.
Als u om wat voor reden dan ook het gedrag van die extensie voor een bepaald bestand wilt overschrijven.
In config.rb:
ruby pagina "/bond-movies.html",: directory_index => false
Dit is de Shell-uitvoer als je deze wijzigt voor bond-movies.html.erb:
bash maak build / bond-movies.html verwijder build / bond-movies / index.html verwijder build / bond-films
Nu is de URL weer voor dat bestand weer normaal. (Http://appname.com/bond-movies.html)
Bovendien kunt u ervoor kiezen om het naamgevingsschema van indexindexering lokaal in de frontmatter van uw individuele pagina's op te geven:
directory_index: false -
... "
Als je die structuur zelf wilt bouwen met mappen en hun respectieve indexbestanden, zal Middleman je niet lastig vallen. Het werkt op dezelfde manier en de tussenpersoon negeert ze als je die aanpak combineert en vergelijkt.
Ik zou hier graag mee door willen gaan en alleen de stukken laten zien waarvan ik denk dat ze echt relevant zijn.
De "asset pipleline" is Rails lingo geïmporteerd in Middleman. Onder de motorkap doet een edelsteen genaamd Sprockets al het zware werk. Het helpt u bij het omgaan met afhankelijkheidsbeheer, het combineren en verkleinen van activa, waardoor u uw vermogen aanzienlijk kunt afbouwen. Er zijn ook een paar hulpmethoden beschikbaar om kernwoorden te achterhalen. Bovendien krijg je de mogelijkheid om Sass- en CoffeeScript-code te schrijven, direct uit de doos.
Concatenatie is een van de belangrijkste kenmerken van de asset-pipeline. In plaats van een groot aantal afzonderlijke HTML-verzoeken voor elk CSS- en JS-bestand, kunt u ze drastisch verminderen door ze samen te voegen in één of een aantal bestanden. Hoe minder verzoeken u indient, hoe sneller uw toepassing wordt geladen.
Standaard zal Sprockets alle JavaScript-bestanden samenvoegen tot één .js het dossier. Na tussenpersoon bouwen, dit bestand is te vinden onder /build/javascripts/all.js. Hetzelfde geldt voor je CSS. Na het buildproces heb je alle Sass-bestanden samengevoegd in build / stylesheets / all.css.
U combineert uw JavaScript-elementen met behulp van partials (waarvan de bestandsnamen beginnen met een onderstrepingsteken) en vervolgens vereisen ze helemaal bovenaan in je bron / javascripts / all.js-bestand. Bestanden met een toegevoegde extensie .coffee werken precies hetzelfde. Bestelling is belangrijk voor dit proces.
Hier is bijvoorbeeld de top van source / javascript / all.js:
javascript // = vereisen "_jquery" // = vereisen "_lib_code" // = vereisen "_animations"
Wanneer je een kijkje neemt in je nieuwe /bouwen map, je vindt er maar één .js-bestand onder / javascripts.
Voor uw Sass-code is het verhaal fundamenteel hetzelfde, maar u moet Sass's gebruiken @importeren voor het importeren van uw partials in plaats van vereisen van Sprockets. Plaats de "vereiste" bestanden opnieuw helemaal bovenin, deze keer aandacht te besteden aan de bestelling. In tegenstelling tot het vereisen van JavaScript-partities, laat u het onderstrepingsteken achter wanneer u Sass-partials importeert. Bijvoorbeeld
css @import 'normaliseren'; @import 'header'; @import 'navigatie'; @import 'footer';
Een ander cool kenmerk van kettingwielen is compressie, ook wel 'minificatie' genoemd. Dit proces snijdt veel van het vet weg, zoals het wegwerken van onnodige witruimte en opmerkingen. Mensen noemen dit proces ook lelijk (en er is natuurlijk een juweel dat uglifier wordt genoemd en dat dit prachtig doet). In vergelijking met JavaScript asset minification is CSS-uglification niet zo gecompliceerd.
Om aan de slag te gaan, moet u het volgende toevoegen aan uw config.rb-bestand:
ruby configureren: bouwen doen activeren: minify_css activeren: minify_javascript beëindigen
Eigenlijk hoef je alleen maar deze lijnen onder je te uncommenteren :bouwen blok. De volgende keer dat u gebruikt tussenpersoon bouwen de items in uw / build-map zijn allemaal uitgehold en slank. Hieronder staan twee kleine voorbeelden hoe deze code er uiteindelijk uit ziet:
Minified CSS onder /build/stylesheets/all.css:
css body background-color: # d0e4fe h1 color: orange; text-align: center p font-family: "Times New Roman"; font-size: 20px
Gemixte JS onder /build/javascripts/all.js:
javascript switch ((nieuwe datum) .getDay ()) case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Woensdag"; pauze; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"
Zonder de asset-pipleline zou u uw eigen ding moeten opzetten om uw JavaScript en CSS te schrijven via talen van hoger niveau zoals CoffeeScript en Sass.
Voor uw Sass-bestanden heeft u vier helpers tot uw beschikking:
Accentsconagua
image_path ()font_path ()afbeelding URL()font_url ()Zoals je conventies tot nu toe hebt gevolgd, kun je deze helpers gebruiken om het juiste pad naar je items in te voegen.
In een Sass-bestand, bijvoorbeeld:
"css image_path ('logo.png') # => images / logo.png
image_path ('nested_folder / some.png') # => images / nested_folder / some.png "
De activapijplijn gebruikt importpaden via Sprockets voor uw activa. Standaard : js_dir en : css_dir zijn al aan dat pad toegevoegd. Dat betekent dat bestanden worden ingestuurd / Source / javascripts en / Source / stijlbladen zijn beschikbaar en worden automatisch geïmporteerd. Aan de andere kant, als u items hebt die u in andere mappen wilt bewaren, kunt u ze ook toevoegen aan het importpad door config.rb te bewerken:
ruby sprockets.append_path '/ some / other / assets_folder /'
In dit voorbeeld andere activa in source / some / other / assets_folder / other.css staan via dit pad ook bij Middleman ter beschikking. Hetzelfde geldt voor .js bestanden ook.
Middleman wordt geleverd met een aantal handige projectsjablonen die je in ieder geval moet kennen. Deze sjablonen geven u een goed startpunt wanneer u een nieuwe Middleman-app start. U kunt deze sjablonen later op elk gewenst moment toevoegen:
Je kunt ze op deze manier gebruiken via de opdrachtregel:
bash middleman init your_fancy_app --template = smacss In de sjabloon vindt u alle bestanden en mappen die nodig zijn. Als u al een app heeft en een sjabloon wilt toevoegen, gebruikt u dezelfde opdracht zonder de naam van uw app te vermelden. Dezelfde deal:
bash middleman init --template = smacss
Nu komt mijn favoriete deel van Middleman. Het is supereenvoudig om je eigen sjablonen te maken en deze opnieuw te gebruiken wanneer je maar wilt. U begint met het maken van een ~ / .Middleman map in uw hoofdmap (vergeet de stip niet voor de naam). In die map maakt u nieuwe mappen voor uw sjablonen. Bijvoorbeeld /.middleman/podcast zou zijn podcast sjabloon. Vervolgens vult u deze podcast-directory in met alle bestanden en mappen die u nodig hebt. Als u bijvoorbeeld extra stylesheets beschikbaar wilt hebben voor uw Middleman-app, moet u het bestandspad van Middleman simuleren om het supereenvoudig te maken om ze te gebruiken.
In de onderstaande schermafbeelding heb ik een dummy-voorbeeld voorbereid met een aantal bestanden die ik misschien nodig heb voor elk project dat in een map "bourbon" wordt geplaatst. Nu heb ik een bourbon-sjabloon.
Omdat ik de bestandsstructuur van Middleman heb gesimuleerd, zullen deze stylesheets precies weergeven waar ik ze nodig heb nadat ik die sjabloon heb geïnitieerd. Mijn bestanden zijn nu onder / Source / stijlbladen en ook klaar om te worden geïmporteerd in mijn /source/stylesheets/all.css.scss het dossier.
Omdat ik al gedeelten van mijn sjabloonstijlen heb gemaakt, is het gewoon weer normaal. Hier is mijn bron / stylesheets / all.css.scss:
css @import 'bourbon_mixins / mixins'; @import 'bourbon_neat / grids'; @import 'bourbon_refills / cards'; ...
Afgewerkt! Eén ding moet je echter wel opletten: wanneer we gebruiken tussenpersoon bouwen om ons nieuw te maken bouwen map worden deze bestanden geabsorbeerd door all.css en geen van de bourbon-sjabloonmappen zal daar verschijnen. Als u echter vergeet om een toonaangevend onderstrepingsteken te hebben in uw bestandsnamen voor deze stijlen, wordt de volledige map overgezet naar /bouwen, samen met de respectieve .css-bestanden. De @importeren statements in all.css.scss maken in dat geval ook geen verschil.
Als u een heleboel sjablonen hebt en u wilt gewoon de lijst opzoeken voor een naam, dan kunt u de volgende opdracht gebruiken:
"bash middleman init -help
"
Als u het wiel opnieuw uit wilt vinden, bekijk dan deze open source sjablonen. Als je nog nooit veel met sjablonen hebt gespeeld, raad ik aan om een dummy-app te starten en ze te gebruiken. Bekijk welke bestanden worden gemaakt of overschreven. Poke een beetje rond. Bouw vervolgens een dummy-map met een paar Sass-bestanden voor een sjabloon onder ~ / .Middleman en zie wat er gebeurt als u die sjabloon start. Er gaat niets boven leren door deze kleine experimenten te doen!
Ik geloof dat je nu meer dan klaar bent om een kleine app te gaan bouwen met Middleman. Er zijn nog een paar dingen over die je alleen kunt leren, maar ik heb je de belangrijkste stukjes van de puzzel gepresenteerd.
Middleman is heel veel plezier en een goede keuze qua technologie. Het is krachtig, gemakkelijk te gebruiken en heeft een eenvoudige API die beginnersvriendelijk is; dat is alles wat er nu toe doet. Veel plezier!
