Eine Einführung in Slim-Vorlagen

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Warum Slim?

Wenn Sie im Rubinland leben und atmen und Haml schon einmal eine Chance gegeben haben, kennen Sie wahrscheinlich bereits einige der Argumente, die ich vorbringen werde. Ich denke, es ist dennoch eine gute Idee, mitzumachen, da Sie sich möglicherweise bereits für eine minimalistischere Vorlage-Engine entschieden haben und ich möchte, dass Sie auch die Vorteile von Slim sehen.

Bevor wir uns damit befassen, warum Slim cool ist, möchte ich erläutern, was Slim eigentlich ist und was es für Sie tut. Die Dokumentation fasst das ganz gut zusammen:

"Slim ist ein schneller, leichter Vorlage-Engine mit Unterstützung für die Schienen 3 und 4".

Sie können es auch mit Sinatra und sogar einfachem Rack verwenden. Wenn Sie es also leid sind, ERB zum Schreiben Ihrer Vorlagen zu verwenden, oder wenn Sie mit dem, was Haml zu bieten hat, nicht besonders zufrieden sind, dann ist Slim genau der richtige Baum zum Bellen.

In Bezug auf die Syntax versuchten die Leute hinter Slim, eine Antwort auf die folgende Frage zu finden: "Was ist das Minimum, um diese Arbeit zu machen?" Für das Schreiben der minimal möglichen Menge an Front-End-Code klingt dies sicher nach der richtigen Frage.

Bietet Slim eine perfekte Lösung für alle Ihre Vorlagenprobleme? Wahrscheinlich nicht, aber ehrlich gesagt, könnte es einfach das Beste bieten! Ist es leicht zu lernen? Ich denke schon, aber es ist schwer zu wissen, was andere Leute für einfach halten. Ich würde das allerdings sagen: Es ist etwas gewöhnungsbedürftig, aber es ist definitiv keine Raketenwissenschaft. Sie müssen sich also nicht einschüchtern lassen, wenn Sie ein bisschen neu in der Codierung sind. Wirst du eine gute Zeit damit haben? Absolut!

Warum also Slim? Die Antwort ist ziemlich einfach, denke ich. Ihr Markup sollte so lesbar und schön wie möglich sein! Sie sollten eine gute Zeit damit haben, und je weniger Zeit Sie damit verbringen müssen, durch Tonnen von Tag-Materie zu waten, desto besser.

Was ist schön, könnte man fragen? Das ist natürlich keine Antwort, die ich versuchen werde, aber es tut selten weh, in dieser Hinsicht minimal zu sein. Wie wäre es, super kryptisch zu werden, weil die Vorlage-Engine versucht, super klug zu sein, wenn es darum geht, minimal zu sein? Das ist ein faires Anliegen, und Sie werden erfreut sein zu hören, dass das Team hinter Slim dies sehr ernst nimmt. Sie möchten so viel wie möglich aus einfachem altem HTML entfernen und nur die wesentlichen Teile enthüllen - alles ohne zu kryptisch zu werden. Ihr Kernteam versucht, noch einen Schritt weiter zu gehen, und sie sind wirklich besorgt über die Ästhetik von Slim-Code. Ziemlich gutes Geschäft, finden Sie nicht?

Ist es nicht viel schöner, wenn Sie nur einen Blick auf eine Vorlage werfen und leicht verdauen können, was los ist? Vorlagen können zu einem sehr überfüllten Ort werden - selbst wenn Sie Partials intelligent nutzen - und infolgedessen möchten Sie das Rauschen auf ein absolutes Minimum reduzieren.

Haben Sie vielleicht die eingerückte Sass-Syntax (.sass) ausprobiert? Ich hoffe du hast es, denn es ist einfach nur Dope! Wenn ja, werden Sie wahrscheinlich eine ähnliche Wertschätzung für das haben, was Slim zu bieten hat. Es ist auch Whitespace-empfindlich, was zu wirklich prägnantem und lesbarem Code führt. Nehmen wir diesen HTML/ERB-Code und vergleichen ihn mit Slim.

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <header class="navbar">
      <div class="logo">
        <%= link_to "sample app", 'root_path', id: "logo" %>
        <nav>
          <ul class="navbar-right">
            <li><%= link_to "Home",   'root_path' %></li>
            <li><%= link_to "Help",   'help_path' %></li>
            <li><%= link_to "Log in", 'login_path' %></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="main">
      <%= yield %>
    </div>
  </body>
