Share
Zweimal im Monat besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte von Nettuts +. Dieses Tutorial wurde erstmals im Oktober 2010 veröffentlicht.
In diesem Tutorial werden Haml und Sinatra vorgestellt. Haml ist eine Auszeichnungssprache, die sauberes, strukturiertes HTML erzeugt. Sinatra ist ein einfaches, aber leistungsfähiges Ruby-Framework zum Erstellen von Websites oder Webservices. Die beiden arbeiten sehr gut zusammen und bieten ein leistungsfähiges Werkzeug für eine schnelle und einfache Webentwicklung. Ich finde sie ideal für das Prototyping.
Am Ende dieses Tutorials haben Sie eine Website mit zwei Seiten mit Sinatra und Haml erstellt. Auf dem Weg erfahren Sie, wie Sinatra-Anwendungen strukturiert sind und in Haml eingeführt werden. Außerdem lernen Sie, wie Sie eine Layoutdatei verwenden, um die Menge an dupliziertem Code zu reduzieren und Konsistenz zwischen den Seiten zu gewährleisten.
Sie können diesen Abschnitt überspringen, wenn Sie bereits Ruby installiert haben und auf Ihrem System arbeiten.
Wir müssen die Ruby-Sprache und die Edelsteine Sinatra und Haml installieren, um loszulegen.
Die Methode dafür hängt von Ihrem Betriebssystem ab. Ich verwende gerne den Ruby Version Manager (RVM) zur Verwaltung von Ruby unter OS X und Linux. (Windows-Benutzer möchten möglicherweise Pik als Alternative zu RVM betrachten.)
Downloaden und installieren Sie RVM für diejenigen, die Ruby nicht installiert haben.
Folgen Sie den Anweisungen auf der RVM-Installationsseite, öffnen Sie ein Terminal und geben Sie Folgendes ein:
bash <<( curl http://rvm.beginrescueend.com/releases/rvm-install-head )
Dadurch wird RVM heruntergeladen und installiert. Wir müssen eine Zeile am Ende unseres einfügen .bashrc Datei. Diejenigen von Ihnen, die eine Alternative zu Shell verwenden, müssen das entsprechende Profil ändern. Weitere Informationen finden Sie auf der RVM-Installationsseite.
Möchten Sie mehr über die Arbeit mit RVM erfahren??
echo '[[-s "$ HOME / .rvm / scripts / rvm"]] && source "$ HOME / .rvm / scripts / rvm" # Dies lädt RVM in eine Shellsitzung.' >> ~ / .bashrc
Schließen Sie die Schale und öffnen Sie sie wieder!
Art 'rvm notizen', um zu überprüfen, welche Abhängigkeiten Sie möglicherweise für Ihr Betriebssystem installieren müssen. Es gibt verschiedene Versionen von Ruby, die RVM verwalten kann. Wir verwenden die Standardversion namens MRI. Daher in der Ausgabe von rvm notizen Suchen Sie nach dem Abschnitt, der sagt:Für MRI und REE? '. Kopieren Sie dann den für '' angegebenen Befehl und fügen Sie ihn ein.Rubin'.
Bei einer Neuinstallation von Ubuntu erhielt ich beispielsweise die folgende Ausgabe und musste die mit Hilfe von aufgeführten Abhängigkeiten installieren Eignung Befehl in der Ausgabe. Siehe Screenshot unten.
Mit dem kniffligen Bit ist das Installieren und Verwenden verschiedener Ruby-Versionen und Edelsteine jetzt einfach. Installieren Sie die Version 1.9.2 von Ruby, indem Sie Folgendes eingeben:
rvm installieren 1.9.2
RVM sollte jetzt die Ruby-Version 1.9.2 herunterladen und installieren.
Die letzte Etappe besteht darin, die Edelsteine Sinatra und Haml zu installieren. Art:
Juwel installieren Sinatra
Sie sollten die folgende Ausgabe im Terminal sehen:
Erfolgreich installiert rack-1.2.1 erfolgreich installiert sinatra-1.0 2 gems installiert ri-dokumentation für rack-1.2.1 installieren? RI-Dokumentation für Sinatra-1.0 installieren? RDoc-Dokumentation für Rack-1.2.1 installieren? Installieren der RDoc-Dokumentation für sinatra-1.0?
Jetzt tippen gem installieren haml So installieren Sie den Haml-Edelstein auf Ihrem System.
Ganz neu bei Sinatra? Nehmen Sie unseren kostenlosen Kurs!
Um mit der Erstellung der Sinatra-Anwendung zu beginnen, erstellen Sie einen Ordner mit einer Ruby-Datei für den Anwendungscode. Geben Sie in Ihr Terminal Folgendes ein:
mkdir sinatra-app cd sinatra-app touch website.rb
Öffnen Sie die neu erstellte Datei 'website.rb' in Ihrem Texteditor und geben Sie Folgendes ein:
"Rubygems" erfordern "Sinatra" bekommen "/" Dies ist Sinatra "Ende
Dies ist eine grundlegende Sinatra-Anwendung. Die ersten beiden Zeilen bringen die 'Rubygems' und 'SinatraBibliotheken für die schwere Arbeit.
Der nächste Abschnitt erklärt Sinatra, wie man auf einerhaltenAnfrage. Insbesondere wird angegeben, was zu tun ist, wenn die Root-URL (die '/' Pfad) wird angefordert. In diesem Beispiel gibt Sinatra nur die Zeichenfolge "This is Sinatra" zurück. Dies wird im Browser angezeigt, wenn die Stamm-URL der Anwendung angefordert wird.
Um es in Aktion zu sehen, gehen Sie zurück zu Ihrem Terminal und führen Sie die Sinatra-Anwendung mit dem folgenden Befehl aus:
ruby website.rb
Sie müssen dies neu starten
website.rbDatei jedes Mal, wenn Sie es ändern. Daher ist es eine gute Idee, eine separate Shell in einem eigenen Fenster oder einer eigenen Registerkarte laufen zu lassen, um sie zu starten und zu stoppen.
Sie sollten die Antwort erhalten:
== Sinatra / 1.0 hat sich auf 4567 für die Entwicklung mit Unterstützung von WEBrick entschieden [2010-09-27 09:45:37] INFO WEBrick 1.3.1 [2010-09-27 09:45:37] INFO ruby 1.8. 7 (2010-08-16) [i686-darwin10.4.0] [2010-09-27 09:45:38] INFO WEBrick :: HTTPServer # start: pid = 14135 port = 4567
Dies sagt uns, dass ein Webserver (WEBrick) gestartet wurde und nun Ihre Anwendung auf Port 4567 bereitstellt.
Um es anzuzeigen, öffnen Sie Ihren Browser und gehen Sie zu "localhost: 4567". Sie sollten die Ausgabe der Anwendung sehen:
Herzliche Glückwünsche! Ihre Sinatra-Anwendung ist betriebsbereit!
Beginnen wir mit dem Erstellen von Seiten mit Haml und einigen Sinatra-Standardkonventionen für spezielle Dateien.
Wir werden unsere Seiten mit Haml erstellen. Der erste Schritt besteht darin, unserer Anwendung mitzuteilen, dass wir den Haml-Edelstein verwenden werden.
Dazu fügen wir include "Haml" am oberen Rand Ihres Codes ein. Ändere dein 'website.rb'Datei wie folgt aussehen:
erfordern 'rubygems' erfordern 'sinatra' erfordern 'Haml get' / 'do "This is Sinatra" ende
Ihre Anwendung kann nun den zuvor installierten Haml-Edelstein verwenden.
Haml ist eine einfache und saubere Art, HTML zu beschreiben. Es kann auch Inline-Code wie PHP, ASP und Ruby-Skript verarbeiten.
Ein Ziel von Haml ist es, die Anzahl von Duplizierungen und Wiederholungen beim Erstellen von Webseiten mit HTML zu reduzieren. Ein Beispiel dafür ist das Schließen von Tags. Dies geschieht, indem man sich auf die Struktur der Einrückungen im Code stützt: Beim Schreiben in Haml ist es wichtig, mit den Einrückungen übereinzustimmen, da sie die Struktur der Seite beschreiben.
Das Ergebnis ist ein Markup, das logisch ist und viel einfacher zu lesen ist als HTML für alle Fälle, außer in den trivialsten Fällen.
Schauen wir uns ein paar Haml-Markups an und zeigen den HTML-Code, den es erzeugt.
!!! % html% head% title Dies ist der Titel eines Titel-Tags innerhalb des Head-Tags% body% h1. Dies ist eine Überschrift innerhalb eines h1-Tags.% p Dies ist Text in einem Absatz. Beachten Sie, wie wir den Tag nicht schließen? Die Einrückungen tun das!
Das '!!!'Am Anfang des Codes wird Haml angewiesen, die DOKTYP Etikett. HTML-Tags werden mit einem 'beschrieben.%' Zeichen. So % html gibt die aus Etikett, %Kopf schafft das Etikett, % p schafft das
Tag und so weiter.
Die Einrückungen sagen Haml, welche Tags in anderen liegen. Also das Überschrift-Tag produziert von der '% h1'Markup ist innerhalb der Tag erstellt von '%Karosserie'Markup. Der folgende Absatz-Tag ist durch das '% p'tag befindet sich auch innerhalb des body-Tags. Nach den Einrückungen können wir sehen, dass der Text innerhalb des Absatzes liegt.
Daher ergibt das Markup oben die folgende HTML-Ausgabe:
Dies ist der Titel im Head-Tag Dies ist eine Überschrift innerhalb des Body-Tags
Dies ist Text in einem Absatz. Beachten Sie, wie wir den Tag nicht schließen? Die Einrückungen tun das!
Sie können sehen, wo die schließenden Tags der Einrückung im ursprünglichen Haml-Markup entsprechen.
Mit dieser schnellen Einführung in Haml können wir es in unserer Anwendung einsetzen. Standardmäßig sucht Sinatra nach Webseitenvorlagen in einem Ordner namens 'Ansichten'. Fügen wir diesen Ordner jetzt hinzu.
Öffnen Sie ein Terminal, navigieren Sie zum zuvor erstellten Ordner sinatra_app und geben Sie Folgendes ein:
mkdir betrachtet cd-ansichten
Jetzt befinden wir uns im Ansichtenordner, erstellen wir ein 'index.haml' Seite.
Berühren Sie index.haml
Open 'index.haml'in Ihrem Texteditor und geben Sie Folgendes ein:
!!! % html% head% title Meine Sinatra-Website% body% h1 Willkommen% p Willkommen auf meiner mit Sinatra und HAML erstellten Website
Der nächste Schritt besteht darin, Sinatra mitzuteilen, diese Datei für die Homepage zu verwenden. Öffne das 'website.rb'Datei und ändern Sie den Code in der erhalten '/' blockieren, so dass die Datei jetzt liest:
erfordern 'rubygems' erfordern 'sinatra' erfordern 'haml' get '/' do haml: Indexende
Dies weist die Anwendung an, die Ausgabe der aufgerufenen Haml-Datei zu senden index.haml (automatisch im Ordner 'views' gesucht), wenn die Stammadresse abgefragt wird.
Zurück im Terminal, auf dem der Webserver läuft, tippen Sie 'Strg-C', um den Webserver zu stoppen und ihn erneut mit der Rubin Befehl zum Neustart:
[Strg-C] Rubinwebsite.rb
Aktualisieren Sie Ihren Browser und Sie sollten die resultierende Webseite sehen.
Wenn Sie den Quellcode dieser Webseite anzeigen, wird der von Haml generierte HTML-Code angezeigt:
Meine Sinatra-Website Herzlich willkommen
Willkommen auf meiner Website, die mit Sinatra und HAML erstellt wurde
Großartig! Wir haben jetzt unsere Website unter Verwendung der Haml-Vorlagen im 'views'-Verzeichnis.
Lassen Sie uns nun die Homepage in etwas umwandeln, das einer typischen Struktur mit Kopf- und Fußzeile, Inhaltsbereich und Seitenleiste folgt. Wir werden auch ein paar einfache CSS hinzufügen, um die Seite zu positionieren und zu gestalten. Wir werden sehen, wie wir das ausdrücken können Gehen Sie zurück zur Datei 'index.haml' in Ihrem Texteditor und ändern Sie sie wie folgt: Dies ist ein typisches Layout mit Header-, Content-, Side_bar- und Footer-Divs. Wie du siehst, Um einem HTML-Tag eine ID zu geben, verketten wir die Speichern Sie die Datei und aktualisieren Sie sie in Ihrem Browser. Sie sollten so etwas sehen: Sinatra verwendet einen anderen speziellen Verzeichnisnamen "public", um Assets wie CSS-Dateien und Bilder zu speichern. Erstellen Sie einen Ordner mit dem Namen "public" im Stammordner Ihrer Anwendung. Wechseln Sie in dieses Verzeichnis und erstellen Sie ein Verzeichnis namens 'css', um die CSS-Dateien zu speichern. Beenden Sie, indem Sie einen leeren Bereich erstellen Tun Sie dies in Ihrem Terminal, indem Sie Folgendes eingeben: Öffne das Ich werde nicht ins Detail gehen Wir müssen von der Indexseite aus auf die CSS-Datei verlinken. Ich werde auch einen Link zum Yahoo-CSS-Reset hinzufügen, um die Konsistenz zwischen Browsern zu verbessern. Öffne das Dies zeigt, wie wir in Haml Klammern für zusätzliche Tag-Attribute verwenden können: Ihre endgültige Datei sollte folgendermaßen aussehen: Aktualisieren Sie Ihren Browser, und Sie sollten die Homepage mit dem Styling und der Wir haben jetzt die grundlegende Vorlage für unsere Webseiten, die wir zum Erstellen zusätzlicher Seiten wiederverwenden können. Nun, da wir unser grundlegendes Seitenlayout haben, können wir feststellen, dass der Inhalt unserer index.html-Datei für andere Seiten der Website identisch sein kann. In diesem Beispiel behalten wir die Kopf-, Fuß- und Seitenleiste beider Seiten bei. Wir können eine verwenden Gehe zurück zum Wir werden jetzt das bearbeiten Ändern Sie die Layoutdatei wie folgt: Der Schlüssel hier ist das ' Wir können jetzt unsere bearbeiten Das Aktualisieren des Browsers sollte genau das gleiche Ergebnis wie zuvor liefern. Aber diesmal die Das Erstellen zusätzlicher Seiten, die diese Vorlage verwenden, ist jetzt unkompliziert. Erstellen Sie eine neue Datei im Ordner 'views' Ihr Verzeichnis und Ihre Dateistruktur für die Anwendung sollte folgendermaßen aussehen: Geben Sie den folgenden Code in die neue Datei ein: Wie Sie sehen, ist dies eine sehr einfache Seite mit einer Überschrift und einem Textstück innerhalb eines Absatz-Tags. Wir können die Seite momentan nicht sehen. Um dies zu erreichen, müssen wir das ändern Wir machen das, indem wir die folgenden Zeilen hinzufügen Das Starten Sie das neu Sie sollten die folgende Seite sehen, wenn Sie zu 'navigieren' Das Hinzufügen weiterer Seiten wäre so schnell und einfach. Denken Sie daran, dass Sie das neu starten müssen Wir müssen einen Weg hinzufügen, um zwischen den Seiten zu navigieren. Wir fügen also ein einfaches Menü in das Layout ein. Öffne das Hier erstellen wir eine Aktualisieren Sie Ihren Browser und Sie sollten ein Menü mit den beiden Seiten sehen: Durch Klicken auf die Links im Navigationsmenü sollten Sie zu jeder Seite gelangen. Sie können mit dem Hinzufügen weiterer Seiten experimentieren. Denken Sie daran, dass die Schritte wie folgt sind: Sowohl Sinatra als auch Haml haben sicherlich mehr zu bieten als wir hier gesehen haben. Sinatra ist eine gute Wahl für Website- und Webservices, während ein schwererer Rahmen wie Ruby on Rails ein Overkill sein kann. Außerdem finde ich, dass die Einfachheit und Klarheit von Haml Sinatra hervorragend ergänzt und einen sehr produktiven Entwicklungsansatz ermöglicht.Erstellen Sie die Startseite
!!! % html% head% title Meine Sinatra-Website% body #wrapper #header% h1 Meine Sinatra-Website% h2 Eine einfache Website mit Sinatra und HAML! #content% h1 Die Homepage% p Willkommen auf meiner mit Sinatra und HAML erstellten Website. % p Dies ist die Homepage und dies ist ein Text, der die Homepage ausfüllt! #side_bar% h1 Seitenleiste% p Dies ist die Seitenleiste der Webseite. #footer% p Dies ist die Fußzeile.
# Zeichen. Die gesamte Seite ist in ein #Verpackung' Linie. # am ende könnten wir also schreiben % body # my_ID bekommen . Klassen sind mit einem Punkt markiert. So % article.my_class Würde geben .
Fügen Sie etwas CSS-Styling hinzu
css Datei in diesem Verzeichnis. mkdir public cd public mkdir css cd css touch styles.css
styles.css Datei in Ihrem Editor und kopieren und fügen Sie Folgendes ein: #wrapper width: 66%; Marge: auto; #header Hintergrundfarbe: #ade; #header> h1 Schriftgröße: 200%; h2 font-size: 130%; Schriftfamilie: serifenlos; #content margin: 12px 0; Schwimmer: links; #side_bar margin: 12px 0; Breite: 30%; schweben rechts; klar: keine; Hintergrundfarbe: #ddd; h1 font-size: 150%; #footer clear: both; Hintergrundfarbe: #ade; Schriftgröße: 75%; Schriftfamilie: serifenlos; Farbe: # 333; Border-Top: fest 1px # 69a; ol padding-top: 20px; Hintergrundfarbe: #ade; Bildschirmsperre; li Farbe: weiß; Text ausrichten: Mitte; Anzeige: Inline; Auffüllen: 5px 10px 0 10px; Rand rechts: 2px; Hintergrundfarbe: # 69a; eine Textdekoration: keine;
css, Es ist nur ein schneller und schmutziger Weg, um die Seitenelemente im Browser deutlicher zu machen.index.haml Seite den Editor und fügen Sie diese beiden Zeilen in die %Kopf Sektion. % link (rel = "stylesheet" href = "http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")% link (rel = "stylesheet" href = "css / styles .css ")
rel und href in diesem Fall. !!! % html% head% title Meine Sinatra-Website% 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 Meine Sinatra-Website% h2 Eine einfache Website mit Sinatra und HAML! #content% h1 Die Homepage% p Willkommen auf meiner mit Sinatra und HAML erstellten Website. % p Dies ist die Homepage und dies ist ein Text, der die Homepage ausfüllt! #side_bar% h1 Seitenleiste% p Dies ist die Seitenleiste der Webseite. #footer% p Dies ist die Fußzeile.
divs positioniert.
Schritt 4: Erstellen eines gemeinsamen Layouts
Layout Datei in Sinatra, um dies zu erreichen.Index Seite in Ihrem Texteditor; Ändern Sie den Dateinamen, indem Sie "Speichern unter" wählen layout.haml.Layout Datei und führen Sie einige Markierungsvorlagen mithilfe der '='Tag in Haml. !!! % html% head% title Meine Sinatra-Website% 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 Meine Sinatra-Website% h2 Eine einfache Website mit Sinatra und HAML! #content = yield #side_bar% h1 Seitenleiste% p Dies ist die Seitenleiste der Webseite. #footer% p Dies ist die Fußzeile.
= Ausbeute' Befehl. Das = sign weist Haml an, etwas Ruby-Code zu verarbeiten und die Ausgabe im Browser abzulegen. Hier rufen wir einfach Rubys an Ausbeute Funktion, die den Inhalt der Seite zurückgibt.index.haml Seite, um den gesamten Code zu entfernen, der im kopiert ist Layout Datei. Ändern Sie es so aussehen: % h1 Die Startseite% p Willkommen auf meiner mit Sinatra und HAML erstellten Website. % p Dies ist die Startseite, und dies ist ein Text, der die Startseite ausfüllt!
Layout Die Datei wird automatisch von Sinatra und der Datenbank abgeholt Index Seite wird als Ergebnis des gerendert Ausbeute Funktion.Erstellen Sie die Info-Seite
über.haml 
% h1 Über% p Dies ist eine einfache Anwendung, die Sinatra und HAML verwendet.
website.rb Datei, die Sinatra anweist, eine Anfrage für 'zu bearbeiten'/Über'und das zurückzugeben über.haml Vorlage als Ergebnis.website.rb Datei: erfordern 'rubygems' erfordern 'sinatra' erfordern 'haml' get '/' do haml: index end get '/ über' do haml: about end
bekommen '/ über' block simple weist Sinatra an, die 'about' Haml-Vorlage als Antwort auf eine Antwort zurückzugeben HTTP erhalten zum '/Über'. WEBrick Webserver durch Drücken von Strg-C in dem Terminal, in dem es läuft, wie wir es zuvor getan haben und anrufen ruby website.rb.localhost: 4567 / ungefähr'in Ihrem Browser.
WEBrick Server, wenn Sie die Anwendungsdatei ändern.
Schritt 5: Hinzufügen eines Menüs (und Aufräumen)
layout.haml Datei und fügen Sie die Navigation hinzu div und die Links wie folgt: !!! % html% head% title Meine Sinatra-Website% 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 Meine Sinatra-Website% h2 Eine einfache Website mit Sinatra und HAML! #nav% ol% a (href = "/")% li Home% a (href = "about")% li Über #content = Ertrag #side_bar% h1 Seitenleiste% p Dies ist die Seitenleiste der Webseite #footer % p Dies ist die Fußzeile.
div mit der id von nav. Diese div enthält eine Liste mit Anker Tags zu '/' und 'Über'. Beachten Sie, wie der verknüpfte Text in der folgenden Zeile eingerückt wird, um ihn in den Text einzugeben HTML Anker-Tag.
website.rb Datei für die neue Route auf dieselbe Weise wie die '/Über' Route.
Fazit
Accentsconagua