Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ruby
Code

Ruby Templating mit Slim: Teil 2

by
Length:LongLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Im zweiten und letzten Teil dieser Miniserie schließen wir diese Einführung mit Abschnitten über die Ausgabe von Ruby-Code, Interpolation, Klartext und das Anpassen von Slim an Ihre Bedürfnisse ab. Nach diesem Artikel sollten Sie bereit sein für eine Slim-Aktion.

Code ausgeben

Sie haben bereits ein wenig darüber gesehen, wie Sie Ruby in Ihren Vorlagen verwenden. In diesem Abschnitt finden Sie alles, was Sie dazu benötigen. Im ersten Artikel haben wir Ruby bereits in unseren Vorlagen verwendet. Ich möchte Sie daran erinnern, was ich meine:

Slim

Wie Sie sehen können, haben wir in diesem Head-Tag bereits einige Methoden von Rails verwendet, um mit Stilen und JavaScript-Inhalten umzugehen - nichts Wichtiges. Um Ruby-Code auszuführen, müssen Sie ihm lediglich ein Gleichheitszeichen = voranstellen. Wenn sich Ihr Code über mehrere Zeilen verteilen muss, fügen Sie einfach am Ende jeder Zeile einen Backslash \ hinzu und fahren Sie mit der nächsten fort. Wenn Sie die Zeile mit einem Komma , beenden, benötigen Sie keinen Backslash. Nette kleine Geste, wenn du mich fragst.

Schauen wir uns ein anderes, konkreteres Beispiel an. Das Schreiben von Formularen ist oft ein Problem - viel Code auf dem Boilerplate, viele Wiederholungen und all diese gefürchteten <%= %> Zeichen in ERB. Dies kann in kürzester Zeit chaotisch werden. Könnte schöner sein, oder?

ERB

Es gibt viel zu schreiben, um ein neues @agent-Objekt zu erstellen, oder? Mit Slim können Sie viel prägnanter damit umgehen. Wir behalten nur das Gleichheitszeichen und werden die meisten anderen Dinge los. Tadaa!

Slim

Sie können deutlich sehen, warum dieses Projekt Slim heißt. So viel überschüssiges Fett ist weg. Sag mir nicht, dass dir das, was du siehst, nicht gefällt - ich weiß, dass du es gräbst! Nur ein = Zeichen und Sie können Ihr Markup mit Ruby-Code füllen - in diesem Fall natürlich von Rails. Und wenn Sie es mit dem auf der letzten Seite gerenderten HTML vergleichen, ist es schwer zu ignorieren, wie kompakt Slim wirklich ist.

HTML-Ausgabe

Erinnern Sie sich an die erste Frage, an der sich das Slim-Kernteam orientiert: „Was ist das Minimum, um diese Arbeit zu machen?“ Wenn Sie sich die endgültige HTML-Ausgabe ansehen, kann ich mit Recht sagen, dass Slim diese Frage recht erfolgreich beantwortet hat - keine Beschwerden von meiner Seite. Ich möchte noch ein paar kleine Beispiele einbringen, um Ihnen mehr Gelegenheit zu geben, sich daran zu gewöhnen, wie dies in Slim aussieht.

Dieses ERB-Snippet …

… Wird dies in Slim:

ERB

Slim

Sie können dies auch durch Interpolation rationaler schreiben. Damit willst du aber nicht zu verrückt werden. Das würde dann so aussehen:

Slim

Textinterpolation

Ich habe dies bereits kurz erwähnt, aber da es sich um eine Form der Ausgabe von Ruby-Code handelt, gehört es auch zu diesem Abschnitt. Natürlich können Sie auch in Ihren Slim-Vorlagen die Standardtextinterpolation von Ruby verwenden.

Slim

HTML

Wie oben zu sehen ist, entgeht ein einfacher führender Backslash \ der Interpolation.

Control Code