</html>

Schauen wir uns das Slim-Äquivalent an:

doctype html
html
  head
    title = full_title(yield(:title))
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  body
    header.navbar
      .logo
        = link_to "sample app", 'root_path', id: "logo"
        nav
          ul.navbar-right
            li
              = link_to "Home",   'root_path'
            li
              = link_to "Help",   'help_path'
            li
              = link_to "Log in", 'login_path'
    .main
      = yield

Das erste, was die Leute oft erkennen, ist: "Hey, keine schließenden Tags!" Cool? Sicher, Sie sind noch nicht an die Syntax gewöhnt, daher sieht sie zunächst vielleicht etwas fremd aus, aber ich bin sicher, Sie können verstehen, wie prägnant sie liest. Keine linken/rechten spitzen Klammern und keine Notwendigkeit, Divs und minimalistische Selektoren zu schreiben, sodass wir uns stattdessen auf den Namen konzentrieren können, den die IDs und Klassen haben. Es fühlt sich viel weniger chaotisch und organisierter an, findest du nicht?

Zum Vergleich hier die Haml-Version. Es ist wirklich nicht als Gelegenheit gedacht, Haml zu verprügeln - es zeigt Ihnen nur, wie ähnlich es ist, aber auch, dass Slim mit seiner Wahl der minimalen Syntax noch einen Schritt weiter geht. Das Ergebnis ist, dass es noch eleganter ist als Haml, denke ich.

Warum so minimal gehen und mich trotzdem dazu bringen, überall das %-Zeichen einzugeben? Mein Zeigefinger hat keine besondere Motivation, ständig Shift-5 zu greifen. Können Sie dieses Verhalten anpassen? Ziemlich sicher, oder zumindest hoffe ich es! Aber das Design scheint in dieser Hinsicht etwas fehlerhaft und weniger spartanisch im Vergleich zu Slim. Mir ist klar, dass dies auch Geschmackssache ist, also lasse ich es dabei.

Haml

!!!
%html
  %head
    %title= full_title(yield(:title))
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  %body
    %header.navbar
      .logo
        = link_to "sample app", 'root_path', id: "logo"
        %nav
          %ul.navbar-right
            %li= link_to "Home",   'root_path'
            %li= link_to "Help",   'help_path'
            %li= link_to "Log in", 'login_path'
    .main
      = yield

Bevor wir in die fleischigen Bereiche springen, lassen Sie mich einen Moment aufgedunsen sein und zusammenfassen, was meiner Meinung nach das Lernen von Slim zu einer lohnenden Investition Ihrer Zeit macht:

Es ist schnell.
Super lesbar.
Es hat eine intelligente Syntax.
Seine Ästhetik ist minimal.
Es ist sehr konfigurierbar
Es ist zeigefingerfreundlich.
Es handelt sich um Vorlagen auf Boss-Ebene.
Es macht Spaß zu schreiben und sieht gut aus.
Standardmäßig wird automatisch HTML maskiert.
Super schöne Integration von Rails und Sinatra.
Sehr minimale Vorlagen, die einfach zu pflegen sind.
Es ist umfangreich und ermöglicht es Ihnen, Plugins und Erweiterungen zu schreiben.
Es gibt einen logischen Modus für Zeiten, in denen Sie HTML ausgeben möchten, aber keinen Grund haben, Ruby-Code einzuschließen.
Es verfügt über konfigurierbare Verknüpfungen für Tags - eine sehr nette Funktion, um die Engine an Ihre Bedürfnisse anzupassen.
Und schließlich, weil die Syntax von Slim von einem sehr coolen Motto geleitet wird: "Was ist das Minimum, das erforderlich ist, damit dies funktioniert?". Das ist sehr schwer nicht zu mögen.

