Erstellen Sie mit Haml saubereres, präziseres HTML

Vor der Geburt von Sass und CoffeeScript hat Haml die Rails-Szene als Alternative zu ERB / ​​RHTML als Markup-Vorlage getroffen. Nach Mietern, die vom meteorischen Ruby-Rahmen evangelisiert wurden, Haml ( H. TML zu bstraction m Arkup l anguage) fungiert in seiner einfachsten Form als HTML-Präprozessor und ist der Ansicht, dass Markups schön, klar, gut eingerückt und frei von Wiederholungen sein sollten.

Obwohl seine CSS- und JavaScript-kompilierenden Gegenstücke inzwischen an Popularität gewonnen haben, hat die Präprozessorbewegung die Erstellung von Werkzeugen erleichtert, die auch die Haml-Eingabeleiste senken. Wie wir gleich untersuchen werden, können die Befehlszeile und die Ruby-Installation jetzt vollständig vermieden werden.

Im Kern ist Haml knappes und streng eingerücktes HTML, daher setzt dieses Tutorial eine starke Vertrautheit mit HTML voraus. Wie zu erwarten, sind Ruby-Grundlagen und Kenntnisse dieses Frameworks erforderlich, wenn Sie es dynamisch in Rails / Sinatra / Similar verwenden möchten.



Letztendlich ist es am einfachsten, Haml zu schätzen, es zu sehen:

!!! 5%html{lang: 'en'} %head %title Sample Haml %body %h1 Archaeopteryx

Dieses Snippet wird wie folgt kompiliert:

Sample Haml

Archaeopteryx

Eine kurze Geschichte

Mit freundlicher Genehmigung von Hampton Catlin (der heutzutage eher ein Synonym für Sass ist) trat Haml 2006 zum ersten Mal auf. Eine Zeit lang waren Sass und Haml zusammen in demselben Juwel verpackt. Sass hat seitdem eine allgegenwärtigere Verwendung außerhalb von Rails erreicht, während Haml aufgrund seiner Aufnahme als Teil von immer noch beliebt ist 'The Rails Way.'

huion h610 pro vs wacom intuos ziehen

Das Projekt befindet sich derzeit in Version 3.1.4 und wird von Nathan Weizenbaum gepflegt. Haml ist MIT-lizenziert und die Quelle ist verfügbar auf GitHub.



Vorbereitungsarbeiten und Hervorheben

Wie bei anderen Präprozessoren (WENIGER, Sass, CoffeeScript usw.) sind einige schnelle Schritte erforderlich, um Haml in Ihren Workflow zu integrieren. Sie erstellen Dateien, die auf .haml enden. Für die HTML-Konvertierung ist jedoch vor dem Rendern des Browsers eine der folgenden Methoden erforderlich:

Mit Ruby

Wenn Ruby ist installiert Auf Ihrem Computer (unter OS X vorinstalliert) kann das Juwel über die Befehlszeile heruntergeladen werden:

gem install haml

Wenn das Juwel erfolgreich installiert wurde, erhalten Sie die Möglichkeit, Haml-Dateien mit dem zu konvertieren haml Befehl, ersetzen Eingang und Ausgabe mit entsprechenden Dateinamen:

haml input.haml output.html

Dies ist eine großartige Möglichkeit, um zu experimentieren und sich mit der Syntax vertraut zu machen, aber sie lässt sich nicht effizient skalieren. Im Gegensatz zu Sass ist der Haml-Edelstein nicht mit einer Uhrenfunktion für die automatische Konvertierung ausgestattet. Wenn möglich, wird bevorzugt eine der folgenden Techniken verwendet.

Mit Schienen

Die Verwendung von Rails ist das beste Szenario für die Implementierung. Fügen Sie einfach das hinzu Haml-Rails Edelstein zu Ihrem Gemfile und verwenden Sie den Bundler (Bundle-Installation oder einfach Bundle). Vom Framework generierte Ansichten wechseln zu a .html.haml Erweiterung, und die gesamte Kompilierung wird für Sie erledigt.

Ohne Ruby

Neben der Unterstützung einer Reihe von kongruenten vorverarbeiteten Sprachen CodeKit und LiveReload Erleichtern Sie die Einrichtung ohne die Befehlszeile zum Kompilieren von Haml-Dateien beim Speichern (neben anderen nützlichen Funktionen). Wenn Sie sich von Ruby fernhalten oder die Befehlszeile meiden möchten, ist dies der beste Pfad.

Hervorheben

Bevor Sie hineinspringen, gehen Sie zum Editor-Unterstützung Seite, um eine korrekte Syntaxhervorhebung in Ihrem bevorzugten Texteditor sicherzustellen.

Grundlegende Tags und Doctypes