Noch eine für die Straße. Angenommen, Sie möchten in Ihrer Ansicht einige Bedingungen verwenden. Ähnlich wie bei Haml bezeichnen Sie Ruby-Code, der nicht mit einem einfachen Bindestrich auf der Seite ausgegeben werden soll -. Sie haben dies im obigen Beispiel gesehen, in dem wir damit @agents durchlaufen haben, ohne diesen bestimmten Teil des Codes anzuzeigen.

Obwohl Sie versuchen sollten, sich nach Möglichkeit von allen Arten von Bedingungen in Ihren Ansichten fernzuhalten und bessere OOP-Lösungen für solche Fälle zu finden - was eine Geschichte für ein anderes Mal ist -, würden sie ungefähr so aussehen:

Slim

ERB

Wenn Sie Code ausgeben möchten, ohne dass HTML-Code vorhanden ist, verwenden Sie einfach zwei Gleichheitszeichen ==. Das ist es!

Bevor wir fortfahren, sollte ich mir auf jeden Fall die Zeit nehmen, dies zu erwähnen: Wie Sie hoffentlich wissen, sind Tonnen von Ansichtscode - in unserem Kontext auch Tonnen von Ruby-Code genannt - ein ernsthafter Geruch und sollten jederzeit minimiert werden. Nur weil Slim es vielleicht noch verlockender macht, Ihre Vorlagen mit tonnenweise Logik zu versehen, heißt das nicht, dass Sie es tun sollten. Üben Sie Einschränkungen in dieser Abteilung! Richtig gemacht, macht es Slim wirklich elegant, Ruby bei Bedarf zu injizieren.

Inline-HTML

Wenn Sie das Bedürfnis haben, HTML in Ihre Slim-Vorlagen zu schreiben, haben Sie die Möglichkeit dazu. Ich habe diese Funktion noch nicht verwendet und möchte sie auch nicht verwenden. In einer Übergangsphase kann dies jedoch für Neulinge hilfreich sein. Werfen wir einen kurzen Blick darauf.

Slim

Wenn Slim auf die linke spitze Klammer <trifft, weiß es, dass Sie HTML einmischen möchten.

Wörtlicher Text (Wort für Wort)

Das Pipe-Zeichen | signalisiert Slim, dass Sie einfachen Text haben möchten - Wort für Wort - und kopiert nur die Zeile. Auf diese Weise können Sie jede Art von Verarbeitung vermeiden. In der Dokumentation heißt es, dass Sie den Text bei jedem Zeilenumbruch einrücken müssen, wenn Sie wörtlichen Text über mehrere Zeilen schreiben möchten.

Slim

HTML-Output

Screenshot

Screenshot of the templates output

Wenn Sie den Text in dieselbe Zeile wie das Pipe-Zeichen setzen, können Sie den linken Rand nach der Pipe plus ein einzelnes Leerzeichen festlegen. Aus Neugier habe ich ein bisschen herumgespielt und die folgenden Ergebnisse gefunden. Nur die letzte Beispielvariante hat einen kleinen offensichtlichen Schluckauf, den Sie beachten sollten - sie verschluckt das erste Wort des Satzes.

Slim

Screenshot

Screenshot of the output by the above source code

Wie die Ausgabe in Ihr HTML-Markup gerendert wird, ist etwas unterschiedlich.

Bemerkungen

Natürlich müssen Sie Ihren Code von Zeit zu Zeit auskommentieren. Vergessen Sie jedoch nicht, dass zu viele Kommentare ebenfalls riechen. Versuchen Sie einfach, es auf ein absolutes Minimum zu beschränken!

Ein Schrägstrich / ist alles, was Sie brauchen, um einen Code zu kommentieren.

Slim

Boom! Und jetzt ist dieser Absatz von der Seite verschwunden. Dieser Kommentar hinterlässt keine Spuren im endgültigen HTML-Markup. Sie müssen es nur auf die übergeordnete Auswahl anwenden, und alle untergeordneten Elemente werden ebenfalls auskommentiert. Selbst Kommentare sind slim und minimal.