Was sind Vorlagen?

Wenn Sie sich in Bezug auf die Programmiererfahrung eher als Neuling betrachten, werde ich versuchen, Ihnen eine kurze Rundreise zu ermöglichen, bevor wir Slim verwenden. Wenn Leute über Vorlagen sprechen, meinen sie meistens einfaches HTML-Markup mit dynamischem Code, der häufig zur Flusskontrolle, Objektinjektion oder zum teilweisen Rendern von Vorlagen (Teilvorlagen) verwendet wird. Zum Beispiel, wenn ein Controller Ihnen Instanzvariablen zur Verfügung stellt, die von der Ansicht über(Instanz-) Variablensubstitution verwendet werden können, um Attribute von diesem Objekt anzuzeigen. All dies geschieht über den Vorlagenprozessor Ihrer Wahl - ERB, Haml, Slim und dergleichen -, der alle Ihre Webvorlagen zu einer endgültigen Webseite kombiniert. Vorlagen können auch zum Generieren von XML- und RSS-Feeds sowie anderer Formen strukturierter Textdateien verwendet werden.

Mit Vorlagen können Sie verschiedene „Layouts“ definieren, die bestimmte Teile Ihrer Website behandeln, sowie die Daten, die systematisch mit der geringsten Wiederholung angezeigt werden müssen. Seit Sie mit Rails spielen, verwenden Sie ERB sicherlich für genau diese Szenarien. ERB nimmt die Nur-Text-Teile, übergibt sie dem endgültigen Dokument und verarbeitet nur Code, der als solcher gekennzeichnet ist. Ich gehe nicht näher auf die Funktionsweise von ERB ein und nehme an, dass Sie ein grundlegendes Verständnis haben, bevor Sie in Slim eintauchen. Ich würde die Verwendung von Slim nicht empfehlen, wenn Sie nicht bereits mit der Standardvorlage von Rails vertraut sind, da Sie mit Slim viel einfacher spielen können, wenn Sie verstehen, wie dies in Rails sofort funktioniert.

Unten finden Sie ein grundlegendes ERB-Beispiel für eine Vorlage, in der eine Sammlung von Missionen angezeigt wird, die einem @agent-Objekt zugeordnet sind. Direkt darunter wird auch eine Methode aus einem Ruby Gem verwendet, um die Sammlung @missions zu paginieren.

<% if @agent.missions.any? %>
  <h4>Missions (<%= @agent.missions.count %>)</h4>
  <ul class="missions">
    <%= render @missions %>
  </ul>
  <%= will_paginate @missions %>
<% end %>

Dies ist ein kleiner Abschnitt einer Vorlage, der deutlich zeigt, dass es sich lediglich um einen statischen HTML-Teil handelt, der einige dynamische Injektionen aus Ruby-Code enthält. Wenn wir solche Vorlagen nicht verwendet hätten, müssten wir manuell Code für jedes neue Objekt schreiben, das auf einer Seite angezeigt werden soll. Ich bin mir nicht sicher, aber ich kann mir keinen größeren Albtraum oder Zeitverschwendung vorstellen. Vorlagen bieten uns ein praktisches Werkzeug, um unsere Ansichtsebene intelligent und dynamisch zu gestalten, ohne uns zu wiederholen.

Wie Sie auch in diesem Beispiel sehen können, können wir mit Vorlagen Teilvorlagen verwenden, die wir bei Bedarf rendern können. Hier hätten wir irgendwo einen _mission.html.erb-Teil, der uns hilft, eine Sammlung von @mission-Objekten zu durchlaufen, die wiederum in unserer missions klasse aufgelistet werden.

Wie Sie sehen können, sind Vorlagen nichts Magisches, aber sehr praktisch, um die Entwicklung von Web-Apps wesentlich effizienter und organisierter zu gestalten. Ich wollte nur sicherstellen, dass wir alle auf derselben Seite sind, bevor ich in Slim eintauche.