HTML-Tag-Elemente werden mit dem Prozentzeichen (%) gefolgt vom Tag-Namen (z. B.% h1) erstellt.

!!! 5%html

Kompiliert zu:

Wie Sie vielleicht bemerkt haben, gibt es kein Haml-Äquivalent zu einem schließenden Tag - sie werden für Sie hinzugefügt. Dieses Snippet enthält auch eine Kurzform, die für die einfache Aufnahme von Doctype bereitgestellt wird. Viele weitere davon sind im Internet verfügbar Dokumentation .

Verschachteln von Inhalten und Tags

Da Haml keine schließenden Tags hat, wird die Verschachtelung über strenge Leerzeichen- und Einrückungsstandards gesteuert. Der Inhalt kann in derselben Zeile wie das Tag enthalten sein oder in der folgenden Zeile eingerückt sein. Verschachtelte Tags müssen in einer neuen Zeile eingerückt werden.

%h1 Gallimimus%h2 Cretaceous Period%h3 %strong Discovered in 1963

Kompiliert zu:

Gallimimus

Cretaceous Period

Discovered in 1963

Während Sie wählen können, ob Sie Inhalte in dieselbe Zeile aufnehmen oder verschachteln möchten, wird ein Fehler ausgegeben, wenn beide gleichzeitig versucht werden. Die Anzahl der verwendeten Leerzeichen oder Tabulatoren muss konsistent sein. Andernfalls gibt der Compiler ebenfalls einen Fehler zurück.

-# Returns with an error: content is on the same line and nested inside%h4 Max Height: %em 9m-# Returns with an error: inconsistent indentation%p Present in the same period as the %span Tyrannosaurus

Dieses Segment würde nicht erfolgreich kompiliert.

Attribute hinzufügen

Attribute können Tags über einen Ruby-Hash (eine Gruppe von Schlüssel-Wert-Paaren, die einem assoziativen Array sehr ähnlich sind) hinzugefügt oder normalerweise in Klammern hinzugefügt werden, die an das Tag angehängt sind.



%a{href: 'http://en.wikipedia.org/wiki/Spinosaurus', title: 'Spinosaurus'} Spinosaurus%a(href='http://en.wikipedia.org/wiki/Spinosaurus' title='Spinosaurus') Spinosaurus

Kompiliert zu:

Spinosaurus Spinosaurus

IDs, Klassen und Divs

Während ID- und Klassenattribute wie oben beschrieben hinzugefügt werden können, werden sie häufiger wie an das Tag angehängte CSS-Selektoren dargestellt. Es ist erwähnenswert, dass Haml a einfügt, wenn kein HTML-Tag explizit definiert ist .

%section#content.container .stats.container

Kompiliert zu:

Filter

Filter, die mit einem führenden Doppelpunkt gekennzeichnet sind, ermöglichen das Filtern von darin verschachtelten Inhalten außerhalb von Haml, bevor sie zur Ausgabe hinzugefügt werden. Beispiele beinhalten : Javascript , :markdown , und : cdata ;; Der JavaScript-Filter beispielsweise schließt verschachtelte Inhalte ein und CDATA-Tags.

:javascript $('.dinosaur').on('click', function(e) { alert('rawr'); });

Kompiliert zu:

//

Wir werden den Markdown-Filter später noch einmal betrachten, da er eine nützliche Rolle bei der Überwindung des größten Mangels von Haml spielt.

Ruby hinzufügen

Neben der einfachen HTML-Konvertierung lässt sich Ruby einfach in Ihre Vorlagen einbetten und ausgeben - Funktionen, die in Verbindung mit Rails, Sinatra und dynamischen Daten im Allgemeinen erforderlich sind. Die auszuwertenden Zeilen beginnen mit einem Bindestrich (-), während die auszugebenden Zeilen mit einem Gleichheitszeichen (=) beginnen.

Wenn Sie mit dem Einbetten von Ruby in ERB oder dem Einfügen von PHP in HTML vertraut sind, ist es dasselbe Konzept - der Bindestrich und die Gleichheitszeichen ersetzen Konstrukte wie ,, und

- title = 'Stegosaurus'%h1= title

Kompiliert zu:

Stegosaurus

Es gibt kein Ende

Auf diese Weise können auch Schleifen und bedingte Logik hinzugefügt werden. Wie bei Markup-Tags ist es nicht erforderlich, diese Anweisungen zu schließen. Durch Einrücken wird gesteuert, in welchen Inhalt sie fallen. In Rails (und anderen MVC-Frameworks) wird generell bevorzugt, dass Ihre Markup-Vorlage so wenig Logik wie möglich enthält. Wenn sich das Schreiben umständlich oder schwierig anfühlt, sollte das Segment wahrscheinlich an einer anderen Stelle in Ihrer Anwendung gespeichert sein.

