Share
Dit is deel één van een kleine serie over Middleman, "een statische site-generator met behulp van alle snelkoppelingen en hulpmiddelen in de moderne webontwikkeling". De eerste twee tutorials behandelen de basisbeginselen, waarna we wat we hebben geleerd in praktijk brengen met een praktisch project. Middleman vereist het gebruik van Ruby, maar aarzel niet om verder te lezen als dit je vreemd is; deze serie is helemaal newbie-vriendelijk.
Wat is er allemaal aan de hand met statische sites? Wel, ze zijn snel, vrij eenvoudig in te stellen en licht in gewicht. Omdat u niets aan databases gerelateerd bent, zijn statische sites behoorlijk betrouwbaar en snel. HTML, CSS en indien nodig JS - dat is alles.
Veel mensen gebruiken statische websites om hun blogs en persoonlijke pagina's in te stellen. Bestemmingspagina's die zwaar door het verkeer worden geraakt, zijn ook een goede kandidaat. HealthCare.gov van de regering-Obama gebruikte op bekende wijze Jekyll, een andere statische site-generator, voor hun site. Als u iets snel en gemakkelijk nodig hebt, dat uit de doos kan schalen, kunnen statische sites geweldig zijn. Vooral omdat je ze gratis op GitHub Pages of Heroku kunt hosten.
Ongetwijfeld begon de heupen van de hele statische site een paar jaar geleden toen Jekyll langs kwam. Natuurlijk zijn statische sites zo oud als de eerste "Hallo Wereld!" Van Sir Tim Berners-Lee, maar in de afgelopen 15 jaar werden database-ondersteunde apps "alles wat telt". Een paar jaar geleden had een van de medeoprichters van GitHub een betere manier nodig om blogs te schrijven en kwam hij met Jekyll - deze hippe statische site-generator voor "Bloggen als een hacker". Ik heb het een paar keer gebruikt en heb alleen goede dingen te melden. Het kernteam is ook geweldig. Hoe dan ook, voor deze serie kwamen mijn redacteur en ik overeen dat het interessanter zou zijn om Middleman te dekken. Het is misschien eerlijk om te zeggen dat Middleman een beetje minder "blog-bewust" out of the box is, maar niettemin even krachtig en geweldig qua kwaliteit..
Middleman gebruikt Ruby en biedt een behoorlijk uitgebreide reeks functies om coole dingen te bouwen. Als je ooit Rails of Sinatra hebt gebruikt, voel je je meteen thuis. Het lijkt erop dat Middleman en Jekyll de go-to-opties zijn voor statische sites in de Ruby-community. Ik heb ook gehoord dat steeds meer ontwerpers beweren dat ze ze graag gebruiken voor prototyping en voor het opzetten van hun eigen persoonlijke pagina's. Wat veel van deze statische site-frameworks gemeen hebben, is dat ze vrij eenvoudig te gebruiken zijn.
In dit artikel ga ik ervan uit dat je op zijn minst een bent beetje geïnteresseerd in Ruby, en laat het op je systeem installeren. Als je hulp nodig hebt, kijk dan eens naar Ruby voor nieuwkomers: Ruby installeren en Aan de slag gaan met Andrew Burgess.
Weten hoe je moet omgaan met RubyGems is ook nodig, en nogmaals, Andrew Burgess 'Ruby voor nieuwkomers: werken met edelstenen zal je helpen aan de slag te gaan als dat nodig is. Ik zal mijn best doen om niet met programmeerconcepten over je kop te gaan, maar ik zal niet ingaan op programmeerbasics zoals loops, codeblokken en dergelijke. Voor de nieuwkomers onder jullie, maak je geen zorgen, Middleman heeft niet zoveel bewegende delen, en ik zal laten zien hoe gemakkelijk het is om te leren.
Dus jij hebt Ruby en RubyGems onder je riem? Geweldig, dan zijn we goed om te gaan.
Open uw terminal en voer in:
bash gem installeert tussenpersoon
Als je de toelating wordt ontzegd om dit te doen, moet je de opdracht voorafvoegen met sudo en voer uw systeembeheerderwachtwoord in. Nadat dit proces is voltooid, kun je via de opdrachtprompt een paar handige tussenpersonen gebruiken.
Met deze opdracht wordt een nieuw project gestart. Je moet hem de naam van je app geven en druk op Enter.
bash middleman init your_fancy_app Er zijn ook aanvullende argumenten nodig, zoals de sjabloon waarmee u wilt beginnen. Dit maakt het erg handig om uw apps vanaf het begin aan te passen met sjablonen, waardoor u de repetitieve installatietaken aanzienlijk verkort! We zullen meer bespreken over sjablonen in een later zelfstudie.
bash middleman init your_fancy_blog --template = blog
bash middleman init your_fancy_mobile_app --template = mobiel
Middleman wordt geleverd met een lokale server voor uw ontwikkeling. Als je het opstart, kun je je site zien http: // localhost: 4567 / **. Als u zojuist ** tussenpersoon invoert zonder extra argument, zal dit ook uw server activeren. Zet je server uit met CTRL-c.
Als u eenmaal iets heeft dat u klaar wilt zetten op een server die op het internet is gericht, moet u dat doen bouwen jouw site. Dit betekent dat wat je ook hebt voorbereid in je /bron map wordt verwerkt en de laatste uitvoer wordt uitgevoerd naar de /bouwen map die tussenpersoon ook voor u maakt. Al uw bestanden die preprocessors gebruiken zoals Slim, Haml, Sass, CoffeeScript, zullen in hun respectieve tegenhangers worden verwerkt en in uw / build directory worden geplaatst.
Zodra uw site klaar is voor het internet, zet deze opdracht uw /bouwen map op uw webserver. Elke update die u maakt, doorloopt dit proces.
Doe meteen een plezier en activeer LiveReload om uw pagina's automatisch te vernieuwen na wijzigingen in uw HTML-, Sass- of JS-bestanden. Dit is van groot gemak tijdens de ontwikkeling - u zult er geen spijt van krijgen! Middleman biedt deze dagen LiveReload uit de doos - je hoeft alleen maar toe te voegen
robijn edelsteen 'tussenpersoon-livereload'
aan jouw Gemfile en reageer op de volgende regel config.rb:
ruby # Herlaad de browser automatisch wanneer bestanden veranderen activeren: livereload
Dan bundel je Middleman
bash bundle #or bundle exec middleman
Laten we aan de slag gaan /bron en /bouwen mappen. Tussen hen is de scheidingslijn die uw ontwikkelings- en productiesecties scheidt. Wanneer u uw lokale webserver gebruikt voor ontwikkeling, wordt / source gebruikt om uw app te bedienen. De map / build wordt gebruikt door uw niet-lokale servers om uw statische pagina's weer te geven. / build wordt elke keer dat je het gebruikt aangemaakt tussenpersoon bouwen in uw opdrachtregel. Daarom moet je oppassen dat je niet per ongeluk je tijd besteedt aan het coderen / bouwen omdat dit werk na het bouwproces verdwijnt. Over het algemeen wordt verondersteld dat al je ontwikkeling plaatsvindt in / bron.
Het buildproces maakt de statische sites die u door uw server wilt laten beheren. Elk bestand in uw /bron map wordt verwerkt en vervolgens opgeslagen /bouwen. Zoals eerder vermeld, zullen uw Sass, CoffeeScript, Slim / Haml en partials verwerken tot hun verraderlijke tegenhangers. Alle lay-outs worden ook samengevoegd. Als u compressie voor deze bestanden hebt geactiveerd, is dit het moment waarop ze ook worden "uitgecontroleerd". Tijdens deze hele shabang wordt de map / build opnieuw gekneed door bestanden te verwijderen die geen verwijzing meer in / bron hebben. Gedurende tussenpersoon bouwen, alle wijzigingen die u in bestanden in / source hebt aangebracht, activeren een regeneratie van nieuwe corresponderende statische bestanden voor / build.
Het implementatieproces is de laatste stap. Met de /bouwen directory op zijn plaats heb je alles wat je nodig hebt om je app daar te plaatsen. Mijn aanbeveling is om dit vroeg te doen om te voorkomen dat je voor verrassingen komt te staan.
Laten we eens kijken naar de basisstructuur van een Middleman-app. De belangrijkste componenten zijn:
Zoals je hieronder kunt zien, gaat de meeste Jazz naar de /bron map. Wat ik leuk vind aan Middleman-apps is hun eenvoudige organisatie. Navigeren door de documentstructuur is eenvoudig, zelfs voor beginners.
Als u niet tevreden bent met de naamgeving van sommige van deze mappen, kunt u dat in uw configuraties wijzigen (config.rb). Dezelfde namen worden gebruikt voor uw voltooide /bouwen map.
"ruby set: css_dir, 'custom_folder_name'
set: js_dir, 'custom_folder_name'
set: images_dir, 'custom_folder_name'
Zodra u uw server heeft uitgevoerd, kunt u andere opties bekijken om Middleman rechtstreeks in uw browser te configureren: http: // localhost: 4567 / __ tussenpersoon / config /. Niet allemaal kunnen ze zinvol zijn, of zelfs belangrijk om te weten in dit stadium. Geef het een blik en een mentale bladwijzer is volledig voldoende voor nu.
Eén die je rent tussenpersoon bouwen je kunt in de /bouwen map. Alle eenvoudige HTML-, CSS- en JS-bestanden die u nodig heeft om uw statische site te bedienen.
Dat is vrijwel alles wat je moet weten om te beginnen en jezelf te oriënteren.
Suggestie: Bij deze pont zou het heel logisch zijn als je zelf een testapp gaat samenstellen. Kijk rond en krijg een gevoel hoe de dingen zijn georganiseerd en hoe de stukken in elkaar passen.
De term Front Matter komt van boekpublicatie en verwijst naar de informatie aan de voorkant van een boek. In het geval van statische websitebestanden verwijst het naar blokken met informatie die zijn opgeslagen in YAML. Op elke pagina kunt u variabelen hebben die direct bovenaan kunnen worden opgeslagen binnen een leidend en een volgend drievoudig koppelteken. Hier is bijvoorbeeld de top van een fictief bestand met de naam some.html.erb.
layout: Bond-titel: Favoriete band meisje naam datum: 2015-11-09 tags: bond, 007
some_secret: ik zal niet worden weergegeven totdat je mij gebruikt.
bond_girls: - Strawberry Fields - Jill Masterson - Tiffany Case
"
De YAML-variabelen zien er net uit als een hash. U kunt toegang krijgen tot die lokale gegevens via de huidige pagina voorwerp:
ruby current_page.data.some_variable
U gebruikt dit vaak om tags, datums, titels en configuratieopties op te slaan, zoals de lay-out die u voor bepaalde pagina's wilt gebruiken. Voor materie is een YAML-winkel voor uw variabelen. Je kunt JSON ook gebruiken als je daar de voorkeur aan geeft. Zie het als een plaats voor het plaatsen van gegevens die normaal gesproken in een database zouden kunnen voorkomen. Ik zal de verschillende opties en gebruiken bespreken wanneer ze opduiken.
Dit is een goede gelegenheid om kort over ERB te gaan. Met ERB kunt u dynamische sjablonen maken die ingesloten code bevatten. Uw bestandsnamen moeten een .erb extensie en u moet uw code in de volgende twee "containers" plaatsen.
Voor code die geëxpliciteerd maar niet "afgedrukt" wordt naar de pagina die u gebruikt:
html <% %>
Zie het als "alleen berekenen".
Anders moet u voor retourwaarden die u wilt zien verschijnen op de pagina ook een gelijkteken toevoegen. Dat is het.
html <%= %>
De concepten van lay-outs en partials zijn nauw met elkaar verbonden. Ik zal je een kleine wervelstournee geven voor het geval je nog nooit met Rails, Sinatra of iets dergelijks hebt gespeeld. Ik denk dat ik moet beginnen lay-outs eerste.
Lay-outs bieden u de structuur om algemene markeringen te delen tussen verschillende pagina's, die tot dezelfde 'familie' van pagina's behoren. Het is een hulpmiddel om duplicatie te voorkomen en uw werk te versnellen. In plaats van overal hetzelfde HTML-skelet te schrijven, stelt u lay-outs samen voor specifieke use-cases. Populaire voorbeelden zijn twee verschillende lay-outs voor zowel een beheerder als een "normale" gebruiker. Ze hebben meestal een heel andere ervaring door naar de "zelfde" pagina te kijken.
Wanneer je een eenvoudige app voor tussenpersonen start, ontvang je automatisch een layout.erb bestand in source / lay-outs. Houd er rekening mee dat dit bestand eindigt op .erb en niet .html.erb. Lay-outs mogen niet naar HTML worden gerenderd en Middleman zal een fout genereren als u lay-outs met een extensie .html maakt. Als u een andere sjabloontaal zoals Slim of Haml gebruikt, kunnen lay-outs in plaats daarvan hun extensies bevatten. Zoals de standaard suggereert, moet je al je lay-outs in de / lay-outs map in bron.
Hier is een voorbeeld van source / layouts / layout.erb:
"html
"
Deze standaardlay-out is vrij barebones, maar biedt alles wat je nodig hebt om te beginnen. Laten we eens kijken:
En vanaf daar kunt u deze lay-out aanpassen aan al uw behoeften. Een potentieel verwarrend aspect voor Ruby newbies is de opbrengst zoekwoord: dit betekent alleen dat het de rest van de inhoud die u maakt doorloopt. Met andere woorden, opbrengst is een tijdelijke aanduiding voor uw weergaven die erin wordt weergegeven. Als dat concept u volledig vreemd is, vergeet dan niet om het voor nu niet aan te raken, anders werkt uw app mogelijk niet zoals verwacht. Wanneer je je eigen lay-outs maakt, heb je opbrengst daar is essentieel, anders wordt uw inhoud niet weergegeven. Je zult het snel onder de knie krijgen, dat beloof ik.
Als u verschillende lay-outs hebt gemaakt, kunt u per pagina opgeven welke lay-out u per pagina wilt gebruiken. Laten we zeggen dat je een speciale lay-out hebt om gebruikers te verwelkomen die wat meer verkopen betreft. Hier hebben we welcome.html.erb.
layout: verkoop -
"
Als alternatief kunt u lay-outs in uw config.rb-bestand opgeven.
ruby-pagina "/welcome.html",: layout => "verkoop"
Als u dit niet voor elke pagina handmatig wilt doen, kunt u ze op één plek verzamelen. Nogmaals, in config.rb gebruik je een wildcard (** \ ***) om een aantal pagina's te verzamelen die dezelfde lay-out gebruiken.
ruby pagina "/ sales / *",: layout => "verkoop"
Persoonlijk vind ik het leuk om deze layout-info in de voorgrond te zetten. Het is heel expliciet en niet te repetitief. Als ik echter een hele hoop van hen had, zou ik liever de wildcard-benadering gebruiken.
Partials bieden u de mogelijkheid om weergavecode in te voegen die u kunt hergebruiken waar u maar wilt. U hoeft het alleen aan uw te vertellen uitzicht waar je een deel invoegt en het wordt daar precies weergegeven. Partials zijn een veel voorkomende techniek voor het opdrogen van uw code.
Zeer gebruikelijke voorbeelden zijn navbars, voetteksten en hoofdsecties, die u niet overal zou willen dupliceren. Bestanden voor partials beginnen met een onderstrepingsteken. Om te beginnen kun je ze onder zetten /bron. Uw lay-outs zijn een goede plaats om te beginnen met het verzamelen van code om uit te splitsen in gedeelten. Wanneer je iets vindt dat je opnieuw moet gebruiken, zullen deelpartijen een handige vriend zijn.
Hier is een voorbeeld van /source/layouts/layout.erb.
"html
<%= partial "head" %> <%= partial "navbar" %> <%= yield %> <%= partial "footer" %>"
En de gedeeltelijke bron / _head.html.erb:
"html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
Soms wilt u een gedeeltelijke extraheren, niet alleen om dubbel werk te voorkomen, maar om uw weergaven leesbaarder te maken. In de loop van de tijd zijn hoofdsecties erom bekend dat ze behoorlijk belast worden, bijvoorbeeld. Binnen hen kunt u hebben anders partials die alleen te maken hebben met stijl- of JS-bestanden.
U zult zich realiseren hoe handig gedeeltelijke delen zijn, wanneer u veranderingen kunt toepassen die door uw hele app rimpelen - waar u de gedeeltelijke ook hebt opgenomen. Het is niet nodig om een aantal bestanden te doorlopen om steeds dezelfde wijziging toe te passen.
Helpers zijn methoden die u voor veel dagelijkse taken in uw opvattingen kunt gebruiken. Ik geloof dat dit een pionier was in Rails land en al snel alomtegenwoordig werd voor web moderne webontwikkeling. U hebt al helpers met stylesheets en JavaScript-bestanden gezien. Er is veel meer waar dit vandaan komt.
Hier is onze /source/_head.html.erb gedeeltelijk opnieuw:
"html
<%= stylesheet_link_tag "normalize", "all" %> <%= javascript_include_tag "all" %>"
Deze helpers zijn bedoeld om u te helpen een schonere en beknoptere weergavecode te schrijven. In de onderstaande helperslijst vind je een hoop nuttige dingen die uit de doos komen. Je bent hier echter niet door beperkt. Schrijf uw eigen hulpmethoden in config.rb of verzamel ze afzonderlijk in een module.
Het werkt als volgt: in je config.rb maak je een helpers blokkeer en stop al je hulpmethodes erin. Dat is het. Nu hebben uw weergaven toegang tot hen.
Voorbeeld: /source/_navbar.erb.
"html
"
En in config.rb:
"Ruby helpers doen
def random_username "# lorem.first_name # lorem.last_name" einde
def random_image image_tag "# lorem.image ('30x40',: background_color => '333',: color => 'fff')" einde
einde"
Deze helpers kunnen van pas komen wanneer ik snel iets wil prototypen en ik wil vermijden dummy afbeeldingen en tekst zelf in te stellen. Over het algemeen moet je op code letten waar je meer beknopt wilt zijn of die je steeds opnieuw dupliceert. Helpers zijn daar vaak een goed thuis voor.
Binnen deze aangepaste helpers gebruikte ik andere Middleman-helpers om te creëren img tags door image_tag net als de lorem object voor enkele willekeurige gebruikersnamen en plaatsaanduidingen voor afbeeldingen. Deze Lorem-dingetjes kunnen een beetje aangepast zijn aan jouw behoeften.
Met behulp van de module-aanpak hebt u echter een apart bestand voor uw module nodig. Maak een "lib" -directory aan in je hoofdmap (hetzelfde niveau als "source" en "build") en maak een bestand voor je helpers.
Hier hebben we /lib/helpers.rb:
"ruby module PrototypingHelpers def random_image image_tag" # lorem.image ('300x400',: background_color => '333',: color => 'fff') "einde
def random_username "# lorem.first_name # lorem.last_name" end end "
Dan moet je je config.rb bestand laten weten dat je deze helpers wilt gebruiken:
robijn vereisen 'lib / helpers' helpers PrototypingHelpers
Boom! Je bent klaar om te rollen. Over het algemeen zou ik meteen beginnen met de moduleaanpak. Het voelt een stuk schoner voor mij, en je vermijdt het vervuilen van je configuratiebestand met te veel dingen.
Ik zou ook willen kijken naar uitvoerhelpers en content_for in het bijzonder, omdat ze een beetje verwarrend kunnen zijn voor nieuwkomers. Hiermee kunt u een heleboel inhoud vastleggen die u ergens anders kunt gebruiken. Het is een miniatuur gedeeltelijk soort. Ik zou persoonlijk meestal partieel gaan, maar zo nu en dan, wanneer je chirurgische veranderingen aan wilt passen, is dit handig om te weten:
Hier is index.html.erb:
"html <% content_for :navigation do %>
<% end %>
... "
En 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 %>
... "
Dan in layout.erb:
"html
<% if content_for?(:admin_javascript) %> <%= yield_content :admin_javascript %> <% else %> <%= javascript_include_tag "all" %> <% end %> <%= yield %> <%= partial "footer" %>"
De sleutel gebruikt yield_content die uw verzamelde inhoud van de individuele pagina in de lay-out plaatst - indien gevonden. Het is niet nodig om ze alleen met lay-outs te gebruiken. Gebruik als u dit een beetje meer betrokken wilt maken content_for? om te controleren op specifieke inhoudsblokken voordat u ze invoegt. Het is handig als u kleine aanpassingen wilt maken voor secties die slechts in geringe mate van elkaar verschillen. Het is geweldig dat u deze inhoud een beetje kunt opslaan als een configuratie op de relevante pagina's zelf en deze alleen kunt activeren wanneer dat nodig is. Je moet waarschijnlijk niet al te slim worden met deze dingen.
Een woord over de link naar helper die ik hierboven heb gebruikt. Dit is waarschijnlijk degene die je het vaakst tegenkomt. Je voedt de methode in feite een naam en een URL of pad waar deze link naar moet verwijzen. Ik heb het laatste deel vervangen door een tijdelijke aanduiding.
Hieronder vindt u een overzicht van welke helpers u direct ter beschikking staan. Ik denk dat de namen meestal voor zichzelf spreken en ik moet niet bespreken waar elk van deze je mee kan helpen. Maak een mentale bladwijzer van wat er allemaal te vinden is en kom later terug met de documentatie als ze u problemen geven.
Accentsconagua
labellink naarinput_tagfavicon_tagstylesheet_link_tagjavascript_include_tagcontent_forcontent_for?capture_htmlyield_contentconcat_contentform_taglabel_tagselect_tagsubmit_tagfield_set_tagtext_field_tagcheck_box_tagpassword_field_tagafknottenmeervoudig makenword_wrapescape_htmlsimple_formatjs_escape_htmltime_ago_in_wordsdistance_of_time_in_wordslorem.datelorem.wordlorem.namelorem.emaillorem.imagelorem.wordslorem.sentencelorem.last_namelorem.paragraphlorem.first_namelorem.paragraphsIk geloof dat dit een goede basis is om te beginnen met spelen met een speelgoed-app. Je moet een goed idee hebben van wat Middleman aanbiedt en hoe je door het raamwerk navigeert. In het volgende deel van deze serie gaan we verder en duiken een beetje dieper in het raamwerk. Het team van Middleman heeft geweldig werk geleverd met het ontwerpen van de API en met het eenvoudig houden van dingen.
Hopelijk kun je nu zien waarom dit framework in populariteit is toegenomen en waarom het een goede keuze is voor allerlei soorten statische projecten.