Was ist mit ERB und Haml?

Wenn Sie diese Tools verwenden möchten, ist dies vollkommen in Ordnung. Daran ist nichts auszusetzen. Die Sache ist, wenn Sie nach etwas Klügerem suchen, das minimalistischer ist, ist es schwierig, etwas zu finden, das über Slim hinausgeht. Für mich ist es die optimierteste Vorlagenlösung in Ruby Land, die ich kenne. Sie funktionieren alle einwandfrei, daher ist es eine Frage der persönlichen Präferenz.

Anfangen

Slim mit Rails

Kein Wunder, dafür gibt es ein gem.

Gemfile

1	gem 'slim-rails'

Shell

1	bundle install

Das war's, wir sind fertig. Da Sie dieses Juwel installiert haben, wird Slim beim Laden Ihrer App geladen und initialisiert. Wenn Sie rails generate controller, erhalten Sie automatisch .slim-Ansichtsdateien für Ihre Ansicht - .html.erb-Dateien nicht mehr. Bei Gerüsten funktioniert es genauso, aber ich hoffe, Sie verwenden sie nicht wirklich!

Um dieses Verhalten für Benutzer zu demonstrieren, die mit der Verwendung von Rails-Generatoren noch nicht vertraut sind, erstelle ich einen Controller für Secret Service-Mitarbeiter, der alle Standard-REST-Controller-Aktionen enthält:

Shell

1	rails generate controller SecretServiceOperatives index new create show edit update destroy

Unter anderem erhalten Sie alle benötigten .slim-Dateien. Rails fügt dort auch eine zusätzliche .html-Datei ein - Sie können diese natürlich entfernen, wenn es Sie stört. Alles, was zählt, ist, dass die Slim-Dateierweiterung bereits vorhanden ist und für die Vorverarbeitung Ihres Slim-Codes bereit ist. Yay!

...

invoke  slim
     create    app/views/secret_service_operatives
     create    app/views/secret_service_operatives/index.html.slim
     create    app/views/secret_service_operatives/new.html.slim
     create    app/views/secret_service_operatives/create.html.slim
     create    app/views/secret_service_operatives/show.html.slim
     create    app/views/secret_service_operatives/edit.html.slim
     create    app/views/secret_service_operatives/update.html.slim
     create    app/views/secret_service_operatives/destroy.html.slim

...

Der nächste Schritt wäre, Ihr Anwendungslayout zu öffnen und den Boilerplate-Code durch etwas Slim zu ersetzen. Vergessen Sie auch nicht, die Datei application.html.erb in application.slim umzubenennen (oder application.html.slim, wenn Sie möchten). Wir haben uns bereits etwas verkleinert - sogar der Dateiname hat etwas an Gewicht verloren.

app/views/layouts/application.slim

doctype html
html
  head
    title
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  body
    header.navbar
      .logo
        = link_to "Spy app", 'root_path', id: "logo"
        nav
          ul.navbar-right
            li
              = link_to "Home",    'root_path'
            li
              = link_to "Help",    'help_path'
            li
              = link_to "Sign up", 'sign_up_path'
            li
              = link_to "Log in",  'login_path'
    .main
      h1.welcome Welcome to Boss Level Slim Templates!
      = yield

Nichts Besonderes, aber ein guter Anfang - und so einfach wie möglich, denke ich.

Bildschirmfoto

A landing page for starting with Slim Templates

Nebenbei bemerkt, wenn Sie jemals neugierig sind, welche Version des Edelsteins Sie installiert haben, sagt Ihnen dieser kleine Befehl - er ist natürlich auch für jeden Edelstein praktisch:

Shell

1	bundle show 'slim-rails'

Hier erfahren Sie, wo es gespeichert ist und welche Version dieses gem derzeit hat. Die Ausgabe sieht folgendermaßen aus:

1	/Library/Ruby/Gems/2.3.0/gems/slim-rails-3.0.1

Slim mit Sinatra

Für die Sinatra-Enthusiasten unter Ihnen wollte ich auch erwähnen, wie man anfängt. Zuerst müssen wir natürlich den Edelstein installieren.