- title = 'Pterodactyl'- if title == 'Stegosaurus' %h2 The Greatest Dinosaur Ever- else %h2 Some Random Dinosaur

Kompiliert zu:

Some Random Dinosaur

Wofür ist das alles gut?

Nachdem Sie sich mit der grundlegenden Syntax vertraut gemacht haben, werfen wir einen Blick auf die Gründe für das Hinzufügen eines weiteren Akronyms zu Ihrem Workflow:



  • Wiederholung und Aufwand bei der Erstellung von HTML werden erheblich reduziert. Dies ist für sich genommen kein starker Grund, da das Tippen normalerweise nicht unser Engpass ist. Nachdem Sie Haml über einen längeren Zeitraum verwendet haben, werden Sie den Unterschied beim Zurückschalten bemerken.
  • Sobald Sie mit der Syntax vertraut sind, sind Haml-Dateien (insbesondere große) in der Regel einfacher zu scannen als ihre HTML-Entsprechung - ein wichtiger Gesichtspunkt für die Wartung.
  • Das strikte Verschachteln und Einrücken trägt wesentlich dazu bei, Qualitätsänderungen und Ergänzungen aller Mitwirkenden sicherzustellen.
  • Serverseitiger Code lässt sich nahtlos integrieren, wenn er mit Rails kombiniert wird.

Verschachtelungsmängel

Hamls Strenge beim Verschachteln und Einrücken kann für Unbekannte einige Probleme verursachen. Glücklicherweise ist es ziemlich einfach, diese Probleme zu umgehen:

wie man Vektoren im Illustrator bearbeitet

Formatierung von Inhalten

Das Formatieren von Inhalten (insbesondere Inline-Tags auf Textblöcken) ist Hamls Hauptschwäche. Da nicht mehrere Tags in derselben Zeile deklariert werden können, müssen Sie entweder:

  • Fügen Sie vor und nach jedem im übergeordneten Element verschachtelten Inline-Tag manuelle Zeilenumbrüche ein.
  • Fügen Sie Standard-HTML-Tags zum Öffnen und Schließen hinzu (was gültig und tatsächlich empfohlen ist).
  • Dafür sorgen Markdown ist auf Ihrem Server / lokal installiert und nutzen die :markdown Filter, um Inhaltsblöcken Markdown-Syntax hinzuzufügen.
%p Visit a local %em Museum or a %em Science Institute%p Visit a local Museum or a Science Institute :markdown Visit a local *Museum* or a *Science Institute*

Kompiliert zu:

Visit a local Museum or a Science Institute

Visit a local Museum or a Science Institute

Visit a local Museum or a Science Institute

Output Wrangling

Wenn der erzeugte HTML-Code nicht Ihren Standards entspricht, können Operatoren wie und | verwendet werden stehen zur genaueren Kontrolle über die Ausgabe des Compilers zur Verfügung:

%h2<%span Remove whitespace in a tag%h2 %span Remove %span> whitespace around %span a tag%h2 Evaluate multiple lines | as one with the pipe character |

Kompiliert zu:

Remove whitespace in a tag

Removewhitespace arounda tag

Evaluate multiple lines as one with the pipe character

Hässlich

Wenn Haml mit einem Ruby-Framework gekoppelt ist, stellen Sie möglicherweise fest, dass Ihre HTML-Quelle im Produktionsmodus nicht eingerückt ist. Unter einer Reihe von Möglichkeiten , das :hässlich Die Steuerung legt fest, ob die Ausgabe nach dem Kompilieren formatiert werden soll. In Rails ist es standardmäßig auf true gesetzt und dient dazu, die Renderleistung erheblich zu verbessern, ohne das zu beeinflussen, was der Benutzer sieht.

Einpacken

Wie bereits mehrmals erwähnt, eignet sich Haml hervorragend, um HTML in ein wohlgeformtes Markup mit strengen Konventionen umzuwandeln - was sowohl der Geschwindigkeit als auch der Dynamik der Zusammenarbeit zugute kommt. Es ist eine kurze Arbeit, die Syntax zu erlernen, und sie glänzt wirklich, wenn sie mit einem Ruby-Framework kombiniert wird. Während Haml einige Probleme mit der Formatierung von Inhalten hat, haben wir mehr als einen Weg, um akzeptabel damit umzugehen. Dies war keineswegs eine vollständige Liste aller in Haml verfügbaren Produkte - sehen Sie sich auf jeden Fall die an Referenz Weitere Konzepte wie Kommentieren, Interpolieren und selbstschließende Tags, sobald Sie sich daran gewöhnt haben.

Weiterführende Literatur