Share
Dieses zweite Tutorial zum Erstellen statischer Websites mit Middleman taucht etwas tiefer in den Rahmen ein. Am Ende sollten Sie genug wissen, um Ihr eigenes Projekt von Grund auf zu erstellen. Wir werden Themen wie Datendateien, hübsche URLs, Projektvorlagen und die Asset-Pipeline behandeln, also bleiben wir dabei!
Nachdem Sie das erste Lernprogramm bereits absolviert haben, haben Sie bereits gelernt, mit Daten zu spielen. vordere Angelegenheit in den durch Dreifach-Bindestrich getrennten Abschnitten einzelner Seiten gespeichert. Sie können auch separate Datendateien in YAML oder JSON schreiben und sie in ein "/ data" -Verzeichnis legen. Dies ist nützlich, wenn Sie komplexere Sites mit Daten haben, die sich selten ändern, und wenn Sie diese Daten nicht direkt in Ihrem HTML-Code verwalten möchten.
Nehmen wir an, Sie haben das Recht, alle James Bond-Filme zu verkaufen. Wir könnten eine Liste von ihnen in eine Datendatei einfügen und sie in unserer Ansicht überarbeiten. Wenn wir diese Daten ändern oder aktualisieren müssen, wenn ein neuer Film verfügbar ist, müssen Sie diese Änderung nur in Ihrem Film anwenden .yaml oder .Json Datendatei. Ich würde es nicht empfehlen tun das für Daten, die in irgendeiner Weise komplex sind; es ist machbar, fühlt sich aber sehr unsicher und falsch an.
Zum Beispiel sieht eine /data/bond.yaml -Datei so aus:
Rubinfilme: - Titel: "Dr. No" Jahr: "1962" Text: "John Strangways, der Chef des britischen Geheimdienstes (SIS) in Jamaika, wird getötet. Der britische Agent James Bond - auch bekannt als 007 - ist darauf aufmerksam Nach Jamaika geschickt, um die Umstände zu untersuchen: Bond trifft mit Quarrel zusammen, einem Fischer aus Cayman, der mit Strangways in der Nähe der nahegelegenen Inseln zusammengearbeitet hatte, um Mineralien zu sammeln. " Bild: "bond_movie_01.png" - Titel: "From Russia with Love" Jahr: "1963" Text: "SPECTREs Experte Planer Kronsteen entwirft ein Komplott, um ein Lektor-Kryptographiegerät von den Sowjets zu stehlen und es ihnen zu verkaufen, während es sich rächt Nein, der ehemalige SMERSH-Mitarbeiter Rosa Klebb leitet die Mission und rekrutiert Donald "Red" Grant als Attentäter und Tatiana Romanova, eine Chiffre für das sowjetische Konsulat in Istanbul, als unwissenden Köder . " Bild: "bond_movie_02.png" - Titel: "Goldfinger" Jahr: "1964" Text: "Bond wird aufgefordert, den Goldbarren-Händler Auric Goldfinger zu beobachten: Er sieht Goldfinger, der Karten betrügt, und hält ihn davon ab, indem er seinen Mitarbeiter ablenkt, der von ihm getötet wird Goldfingers koreanischer Diener Oddjob. Bond wird angewiesen, Goldfingers Goldschmuggel zu untersuchen, und er folgt dem Händler in die Schweiz. Bond wird gefangen genommen, als er Goldfingers Anlage entdeckt und unter Drogen setzt, er wird zum Goldfinger-Gestüt in Kentucky gebracht und entkommt kurz davor Zeuge Goldfingers Treffen mit US-Mafiosi, die das Material für eine Operation mitgebracht haben, um Fort Knox auszurauben. " Bild: "bond_movie_03.png"…
Dann so in source / bond-movies.html.erb ausgeben:
"html
<%= movie.text %>
"
Ein Vorteil dieser Dateien ist, dass sie sicher sind. Noch besser deine /Daten Das Verzeichnis mit allen YAML- oder JSON-Daten wird nicht auf Ihren Live-Server übertragen. Während der Erstellungsphase werden Ihre Daten lokal in Ihre Vorlagen eingefügt, bevor sie bereitgestellt werden. Danach sind die Daten in Ihren Ansichten nur reines statisches HTML. Ziemlich cool!
Ein Wort zu Namenskonventionen hier. Wenn Sie Datendateien in einem "Daten" -Verzeichnis haben, erhalten Sie Zugriff auf eine Daten Objekt. Middleman erstellt dann "Objekte" für jeden .yml, .yaml oder .Json Datei, auf die Sie über den Anfang zugreifen können Daten Objekt durch Anketten. Sie haben dann Zugriff auf die von Ihnen gespeicherten Attribute. In unserem Fall haben wir eine Filme YAML "Objekt" mit den Attributen Titel, Jahr, Text und Bild.
"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 %>"
Wenn Sie Unterverzeichnisse haben, müssen Sie sie nur anpacken. Nehmen wir an, Sie haben Ihre Bondfiledatei unter a Spionagefilme Verzeichnis (zum Beispiel: /data/spy_movies/bond.yaml) Sie würden jetzt wie folgt darauf zugreifen:
html <%= data.spy_movies.bond.movies.title %>
Zum Schluss möchte ich noch hinzufügen, dass das Speichern in JSON einigen Leuten vorzuziehen ist, aber alle überflüssigen Kommas, Klammern und Klammern machen mich ehrlich gesagt abstoßend. Nicht nur in Dateien, sondern auch in Frontmatter-Abschnitten. Es liegt an Ihnen, was am besten zu Ihnen passt. Überzeugen Sie sich selbst:
some_file.yaml:
plain bond_girls: - Strawberry Fields - Jill Masterson - Tiffany-Fall
some_file.json:
Javascript "bond_girls": ["Strawberry Fields", "Jill Masterson", "Tiffany-Fall"]
Wenn Sie eine Datei wie source / bond-movies.html.erb haben, wird sie als http://appname.com/bond-movies.html enden. Während des Erstellungsprozesses verlieren wir die Dateierweiterung ".erb" und erhalten die endgültige ".html" -Version dieser Seite, die in der URL gespiegelt ist. Das ist in Ordnung, normales Zeug. Für schickere URLs wie http://appname.com/bond-movies müssen wir ein wenig arbeiten.
Sie müssen das aktivieren Verzeichnisindizes Erweiterung in Ihrer config.rb. Dadurch wird für jede HTML-Datei ein Ordner erstellt. Während Zwischenhändler bauen Die fertige Seite endet als Indexdatei dieses Ordners. Dies bedeutet, dass die Erweiterung der Indexdatei als Indexdatei nicht in der URL angezeigt werden muss. Wenn Sie darauf geachtet haben, haben Sie dies möglicherweise bereits bei der Arbeit mit der Standarddatei index.html gesehen, die für jedes Middleman-Projekt als Zielseite erstellt wird. Starten Sie Ihren Server und überzeugen Sie sich selbst.
In config.rb:
Ruby aktivieren: Directory_indexes
Mal sehen, was danach passiert ist Zwischenhändler bauen in Ihre bond-movies.html.erb-Datei, wenn Sie diese Erweiterung aktiviert haben. Middleman hat einen Ordner "build / bond-movies" erstellt und der ursprüngliche Dateiname wurde in index.html (build / bond-movies / index.html) geändert..
Hier ist die Shell-Ausgabe:
bash create build / bond-movies / index.html
Es gibt jedoch einen kleinen Vorbehalt. Bevor Sie hübsche URLs aktiviert haben, können Sie sich darauf verlassen, den Asset-Pfad zu verwenden. Jetzt müssen Verzeichnisse erstellt werden, die den vollständigen, absoluten Pfad enthalten. Wenn Sie ein Bild beispielsweise nur nach seinem Namen rufen, wird es nicht mehr fliegen.
Wenn Sie aus irgendeinem Grund das Verhalten dieser Erweiterung für eine bestimmte Datei überschreiben möchten, können Sie dies tun.
In config.rb:
Rubinseite "/bond-movies.html",: directory_index => false
Hier ist die Shell-Ausgabe, wenn Sie sie wieder für bond-movies.html.erb ändern:
bash create build / bond-movies.html entfernen build / bond-movies / index.html build / bond-movies entfernen
Nun ist die URL für diese Datei wieder normal. (http://appname.com/bond-movies.html)
Darüber hinaus können Sie das Namensverzeichnis für den Verzeichnisindex lokal im Frontmatter Ihrer einzelnen Seiten deaktivieren:
verzeichnis_index: falsch -
… "
Wenn Sie diese Struktur mit Ordnern und den entsprechenden Indexdateien selbst erstellen möchten, wird Middleman sich nicht mit Ihnen beschäftigen. Es funktioniert auf die gleiche Weise und der Zwischenhändler ignoriert sie, wenn Sie diesen Ansatz miteinander kombinieren.
Ich würde gerne mit dieser Version auf die Jagd gehen und nur die Stücke zeigen, die ich für relevant halte.
Die „Asset-Pipeline“ ist der in Middleman importierte Rails-Lingo. Unter der Motorhaube tut ein Edelstein namens Sprockets alle schweren Lasten. Es hilft Ihnen beim Umgang mit Abhängigkeiten, beim Kombinieren und Minimieren von Assets, wodurch Ihre Assets erheblich reduziert werden. Es stehen Ihnen auch einige Hilfsmethoden zur Verfügung, um Assets präzise zu referenzieren. Darüber hinaus haben Sie die Möglichkeit, Sass- und CoffeeScript-Code direkt aus der Box zu schreiben.
Verkettung ist eines der wichtigsten Merkmale der Asset-Pipeline. Anstatt für jede CSS- und JS-Datei viele separate HTML-Anforderungen zu haben, können Sie sie drastisch reduzieren, indem Sie sie in eine oder eine Handvoll Dateien verketten. Je weniger Anfragen Sie verursachen, desto schneller lädt Ihre Anwendung.
Standardmäßig drückt Sprockets alle JavaScript-Dateien in eine einzige .js Datei. Nach dem Zwischenhändler bauen, Diese Datei finden Sie unter /build/javascripts/all.js. Gleiches gilt für Ihr CSS. Nach dem Erstellungsprozess haben Sie alle Sass-Dateien in build / stylesheets / all.css zusammengefügt.
Sie kombinieren Ihre JavaScript-Assets, indem Sie partials (deren Dateinamen mit einem Unterstrich beginnen) und dann verwenden benötigen Sie befinden sich ganz oben in Ihrer source / javascripts / all.js-Datei. Dateien mit der Erweiterung .coffee funktionieren genauso. Ordnung ist für diesen Prozess wichtig.
Hier ist zum Beispiel der Anfang von source / javascript / all.js:
javascript // = erfordert "_jquery" // = erfordert "_lib_code" // = erfordert "_animations"
Wenn Sie einen Blick in Ihr neues werfen /bauen Verzeichnis finden Sie nur eine .js-Datei unter / Javascripts.
Für Ihren Sass-Code ist die Geschichte im Grunde dieselbe, aber Sie sollten Sass verwenden @einführen zum Importieren Ihrer Partials anstelle von benötigen von Kettenrädern. Platzieren Sie die "erforderlichen" Dateien erneut oben, und achten Sie dabei auf die Reihenfolge. Im Gegensatz zum Erfordernis von JavaScript-Partials müssen Sie beim Importieren von Sass-Partials den Unterstrich angeben. Zum Beispiel
css @import 'normalize'; @import 'header'; @import 'navigation'; @import 'footer';
Ein weiteres cooles Feature von Kettenrädern ist die Kompression, auch Minifizierung genannt. Bei diesem Vorgang wird viel Fett weggeschnitten, wie beispielsweise unnötige Leerzeichen und Kommentare. Die Leute nennen diesen Prozess auch "Verklärungsprozess" (und natürlich gibt es einen Edelstein namens "Uglifier", der dies sehr gut macht). Verglichen mit der JavaScript-Minimierung von JavaScript ist die CSS-Verschlüsselung nicht so kompliziert.
Um zu beginnen, müssen Sie Ihrer config.rb-Datei Folgendes hinzufügen:
ruby configure: build aktivieren: minify_css aktivieren: minify_javascript ende
Eigentlich müssen Sie nur diese Zeilen unter Ihrem Kommentar auskommentieren :bauen Block. Beim nächsten Mal verwenden Zwischenhändler bauen Die Assets in Ihrem / build-Ordner werden alle ungenau und schlank sein. Nachfolgend zwei kleine Beispiele, wie dieser Code tatsächlich aussieht:
Reduziertes CSS unter /build/stylesheets/all.css:
css body Hintergrundfarbe: # d0e4fe h1 Farbe: orange; Textausrichtung: Mitte p Schriftfamilie: "Times New Roman"; Schriftgröße: 20px
Minified JS unter /build/javascripts/all.js:
Javascript wechseln ((neues Datum) .getDay ()) Fall 0: Tag = "Sonntag"; Pause; Fall 1: Tag = "Montag"; Pause; Fall 2: Tag = "Dienstag"; Pause; Fall 3: Tag = "Mittwoch"; Pause; Fall 4: Tag = "Donnerstag"; Pause; Fall 5: Tag = "Freitag"; Pause; Fall; 6: Tag = "Samstag"
Ohne die Asset-Pipeline müssen Sie Ihr eigenes Ding einrichten, um JavaScript und CSS über höhere Sprachen wie CoffeeScript und Sass zu schreiben.
Für Ihre Sass-Dateien stehen Ihnen vier Helfer zur Verfügung:
Accentsconagua
Bildpfad()font_path ()Bild URL()font_url ()Da Sie bisher Konventionen befolgt haben, können Sie diese Helfer verwenden, um Ihren Assets den richtigen Verzeichnispfad voranzustellen.
In einer Sass-Datei zum Beispiel:
"css image_path ('logo.png') # => images / logo.png
image_path ('nested_folder / some.png') # => images / nested_folder / some.png "
Die Asset-Pipeline verwendet Importpfade für Ihre Assets über Kettenräder. Standardmäßig : js_dir und : css_dir sind bereits zu diesem Pfad hinzugefügt. Das bedeutet, dass Dateien eingefügt werden / source / javascripts und / source / stylesheets sind verfügbar und werden automatisch importiert. Wenn Sie jedoch Assets haben, die Sie in anderen Verzeichnissen aufbewahren möchten, können Sie sie auch dem Importpfad hinzufügen, indem Sie config.rb bearbeiten:
ruby sprockets.append_path '/ some / other / assets_folder /'
In diesem Beispiel sind andere Assets in source / some / other / assets_folder / other.css stehen auch Middleman auf diesem Weg zur Verfügung. Das gleiche gilt für .js Dateien auch.
Middleman enthält einige praktische Projektvorlagen, über die Sie zumindest Bescheid wissen sollten. Diese Vorlagen bieten Ihnen einen guten Ausgangspunkt, wenn Sie eine neue Middleman-App initiieren. Sie können diese Vorlagen auch später jederzeit hinzufügen:
Sie können sie wie folgt über die Befehlszeile verwenden:
bash middleman init your_fancy_app --template = smacss Die Vorlage enthält alle erforderlichen Dateien und Ordner. Wenn Sie bereits über eine App verfügen und eine Vorlage hinzufügen möchten, verwenden Sie denselben Befehl, ohne den Namen Ihrer App zu erwähnen. Gleiche Sache:
bash middleman init --template = smacss
Jetzt kommt mein Lieblingsteil von Middleman. Es ist sehr einfach, eigene Vorlagen zu erstellen und sie jederzeit wiederzuverwenden. Sie beginnen mit der Erstellung einer ~ /. Mittelsmann Ordner in Ihrem Stammverzeichnis (vergessen Sie nicht den Punkt vor dem Namen). In diesem Verzeichnis erstellen Sie neue Ordner für Ihre Vorlagen. Zum Beispiel /.middleman/podcast wäre ein Podcast Vorlage. Dann füllen Sie dieses Podcast-Verzeichnis mit allen Dateien und Ordnern, die Sie benötigen. Wenn Sie beispielsweise zusätzliche Stylesheets für Ihre Middleman-App zur Verfügung haben möchten, müssen Sie den Dateipfad von Middleman simulieren, um deren Verwendung zu vereinfachen.
In der Abbildung unten habe ich ein Dummy-Beispiel vorbereitet, das einige Dateien enthält, die ich möglicherweise für jedes Projekt benötige, das sich in einem "Bourbon" -Ordner befindet. Jetzt habe ich eine Bourbonvorlage.
Seit ich die Dateistruktur von Middleman simuliert habe, werden diese Stylesheets genau dort angezeigt, wo ich sie brauche, nachdem ich diese Vorlage initiiert habe. Meine Dateien sind jetzt unter / source / stylesheets und auch bereit, in meine importiert zu werden /source/stylesheets/all.css.scss Datei.
Da ich meine Vorlagenvorlagen bereits als Teilprodukte erstellt habe, ist es wie gewohnt. Hier ist meine Quelle / stylesheets / all.css.scss:
css @import 'bourbon_mixins / mixins'; @import 'bourbon_neat / grid'; @import 'bourbon_refills / cards';…
Fertig! Eine Sache, die Sie jedoch beachten sollten: Wann verwenden wir Zwischenhändler bauen um unser neues zu schaffen bauen Verzeichnis, in dem diese Dateien aufgenommen werden all.css und keiner der Bourbon-Vorlagenordner wird dort angezeigt. Wenn Sie jedoch vergessen, in Ihren Dateinamen einen führenden Unterstrich für diese Stile zu verwenden, wird der gesamte Ordner in diesen Ordner übertragen /bauen, zusammen mit den entsprechenden .css-Dateien. Das @einführen Anweisungen in all.css.scss machen auch in diesem Fall keinen Unterschied.
Wenn Sie eine Menge Vorlagen haben und die Liste nur nach einem Namen durchsuchen möchten, können Sie den folgenden Befehl verwenden:
"bash middleman init -help
"
Wenn Sie das Rad neu erfinden möchten, werfen Sie einen Blick auf diese Open-Source-Vorlagen. Wenn Sie noch nie viel mit Vorlagen gespielt haben, empfehle ich Ihnen, eine Dummy-App zu starten und sie für eine Runde mitzunehmen. Sehen Sie, welche Dateien erstellt oder überschrieben werden. Stöbern Sie ein bisschen herum. Dann erstellen Sie einen Dummy-Ordner mit ein paar Sass-Dateien für eine Vorlage unter ~ /. Mittelsmann und sehen, was passiert, wenn Sie diese Vorlage initiieren. Nichts geht über das Lernen durch diese kleinen Experimente!
Ich glaube, Sie sind jetzt mehr als bereit, mit Middleman eine kleine App zu erstellen. Es gibt ein paar Dinge, die Sie noch selbst lernen können, aber ich habe Ihnen die wichtigsten Teile des Puzzles vorgestellt.
Middleman macht viel Spaß und ist technisch gesehen eine gute Wahl. Es ist leistungsstark, einfach zu bedienen und verfügt über eine unkomplizierte API, die für Anfänger geeignet ist. das ist alles, worauf es jetzt ankommt. Habe Spaß!