Shell

1	gem install slim

Und danach sind Sie fast fertig. In Ihrer Sinatra-App benötigen Sie lediglich Slim und können loslegen.

some_sinatra_app.rb

require 'sinatra'
require 'slim'

get('/') { slim :index }

__END__

@@ index
doctype html
html
  head
    title Slim Templates
    body
      h1 Boss Level Ruby Templates With Slim

Hier habe ich eine Inline-Vorlage verwendet, um das Slim-Markup in dieselbe Datei zu schreiben, und Sinatra mitgeteilt, dass ich Slim für die Indexdatei verwenden möchte, wenn eine get-Anforderung an den Root-Pfad gesendet wird. Ich musste nur auf die Inline-Vorlage in einem geschweiften Klammerblock verweisen. Was Sie unter dem Index @@ index, der die Indexvorlage kennzeichnet, ist eine Whitespace-sensitive Slim-Syntax.

Bildschirmfoto

Another shot of the landing page template

Zeit, Ihnen zu zeigen, wie man Slim schreibt.

Syntax

HTML-Tags

HTML <!DOCTYPE> Deklaration

Beginnen wir mit der einfachsten, der Doctype-Deklaration. Wie Sie wahrscheinlich wissen und bereits vergessen haben, muss dies über Ihrem HTML-Dokument deklariert werden - vor dem eigentlichen <html>-Tag. Zu Ihrer Information, es ist kein HTML-Tag und weist den Browser über die Version der HTML-Seite an.

Unter den verschiedenen Versionen für <!DOCTYPE> gibt es nur eine für HTML5: <!DOCTYPE html> - Gott sei Dank! - genau das bekommen wir, wenn wir doctype html oder doctype 5 in Slim schreiben.

doctype html
html
  head

doctype 5
html
  head

ID Shortcut `#` und Class Shortcut `.`

Das Schreiben von Front-End-Code bedeutet eine Menge Klassen und sehr wenige IDs - ich hoffe. Um zu vermeiden, dass Sie diese immer wieder schreiben, trifft Slim Sie mehr als zur Hälfte und lässt Sie den gesamten Prozess grundsätzlich kurzschließen. Lassen Sie mich Ihr zeigen, was ich meine. Nehmen Sie den folgenden Slim-Code:

#logo
h1.header
.evil-wrapper
  h2#author-name
  ul.books

Dies wird zu dieser HTML-Ausgabe kompiliert:

<div id="logo"></div>
<h1 class="header"></h1>
<div class="evil-wrapper">
  <h2 id="author-name"></h2>
  <ul class="books"></ul>
</div>

Wie Sie sehen können, schlägt der Punkt Slim vor, dass Sie eine Klasse verwenden möchten, und der folgende Name ist der Name, den Sie benennen möchten. Das Gleiche gilt für IDs - Sie verwenden einfach das Hash-Symbol (auch bekannt als Pfundzeichen), das den Trick ausführt. Kluge Leser haben sicherlich erkannt, dass die Versionen ohne führendes Tag die Erstellung eines Div mit der entsprechenden Klasse oder ID auslösen - was für <div id="logo"></div> und <div class="evil-wrapper"></div> zu sehen ist. Ziemlich praktisch, finden Sie nicht?

Sie können Ihren Slim-Code auch ausdrucksvoller gestalten, wenn Sie möchten. Niemand hindert Sie daran, Ihre guten alten Klassen und Ausweise von Hand zu schreiben. Wenn Sie sich irgendwie daran gebunden fühlen, machen Sie es! Ich mag die prägnantere Version, weil ich dadurch auch vermeiden kann, ständig Anführungszeichen und wiederholten Text einzugeben. Es liegt an Ihnen - was auch immer Sie glücklich macht! Der folgende Code ist etwas ausführlicher, rendert jedoch denselben HTML-Code wie oben:

Slim:

div id='logo'
h1 class='header'
div class='evil-wrapper'
  h2 id='author-name'
  ul class='books'