Wenn Sie andererseits einen HTML-Kommentar <!-- --> wünschen, der in der endgültigen gerenderten Ausgabe angezeigt wird, müssen Sie nur ein Ausrufezeichen hinzufügen ! nach dem Schrägstrich.

Slim

HTML-Output

Ordentlich!

Benutzerdefinierte Shortcuts

Wir haben die ganze Zeit Verknüpfungen verwendet. Wenn Sie einen Punkt eingeben . oder ein Hash-Symbol #, das Sie Slim mitteilen, dass Sie vordefinierte Verknüpfungen für Klassen und IDs verwenden möchten. Das ist sicherlich eine sehr schöne Standardeinstellung, aber was können Sie tun, um diese zu erweitern und Ihre eigenen kleinen Schnipsel zu erstellen? Wir können dies für Tags und Attribute gleichermaßen tun. Willkommen in der Faszination von Slim!

In Rails müssen wir nur einen Initialisierer mit dem folgenden Muster einrichten:

config/initializers/slim.rb

In Sinatra-Apps fügen Sie einfach dieselbe Konfiguration irgendwo unterhalb der Linie hinzu, in der Sie require 'slim'.

your_sinatra_app.rb

Sie können Optionen für die Slim::Engine festlegen, indem Sie einen Hash mit der gewünschten Verknüpfung bereitstellen. Im obigen Beispiel haben wir Slim angewiesen, c als Verknüpfung für ein container-Tag zu verwenden. Sie würden es so in Ihren Slim-Dateien verwenden:

Slim

Und das gerenderte HTML würde natürlich so aussehen:

HTML

Ziemlich nett, oder? Aber Sie haben nicht gedacht, dass hier die Musik aufhört, oder? Wir können noch weiter gehen. Lassen Sie mich Ihnen ein Beispiel geben, das etwas komplizierter ist:

config/initializers/slim.rb

In diesem Beispiel habe ich nicht nur benutzerdefinierte Tags erstellt, sondern auch praktische benutzerdefinierte Attribute bereitgestellt. Lassen Sie uns dies Schritt für Schritt analysieren. Übrigens habe ich den Options-Hash über mehrere Zeilen verteilt, um ihn lesbar zu halten und um zu vermeiden, dass es eine lange Codezeile gibt, über die niemand gerne stolpert. Liest viel besser, findest du nicht?

Über das kaufmännische Und-Zeichen & können wir jetzt ein Eingabe-Tag erstellen, und wir müssen ihm nur einen Typ zuweisen, der unmittelbar auf das kaufmännische Und folgt. Wir können jedes Symbol verwenden, dessen Verwendung sinnvoll ist. Es ist nicht nötig, dasselbe zu verwenden, das ich getan habe. Seien Sie jedoch vorsichtig und versuchen Sie, in dieser Abteilung kompromisslose Entscheidungen zu treffen.

Slim

HTML-Output

Wenn Sie mit Ihren benutzerdefinierten Verknüpfungen Änderungen an diesem Initialisierer vornehmen, sollten Sie nicht vergessen, Ihren lokalen Server neu zu starten. Ohne dies werden Ihre Änderungen während der Vorverarbeitung nicht berücksichtigt.

Wenn ich ein role attribut benötige, kann ich ihm jetzt einfach ein @ -Symbol voranstellen.

Slim

HTML-Output

Auffrischung: Das Rollenattribut ist ein semantischer Ansatz zur Beschreibung der Rolle des betreffenden Elements - wenn Sie den Zweck des Elements bestimmen müssen.

Sehen Sie, über den Punkt erhalten wir eine class="person" -Klasse und der @admin hat uns eine role="admin" gegeben. Ziemlich praktisch, aber wir können noch einen Schritt weiter gehen und mithilfe eines Arrays mehrere Attribute angeben, die über eine einzige Verknüpfung erstellt werden sollen.

Slim

HTML-Output