Ist das nicht etwas Schönes? Stellen Sie sich all diese gefürchteten HTML-Tags vor, die Sie nicht selbst schreiben müssen, und entfernen Sie alle überschüssigen umschließenden spitzen Klammern. Sicher, Ihr Code-Editor kann einen Großteil dieser Arbeit auch für Sie erledigen, aber liest Ihr Editor den Code auch für Sie? Genau!

Wenn Sie zurückkommen, um Ihren Code zu lesen, möchten Sie auch ein prägnantes Dokument, das sich visuell sehr leicht verdauen lässt. Ich denke, dieses einfache Beispiel zeigt am besten, was ein Tool wie Slim zu bieten hat. Es sind diese kleinen Dinge, die auf lange Sicht zu einem großartigen Werkzeug und Zeitersparnis führen. Selbst wenn Sie es nur für genau diese Funktionalität verwenden und die anderen erweiterten Funktionen vorerst ignorieren, würde sich die Umstellung auf Slim bereits auszahlen.

Inline-Tags

Angenommen, Sie haben mehrere Tags, die Sie inline haben möchten, um kompakter zu sein, oder was auch immer. Anstatt in eine neue Zeile zu wechseln, können Sie sie verketten, indem Sie diese Tags durch einen Doppelpunkt trennen :. Beide folgenden Beispiele rendern dieselbe Ausgabe.

Slim:

1	ul
2	li.first
3	a href="/a" A link
4	li
5	a href="/b" B link
6
7	ul
8	li.first: a href="/a" A link
9	li: a href="/b" B link

HTML-Ausgabe:

1	<ul>
2	<li class="link">
3	<a href="/a">A link</a>
4	</li>
5	<li>
6	<a href="/b">B link</a>
7	</li>
8	</ul>

Die zweite Version ist aufgrund der Inline-Tags minimaler und würde meine Präferenz sein. Kompakt ist doch gut, oder? Ich denke, dieser Fall zeigt gut, dass Slim gleichmäßig zwischen kompakt und kryptisch balanciert. Ja, es ist etwas gewöhnungsbedürftig, und in einigen Fällen sind zusätzliche Attribut-Wrapper hilfreich (weitere Informationen zu Wrappern finden Sie weiter unten). Nennen Sie mich verrückt, aber ich bin mir ziemlich sicher, dass Sie Slim im Handumdrehen wie normales HTML-Markup lesen werden.

Textinhalt

Das Schreiben von Text ist natürlich so einfach wie erwartet. Fügen Sie es einfach nach Ihren Tags hinzu.

Slim:

1	h1#welcome-header Your funky welcome message goes here!

HTML-Ausgabe:

1	<h1 id="welcome-header">
2	Your funky welcome message goes here!
3	</h1>

Nichts mehr hinzuzufügen, so einfach wie möglich!

Attribute

HTML-Attribute, die zusätzliche Informationen zu den Tags bereitstellen, können wie folgt eingefügt werden:

Slim:

1	a href="https://slim-lang.com" title='Slim Homepage' Goto the Slim homepage
2
3	img alt="James Bond posing together with M" src="image.png" height="90" width="90"/

HTML-Ausgabe:

1	http://slim-lang.com" title="Slim Homepage">Goto the Slim homepage
2
3	<img alt="James Bond posing together with M" height="90" src="image.png" width="90" />

Sie können sie grundsätzlich verketten, und Slim trennt sie vom Textinhalt - sofern vorhanden. Wenn Sie genau hinschauen, können Sie sehen, dass unser img-Tag einen abschließenden Schrägstrich hat, der Tags in Slim explizit schließt. Für Bilder oder kompliziertere Tags ist dies sicherlich nützlich. Übrigens erfordert HTML5 nicht, dass Sie die Attributnamen in Kleinbuchstaben schreiben oder Anführungszeichen um Attributwerte verwenden. Es wird dennoch vom W3C als Standardpraxis empfohlen.

Zusammenführen von Attributen

Wenn Sie mehrere Selektoren wie Klassen oder IDs pro Tag haben, können Sie dies auch prägnanter schreiben, indem Sie sie verketten. Diese Selektoren werden automatisch durch Leerzeichen begrenzt.

Slim:

1	h2#big-header.agent-header.tagline Funky headline
2
3	h3.small-header.agent#007.tagline Small funky headline

HTML-Ausgabe:

<h2 class="agent-header tagline" id="big-header">
  Funky headline
</h2>
<h3 class="small-header agent tagline" id="007">
  Small funky headline
</h3>

Nicht, dass all diese IDs und Klassen auf diese Weise verwechselt werden, stellt Best Practices oder ähnliches dar, aber es ist leicht zu erkennen, wie Slim in einem derart verschlungenen Beispiel funktioniert. Ziemlich cool, oder? Vorsicht: Die Verteilung dieser Selektoren auf mehrere Zeilen funktioniert ohne Attribut-Wrapper nicht (siehe nächster Abschnitt).

Eine andere Möglichkeit wäre, ein Array mit Zeichenfolgen oder nur Symbolen zum Zusammenführen von Attributen zu verwenden.

Slim:

1	h2 class=["agent-header","tagline"] Funky headline
2
3	h3 class=:agent,:double_o_seven,:tagline Small funky headline

HTML-Ausgabe:

<h2 class="agent-header tagline">
  Funky headline
</h2>

<h3 class="agent double_o_seven tagline">
  Small funky headline
</h3>

In meinem Buch würde ich dies als gut zu wissen bezeichnen, aber ich versuche nicht, es aktiv zu nutzen. Es könnte praktisch sein, wenn Sie etwas interpolieren möchten, nehme ich an.

Attribut-Wrapper

Slim bietet Ihnen Wrapper, mit denen Sie Ihre Attribute leichter lesen können. Es ist möglicherweise nicht immer notwendig, aber es ist praktisch zu wissen, ob ein Tag mit vielen Attributen etwas gezähmt werden muss. Sie können eines der folgenden Trennzeichen verwenden, um Attribute zu verpacken: {}, [] und ().

Slim:

a{href="http://slim-lang.com" title='Home page'} Goto the home page

a{href="http://slim-lang.com/about.html" title='About page'
  class='link' id='about'} Goto the about page

h2[id="big-header" class="agent-header tagline"] Funky headline

h3(id="small-header"
   class="agent 007 tagline") Some other funky headline

HTML-Ausgabe:

<a href="http://slim-lang.com" title="Home page">Goto the home page</a>

<a class="link" href="http://slim-lang.com/about.html" id="about" title="About page">Goto the about page</a>

<h2 class="agent-header tagline" id="big-header">
  Funky headline
</h2>

<h3 class="agent 007 tagline" id="small-header">
  Some other funky headline
</h3>

Wenn dies für Sie eine einfachere Möglichkeit ist, das Markup zu organisieren, machen Sie es! Wie durch das zweite a- und das h3-Tag veranschaulicht, können Sie Attribute und Selektoren sogar über mehrere Zeilen verteilen. Die Einrückung scheint in Bezug auf die Empfindlichkeit von Leerzeichen sehr verzeihend durchgesetzt zu werden. Ich vermute jedoch, dass es nicht lange dauern wird und Sie nicht viel Wrapper benötigen. Sie werden sich in kürzester Zeit an die Barebones Slim-Syntax gewöhnen und sie für besondere Anlässe speichern - wie Sie es wahrscheinlich sollten.

Bei Inline-Tags können sich Wrapper von Zeit zu Zeit als nützlich erweisen. Wie Sie auch im folgenden Beispiel sehen können, können Sie Leerzeichen mit den Trennzeichen verwenden, um die Lesbarkeit zu verbessern - nur eine Randnotiz.

ul
  li.long-link: a{ href="http://slim-lang.com" title='Home page' } Goto the home page
  li.long-link.class.with-id: a[ href="http://slim-lang.com/about.html" title='About page'
                                 class='link' id='about' ] Goto the about page

  li.c-link: a(href="/c") C link
  li: a[href="/d"] D link

HTML-Ausgabe:

<ul>
  <li class="long-link">
    http://slim-lang.com" title="Home page">Goto the home page
  </li>
  <li class="long-link class with-id">
    http://slim-lang.com/about.html" id="about" title="About page">Goto the about page
  </li>
  <li class="c-link">
    <a href="/c">C link</a>
  </li>
  <li>
    <a href="/d">D link</a>
  </li>
</ul>

Attributinterpolation

Hat jemand Interpolation gesagt? Innerhalb von Attributen in Anführungszeichen können Sie Ruby verwenden, um bei Bedarf Code zu interpolieren. Ein einfaches Beispiel sollte ausreichen, um dieses Verhalten zu veranschaulichen:

Slim:

1	a href="http://#{url}" Goto #{url}

Auch hier nicht etwas, das Sie täglich verwenden könnten, aber es ist sicher gut, es in Ihrer Trickkiste zu haben. Die Attributwerte werden standardmäßig maskiert. Wenn Sie dieses Verhalten deaktivieren müssen, verwenden Sie einfach ein ==.

1	a href=="http://#{url}" Goto #{url}

Sie können auch Ruby verwenden, um mit Ihren Attributen zu spielen. Wirf einfach ein Gleichheitszeichen hinein, wo Ruby-Code ausgeführt werden soll, und schon kann es losgehen. Im zweiten Artikel finden Sie weitere Informationen zur Ausgabe von Ruby-Code in Ihren Slim-Vorlagen.

1	ul
2	li id="agent_#{agent.id}" class=agent.role
3	a href=(path_to_agent agent) =agent.name

Das bedeutet natürlich auch, dass Sie einfache Boolesche Werte auch in Ihren Attributen verwenden können.

1	input type="text" disabled=false
2	input type="text" disabled=true
3	input type="text" disabled=nil

Groovy, lassen Sie uns weitermachen!

Abschließende Gedanken

Ich hoffe, Sie haben jetzt ein gutes Gefühl dafür, warum Slim eine gute Wahl für all Ihre Vorlagenbedürfnisse im Ruby-Land ist. Wenn Sie im Moment immer noch Haml oder ERB bevorzugen, können Sie mit der Zeit einen Appetit auf Slim entwickeln. Ich sage nicht, dass es ein erworbener Geschmack ist oder so, nur, dass es nicht etwas ist, das viele Menschen zu Beginn ihrer Karriere aufgreifen - vielleicht weil sie noch nicht den Schmerz verspürt haben, all diese überschüssigen Aufschläge immer und immer wieder zu schreiben. Dieser Artikel sollte Ihnen die Grundlagen vermitteln, die Sie für den Einstieg benötigen.

Slim hat natürlich mehr zu bieten - insbesondere einige erweiterte Funktionen, die Sie unbedingt ansehen möchten. Im nächsten Artikel beginnen wir mit einem detaillierteren Abschnitt über die Ausgabe von Ruby-Code in Ihre Vorlagen - und natürlich noch viel mehr. Wir sehen uns dort!

Eine Einführung in Slim-Vorlagen

Warum Slim?

Haml

Was sind Vorlagen?

Was ist mit ERB und Haml?

Anfangen

Slim mit Rails

Gemfile

Shell

Shell

app/views/layouts/application.slim

Bildschirmfoto

Shell

Slim mit Sinatra

Shell

some_sinatra_app.rb

Bildschirmfoto

Syntax

HTML-Tags

HTML <!DOCTYPE> Deklaration

ID Shortcut # und Class Shortcut .

Slim:

Inline-Tags

Slim:

HTML-Ausgabe:

Textinhalt

Slim:

HTML-Ausgabe:

Attribute

Slim:

HTML-Ausgabe:

Zusammenführen von Attributen

Slim:

HTML-Ausgabe:

Slim:

HTML-Ausgabe:

Attribut-Wrapper

Slim:

HTML-Ausgabe:

HTML-Ausgabe:

Attributinterpolation

Slim:

Abschließende Gedanken

ID Shortcut `#` und Class Shortcut `.`