Da wir unserer Verknüpfung ^ ein Array von Attributen zugeordnet haben, erstellt Slim data-role- und role attribute gleichzeitig über ein einziges Symbol. Das kann sehr praktisch sein. Stellen Sie sich vor, Sie möchten ein Element ähnlich dem folgenden ausgeben und können dies mit einer Verknüpfung und etwas Ruby-Code präzise tun.

HTML

All dies von Hand zu schreiben, scheint nicht die beste Verwendung Ihrer Zeit zu sein - wir haben Code, um diesen Job für uns zu erledigen. Nun, da haben Sie es, das ist alles, was Sie wissen müssen, um Ihre eigenen fantastischen Verknüpfungen zu erstellen - oder um ein großes Durcheinander zu verursachen, wenn Sie keine Einschränkungen üben. Ich würde empfehlen, damit nicht über Bord zu gehen - insbesondere zu vermeiden, Verknüpfungen zu definieren, die Symbole verwenden, an die Slim bereits angehängt ist.

Auffrischung: Die Datenattribute werden verwendet, um einige private Daten auf Ihrer Seite oder Anwendung zu haben. Dinge, mit denen Sie beispielsweise Inhalte filtern können. Dies sind benutzerdefinierte Attribute, die für alle HTML-Elemente verwendet werden können. Die Verwendung für JavaScript-Zwecke ist eine weitere gängige Praxis. Es ist auch sehr praktisch, um Elemente auf einer Seite zu testen, wenn Sie sicherstellen möchten, dass bestimmte Elemente angezeigt werden, und wenn Sie vermeiden möchten, dass Designer mit Ihren Stilen herumspielen.

Slim konfigurieren

Bevor Sie gehen, wollte ich Ihnen einen kleinen Einblick in die umfangreichen Konfigurationsoptionen und deren Anwendung geben. Für Rails erstellen Sie eine Umgebungsdatei wie config/environment/development.rb und geben die gewünschten Optionen an. Sie platzieren Ihre Konfiguration einfach an einer Stelle im Block Rails.application.configure.

In dieser Konfiguration habe ich sichergestellt, dass das Standard-Tag, das erstellt wird, wenn ein Tag-Name weggelassen wird, ein <p> -Tag ist - kein div-Tag, was die Standardeinstellung ist. Außerdem habe ich die Tabulatorgröße so angepasst, dass zwei Leerzeichen verwendet werden, und schließlich zwei weitere Trennzeichen hinzugefügt, um Attribute von Tags zu verpacken. Jetzt kann ich auch ‹ › und « » dafür verwenden. Nicht besonders nützlich, aber gut zu Demonstrationszwecken.

Im folgenden Beispiel sehen Sie, dass alle Trennzeichen für Attribut-Wrapper dieselbe Ausgabe erstellen - auch, dass .some-class oder #some-id standardmäßig <p> -Tags erstellt.

Slim

HTML-Output

Alternativ können Sie dieses Zeug auch in config/initializers/slim.rb einstellen, wie ich Ihnen im Abschnitt über benutzerdefinierte Verknüpfungen gezeigt habe.

Für Sinatra ist es dieselbe Übung wie im Shortcut "Verknüpfungen" beschrieben. Stellen Sie Ihre Optionen einfach irgendwo unterhalb Ihrer require 'slim' Anweisung ein und Sie können loslegen.

In der Dokumentation unter „Verfügbare Optionen“ erfahren Sie mehr darüber, was für die Konfiguration verfügbar ist. Slim bietet Ihnen viele Möglichkeiten zum Spielen.

Abschließende Gedanken

Das sind die Grundlagen. Es gibt ein oder zwei fortgeschrittenere Themen, mit denen Sie sich bei Bedarf befassen sollten, aber ich dachte, sie sind meistens nicht anfängerfreundlich und werden im Alltag nicht häufig verwendet. Ich wollte die Dinge einfach halten und Ihnen alles zeigen, was Sie brauchen, um schnell zu dieser fantastischen Template-Engine zu wechseln. Viel Spaß und ich hoffe, Slim ist jetzt eines Ihrer neuen Lieblingsspielzeuge!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.