So richten Sie eine statische Webseite mit Middleman ein

() translation by (you can also view the original English article)

Dies ist Teil einer kleinen Serie über Middleman, „einen statischen Seitengenerator, der alle Verknüpfungen und Tools der modernen Webentwicklung verwendet“. In den ersten beiden Tutorials werden die Grundlagen behandelt. Anschließend setzen wir das Gelernte mit einem praktischen Projekt in die Tat um. Middleman erfordert die Verwendung von Ruby, aber zögern Sie nicht weiterzulesen, wenn Ihnen dies fremd ist. Diese Serie ist völlig für Anfänger geeignet.

Middleman und statische Seiten

Was ist in letzter Zeit mit statischen Webseiten los? Nun, sie sind schnell, ziemlich einfach einzurichten und leichtgewichtig. Da Sie keine datenbankbezogenen Dienste bereitstellen, sind statische Webseiten ziemlich zuverlässig und schnell. HTML, CSS und bei Bedarf JS - das ist alles.

Viele Menschen verwenden statische Webseiten, um ihre Blogs und persönlichen Seiten einzurichten. Startseiten, die stark frequentiert sind, sind ebenfalls ein guter Kandidat. HealthCare.gov, von der Obama-Administration, verwendete Jekyll, einen anderen statischen Seitengenerator, für ihre Seite. Wenn Sie schnell und einfach etwas benötigen, das sich sofort skalieren lässt, können statische Webseiten erstaunlich sein. Zumal Sie sie kostenlos auf GitHub Pages oder Heroku gehostet werden können.

Wahrscheinlich begannen die gesamten statischen Seiten vor ein paar Jahren, als Jekyll kam. Natürlich sind statische Seiten so alt wie die erste „Hallo Welt!“ Von Sir Tim Berners-Lee, aber in den letzten 15 Jahren waren datenbankgestützte Apps „alles, was zählt“. Vor ein paar Jahren brauchte einer der Mitbegründer von GitHub eine bessere Möglichkeit Blogs zu schreiben und er entwickelte Jekyll - diesen angesagten statischen Seitengenerator für „Bloggen wie ein Hacker“. Ich habe es ein paar Mal benutzt und habe nur gute Dinge zu berichten. Das Kernteam ist auch großartig. Jedenfalls waren sich mein Herausgeber und ich für diese Serie einig, dass es interessanter wäre, über Middleman zu berichten. Man kann mit Recht sagen, dass Middleman von Anfang an ein bisschen weniger „blogbewusst“ ist, aber dennoch genauso leistungsfähig und qualitativ hochwertig.

Ruby

Middleman verwendet Ruby und bietet eine ziemlich umfangreiche Reihe von Funktionen, um coole Sachen zu erstellen. Wenn Sie jemals Rails oder Sinatra verwendet haben, werden Sie sich wie zu Hause fühlen. Es scheint, dass Middleman und Jekyll die Anlaufstelle für statische Seiten in der Ruby-Community sind. Ich habe auch immer mehr Designer argumentieren hören, dass Sie sie gerne zum Prototyping und zum Einrichten ihrer eigenen persönlichen Seiten verwenden. Viele dieser statischen Seitenframeworks haben gemeinsam, dass sie recht einfach zu verwenden sind.

In diesem Artikel gehe ich davon aus, dass Sie zumindest ein wenig an Ruby interessiert sind und es auf Ihrem System installiert haben. Wenn Sie Hilfe benötigen, schauen Sie sich Ruby for Newbies an: Installieren von Ruby und Erste Schritte von Andrew Burgess.

Es ist auch wichtig zu wissen, wie man mit RubyGems umgeht, und auch Andrew Burgess' Ruby for Newbies: Arbeiten mit Gems hilft Ihnen bei Bedarf beim Einstieg. Ich werde mein Bestes tun, um nicht mit Programmierkonzepten über ihren Kopf zu wachsen, aber ich werde nicht auf Programmiergrundlagen wie Schleifen, Codeblöcke und dergleichen eingehen. Keine Sorge, für die Neulinge unter Ihnen hat Middleman nicht so viele bewegliche Teile, und ich werde zeigen, wie einfach es ist, sie zu lernen.

Installation und erste Schritte

Sie haben also Ruby und RubyGems am Riemen? Großartig, dann können wir loslegen.

Öffnen Sie Ihr Terminal und geben Sie Folgendes ein:

1	gem install middleman

Wenn Ihnen die Berechtigung dazu verweigert wird, müssen Sie dem Befehl sudo voranstellen und Ihr Systemadministratorkennwort eingeben. Nach Abschluss dieses Vorgangs können Sie über die Eingabeaufforderung einige praktische Middlemanbefehle verwenden.

middleman init

Dieser Befehl initiiert ein neues Projekt. Sie müssen den Namen Ihrer App angeben und dann die Eingabetaste drücken.

1	middleman init your_fancy_app

Es werden auch zusätzliche Argumente benötigt, z. B. mit welcher Vorlage Sie beginnen möchten. Dies macht es sehr praktisch, Ihre Apps von Anfang an mit Vorlagen anzupassen, wodurch sich wiederholende Einrichtungsaufgaben erheblich reduziert werden! Weitere Informationen zu Vorlagen finden Sie in einem späteren Lernprogramm.

1	middleman init your_fancy_blog --template=blog

1	middleman init your_fancy_mobile_app --template=mobile

middleman server

Middleman wird mit einem lokalen Server für Ihre Entwicklung geliefert. Durch das Starten können Sie Ihre Seite unter https://localhost: 4567/ ** anzeigen. Wenn Sie nur ** middleman ohne zusätzliches Argument eingeben, wird auch Ihr Server gestartet. Fahren Sie Ihren Server mit STRG-c herunter.

middleman build

Sobald Sie etwas haben, das Sie auf einen mit dem Internet verbundenen Server stellen können, müssen Sie Ihre Seite erstellen. Dies bedeutet, dass alles, was Sie in Ihrem /source-Ordner vorbereitet haben, verarbeitet wird und die endgültige Ausgabe in den /build-Ordner ausgegeben wird, den middleman auch für Sie erstellt. Alle Ihre Dateien, die Preprozessoren wie Slim, Haml, Sass, CoffeeScript verwenden, werden in ihre jeweiligen Gegenstücke verarbeitet und in Ihr /build-Verzeichnis gestellt.

middleman deploy

Sobald Ihre Seite für das Internet bereit ist, stellt dieser Befehl Ihren Ordner /build auf Ihrem Webserver bereit. Jedes Update, das Sie vornehmen, durchläuft diesen Prozess.

LiveReload

Tun Sie sich selbst einen Gefallen und aktivieren Sie LiveReload, um Ihre Seiten nach Änderungen an Ihren HTML-, Sass- oder JS-Dateien automatisch zu aktualisieren. Dies ist während der Entwicklung von großem Komfort - Sie werden es nicht bereuen! Middleman bietet heutzutage LiveReload sofort an - Sie müssen es nur noch

1	gem 'middleman-livereload'

zu Ihrem Gemfile hinzufügen und kommentieren Sie die folgende Zeile in config.rb:

1	# Reload the browser automatically whenever files change
2	activate :livereload

Dann bündeln Sie Middleman

1	bundle
2	#or
3	bundle exec middleman

Source vs. Build vs. Deploy

Beginnen wir also mit den Ordnern /source und /build. Zwischen ihnen befindet sich die Trennlinie, die Ihre Entwicklungs- und Produktionsabschnitte trennt. Wenn Sie Ihren lokalen Webserver für die Entwicklung verwenden, wird /source verwendet, um Ihre App bereitzustellen. Der Ordner /build wird von Ihren nicht lokalen Servern verwendet, um Ihre statischen Seiten bereitzustellen. /build wird jedes Mal erstellt, wenn Sie den middleman build in Ihrer Befehlszeile verwenden. Daher sollten Sie darauf achten, dass Sie nicht versehentlich Ihre Zeit mit dem Codieren in /build verbringen, da diese Arbeit nach dem Build-Prozess verschwindet. Im Allgemeinen soll Ihre gesamte Entwicklung in /source erfolgen.

Der Erstellungsprozess erstellt die statischen Seiten, die Ihr Server hosten soll. Jede Datei in Ihrem /source-Ordner wird verarbeitet und dann in /build gespeichert. Wie bereits erwähnt, werden Ihre Sass, CoffeeScript, Slim / Haml und Partials zu ihren zuverlässigen Gegenstücken verarbeitet. Alle Layouts werden ebenfalls zusammengesetzt. Wenn Sie die Komprimierung für diese Dateien aktiviert haben, ist dies der Moment, in dem sie ebenfalls "verunstaltet" werden. Während dieses ganzen Shabang wird der Ordner /build verjüngt, indem Dateien entfernt werden, die keine Referenz mehr in /source haben. Während des middleman build lösen alle Änderungen, die Sie an Dateien in /source vorgenommen haben, eine Regeneration neuer entsprechender statischer Dateien für /build aus.

Der Bereitstellungsprozess ist der letzte Schritt. Mit dem Verzeichnis /build haben Sie alles, was Sie brauchen, um Ihre App dort herauszubringen. Ich empfehle, dies frühzeitig zu tun, um Überraschungen zu vermeiden.

Eine neue Seite

Schauen wir uns die Grundstruktur einer Middleman-App an. Die Hauptkomponenten sind:

/images
/javascripts
/layouts
/stylesheets
config.rb
Eine index.html.erb-Datei
Ein Gemfile

Wie Sie unten sehen können, wird der meiste Jazz in den Ordner /source verschoben. Was ich an Middleman-Apps mag, ist ihre einfache Organisation. Das Navigieren in der Dokumentstruktur ist auch für Anfänger unkompliziert.

Wenn Sie mit der Benennung einiger dieser Ordner nicht zufrieden sind, können Sie dies in Ihren Konfigurationen (config.rb) ändern. Die gleichen Namen werden für Ihren fertigen /build-Ordner verwendet.

set :css_dir,    'custom_folder_name'

set :js_dir,     'custom_folder_name'

set :images_dir, 'custom_folder_name'

Sobald Ihr Server läuft, können Sie andere Optionen zum Konfigurieren von Middleman direkt in Ihrem Browser überprüfen: http://localhost:4567/__ middleman/config/. Nicht alle von ihnen sind möglicherweise sinnvoll oder in dieser Phase zu verstehen. Werfen Sie einen Blick darauf und ein mentales Lesezeichen ist vorerst völlig ausreichend.

Wenn Sie einen middleman build ausführen, können Sie einen Blick in den Ordner /build werfen. Alle einfachen HTML-, CSS- und JS-Dateien, die Sie für die Bereitstellung Ihrer statischen Seite benötigen.

Das ist so ziemlich alles, was Sie wissen müssen, um loszulegen und sich zu orientieren.

Vorschlag: An dieser Stelle wäre es sehr sinnvoll, selbst eine Test-App zusammenzustellen. Schauen Sie sich um und bekommen Sie ein Gefühl dafür, wie die Dinge organisiert sind und wie die Teile zusammenpassen.

Front Matter

Der Begriff Front Matter stammt aus dem Buchverlag und bezieht sich auf die Informationen auf der Vorderseite eines Buches. Bei statischen Website-Dateien handelt es sich um Informationsblöcke, die in YAML gespeichert sind. Auf jeder Seite können Sie Variablen haben, die ganz oben in einem führenden und einem nachfolgenden dreifachen Bindestrich gespeichert werden können. Hier ist beispielsweise der Anfang einer fiktiven Datei mit dem Namen: some.html.erb.

---

layout: Bond
title:  Favorite bond girl names
date:   2015-11-09
tags:   bond, 007

some_secret: I won’t get rendered until you use me.

bond_girls:
  - Strawberry Fields 
  - Jill Masterson
  - Tiffany Case

---

<h1>Top three names for Bond girls</h1>
<ul>
  <% current_page.data.bond_girls.each do |name| %>
    <li><%= name %></li>
  <% end %>
</ul>



Die YAML-Variablen sehen genauso aus wie ein Hash. Sie können über das Objekt current_page auf diese lokalen Daten zugreifen:

1	current_page.data.some_variable

Sie werden dies häufig verwenden, um Tags, Daten, Titel und Konfigurationsoptionen zu speichern, z. B. welches Layout Sie für bestimmte Seiten verwenden möchten. Front Matter ist ein YAML-Speicher für Ihre Variablen. Sie können auch JSON verwenden, wenn Sie dies bevorzugen. Stellen Sie sich das als einen Ort vor, an dem Daten abgelegt werden können, die sich normalerweise in einer Datenbank befinden. Ich werde die verschiedenen Optionen und Verwendungszwecke auf dem Weg besprechen, wenn sie auftauchen.

ERB

Dies ist eine gute Gelegenheit, kurz auf ERB einzugehen. Mit ERB können Sie dynamische Vorlagen erstellen, in die Code eingebettet ist. Ihre Dateinamen müssen die Erweiterung .erb haben und Sie müssen Ihren Code in die folgenden zwei "Container" einfügen.

Für Code, der ausgeführt, aber nicht auf der Seite „gedruckt“ wird, verwenden Sie Folgendes:

<% %>

Betrachten Sie es als "nur zur Berechnung".

Andernfalls müssen Sie für Rückgabewerte, die auf der Seite "gedruckt" angezeigt werden sollen, ein Gleichheitszeichen, wie bei uns, hinzufügen Das ist Alles.

<%= %>

Layouts

Die Konzepte von Layouts und Partials sind eng miteinander verbunden. Lassen Sie mich Ihnen eine kleine Übersicht geben, falls Sie noch nie mit Rails, Sinatra oder ähnlichem gespielt haben. Ich denke, ich sollte zuerst mit layouts beginnen.

Layouts bieten Ihnen die Struktur, gemeinsame Überschriften für verschiedene Seiten zu verwenden, die zur selben „Familie“ von Seiten gehören. Dies ist ein Tool, um Doppelarbeit zu vermeiden und Ihre Arbeit zu beschleunigen. Anstatt überall dasselbe HTML-Skelett zu schreiben, erstellen Sie Layouts für bestimmte Anwendungsfälle. Beliebte Beispiele sind zwei verschiedene Layouts für einen Administrator und einen „normalen“ Benutzer. Sie haben normalerweise eine ganz andere Erfahrung, wenn sie dieselbe Seite betrachten.

Wenn Sie eine einfache middleman-App starten, erhalten Sie automatisch eine layout.erb-Datei in source/layouts. Beachten Sie, dass diese Datei mit .erb und nicht mit .html.erb endet. Layouts sollten nicht in HTML gerendert werden und Middleman gibt einen Fehler aus, wenn Sie Layouts mit der Erweiterung .html erstellen. Wenn Sie eine andere Vorlagensprache wie Slim oder Haml verwenden, können Layouts stattdessen ihre Erweiterungen haben. Wie in der Standardeinstellung vorgeschlagen, sollten Sie alle Ihre Layouts im Ordner /layouts in source ablegen.

Hier ist ein Beispiel für source/layouts/layout.erb:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine or request Chrome Frame -->
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

    <!-- Use title if it's in the page YAML frontmatter -->
    <title><%= current_page.data.title || "The Middleman" %></title>

    <%= stylesheet_link_tag "normalize", "all" %>
    <%= javascript_include_tag  "all" %>
  </head>

  <body class="<%= page_classes %>">
    <%= yield %>
  </body>
</html>

Dieses Standardlayout ist ziemlich einfach, bietet aber alles, was Sie für den Einstieg benötigen. Werfen wir einen Blick darauf:

Ein bisschen Meta-Information.
Ein dynamischer Seitentitel, der Daten von der Titelseite jeder Seite liest.
Hilfsmethoden, die Stil- und JavaScript-Dateien enthalten.
Und schließlich ein Body-Tag, um Ihren Inhalt, der über <%=yield%> eingegeben" wird, in das Layout einzubinden.

Und von dort aus können Sie dieses Layout an Ihre Bedürfnisse anpassen. Ein potenziell verwirrender Aspekt für Ruby-Neulinge ist das Yield-Schlüsselwort. Dies bedeutet lediglich, dass es den Rest des von Ihnen erstellten Inhalts durchläuft. Mit anderen Worten, Yield ist ein Platzhalter für Ihre Ansichten, die darin gerendert werden. Wenn Ihnen dieses Konzept völlig fremd ist, denken Sie daran, es vorerst nicht zu berühren, da Ihre App sonst möglicherweise nicht wie erwartet funktioniert. Wenn Sie Ihre eigenen Layouts erstellen, ist es wichtig, dass Sie yield verwenden, da sonst Ihre Inhalte nicht angezeigt werden. Sie werden es in kürzester Zeit verstehen, das verspreche ich.

Wenn Sie verschiedene Layouts erstellt haben, können Sie über die Vorderseite festlegen, welches Layout Sie Seite für Seite verwenden möchten. Nehmen wir an, Sie haben ein spezielles Layout für die Begrüßung von Benutzern, das etwas verkaufsfördernder ist. Hier haben wir welcome.html.erb.

---
layout: sales
---

<h1>Hello there!</h1>
<h2> Guess what, we’re trying to sell you some stuff?</h2>

Alternativ können Sie Layouts in Ihrer Datei config.rb angeben.

1	page "/welcome.html", :layout => "sales"

Wenn Sie dies für jede Seite nicht manuell tun möchten, können Sie sie an einem Ort sammeln. Wiederum verwenden Sie in config.rb einen Platzhalter (**\***), um eine Reihe von Seiten zu sammeln, die dasselbe Layout verwenden.

1	page "/sales/*", :layout => "sales"

Ich persönlich möchte diese Layout-Informationen in den Vordergrund stellen. Es ist sehr explizit und nicht zu repetitiv. Wenn ich jedoch eine ganze Reihe davon hätte, würde ich lieber den Platzhalter-Ansatz verwenden.

Partials

Partials bieten Ihnen die Möglichkeit, Ansichtscode zu kapseln, den Sie überall wiederverwenden können. Sie müssen Ihrer Ansicht nur mitteilen, wo ein Teil eingefügt werden soll, und es wird genau dort gerendert. Partials sind eine sehr verbreitete Technik zum DRYing Ihres Codes.

Sehr häufige Beispiele sind Navigationsleisten, Fußzeilen und Kopfabschnitte, die Sie nicht überall duplizieren möchten. Dateien für Partials beginnen mit einem Unterstrich. Für den Anfang können Sie sie unter /source platzieren. Ihre Layouts sind ein guter Ausgangspunkt, um Code zu sammeln und in Partials zu extrahieren. Wann immer Sie etwas finden, das Sie wiederverwenden müssen, sind Partials ein nützlicher Freund.

Hier ist ein Beispiel für /source/layouts/layout.erb.

<!doctype html>
<html>
  <head>
    <%= partial "head" %>
  </head>

  <body class="<%= page_classes %>">
    <%= partial "navbar" %>
    <%= yield %>
    <%= partial "footer" %>
  </body>
</html>

Und die Partial source/_head.html.erb:

<meta charset="utf-8">

<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

<!-- Use title if it’s in the page YAML front matter -->
<title><%= current_page.data.title || "The Middleman" %></title>

<%= stylesheet_link_tag "normalize", "all" %>
<%= javascript_include_tag  "all" %>

Manchmal möchten Sie einen Teil extrahieren, um nicht nur Doppelarbeit zu vermeiden, sondern um Ihre Ansichten besser lesbar zu machen. Im Laufe der Zeit sind Kopfabschnitte bekannt dafür, dass sie zum Beispiel ziemlich überlastet werden. In ihnen können Sie andere Partials haben, die sich nur mit Stil- oder JS-Dateien befassen.

Sie werden feststellen, wie praktisch Partials sind, wenn Sie Änderungen anwenden können, die sich auf Ihre gesamte App auswirken - unabhängig davon, wo Sie das Partial aufgenommen haben. Es ist nicht erforderlich, eine Reihe von Dateien zu durchsuchen, um dieselbe Änderung immer wieder anzuwenden.

Helpers

Helpers sind Methoden, die Sie in Ihren Ansichten für viele alltägliche Aufgaben verwenden können. Ich glaube, dies war Pionierarbeit im Rails-Land und wurde für die moderne Webentwicklung schnell allgegenwärtig. Sie haben bereits Helpers gesehen, die Stylesheets und JavaScript-Dateien enthalten. Es gibt aber noch viel mehr, wo das herkommt.

Hier ist noch einmal unser Partial /source/_head.html.erb:

1	<head>
2	<%= stylesheet_link_tag "normalize", "all" %>
3	<%= javascript_include_tag "all" %>
4	</head>

Diese Helpers sollen Ihnen helfen, saubereren und präziseren Ansichtscode zu schreiben. In der unten stehenden Helpersliste finden Sie viele nützliche Dinge, die sofort einsatzbereit sind. Sie sind jedoch nicht darauf beschränkt. Schreiben Sie Ihre eigenen Helpermethoden in config.rb oder sammeln Sie sie separat in einem Modul.

Das funktioniert so: In Ihrer config.rb erstellen Sie einen helpers block und fügen alle Ihre Helpermethoden ein. Das ist alles. Jetzt haben Ihre Ansichten Zugriff darauf.

Beispiel: /source/_navbar.erb.

<nav>
  <%= random_username %>
  <%= random_image %>
</nav>


Und in config.rb:

helpers do

  def random_username
    "#{lorem.first_name} #{lorem.last_name}"
  end

  def random_image
    image_tag "#{lorem.image('30x40', :background_color => '333', :color => 'fff')}"
  end

end

Diese Helpers können nützlich sein, wenn ich schnell einen Prototyp erstellen und vermeiden möchte, selbst Dummy-Bilder und -Texte einzurichten. Insgesamt sollten Sie nach Code Ausschau halten, den Sie präziser gestalten oder den Sie immer wieder duplizieren möchten. Helpers sind dafür oft ein gutes Zuhause.

In diesen benutzerdefinierten Helpern habe ich andere Middleman-Helper zum Erstellen vonimg-Tags über image_tag sowie das lorem-Objekt für einige zufällige Benutzernamen und Bildplatzhalter verwendet. Diese Lorem-Dinger können ein bisschen an Ihre Bedürfnisse angepasst werden.

Bei Verwendung des Modulansatzes benötigen Sie jedoch eine separate Datei für Ihr Modul. Erstellen Sie ein "lib" -Verzeichnis in Ihrem Stammordner (dieselbe Ebene wie "source" und "build") und erstellen Sie eine Datei für Ihre Helfer.

Hier haben wir /lib/helpers.rb:

module PrototypingHelpers
  def random_image
    image_tag "#{lorem.image('300x400', :background_color => '333', :color => 'fff')}"
  end

  def random_username
    "#{lorem.first_name} #{lorem.last_name}"
  end
end

Dann müssen Sie Ihrer Datei config.rb mitteilen, dass Sie diese Helfer verwenden möchten:

1	require 'lib/helpers'
2	helpers PrototypingHelpers

Boom! Du bist bereit zu rollen. Im Allgemeinen würde ich mich sofort für den Modulansatz entscheiden. Es fühlt sich für mich viel sauberer an und Sie vermeiden es, Ihre Konfigurationsdatei mit zu viel Material zu verschmutzen.

Ich möchte mich auch mit Ausgabehilfen und content_for befassen, da diese für Neulinge etwas verwirrend sein können. Auf diese Weise können Sie eine Reihe von Inhalten erfassen, die Sie an einem anderen Ort bereitstellen / wiederverwenden können. Es ist eine Art Miniaturpartial. Ich persönlich würde die meiste Zeit mit einem Teil davon arbeiten, aber hin und wieder, wenn Sie On-Off-Änderungen chirurgischer anwenden möchten, ist dies praktisch zu wissen:

Hier ist index.html.erb:

1	<% content_for :navigation do %>
2	<ul>
3	<li><%= link_to 'Home', '#' %></li>
4	<li><%= link_to 'Posts', '#' %></li>
5	<li><%= link_to 'About', '#' %></li>
6	<li><%= link_to 'Contact', '#' %></li>
7	</ul>
8	<% end %>
9
10	<h1> Hello new user!</h1>
11	...

Und admin_index.html.erb:

<% content_for :admin_navigation do %>
  <ul>
    <li><%= link_to 'Home',    '#' %></li>
    <li><%= link_to 'Stats',   '#' %></li>
    <li><%= link_to 'Edit',    '#' %></li>
    <li><%= link_to 'Posts',   '#' %></li>
    <li><%= link_to 'About',   '#' %></li>
    <li><%= link_to 'Contact', '#' %></li>
  </ul>
<% end %>

<% content_for :admin_javascript do %>
  <%= javascript_include_tag  "admin" %>
  <%= javascript_include_tag  "some_library" %>
<% end %>

<h1> Hello Ms. Admin!</h1>
...

Dann in layout.erb:

<html>
  <head>
      <% if content_for?(:admin_javascript) %> 
        <%= yield_content :admin_javascript %>
      <% else %>
        <%= javascript_include_tag  "all" %>
      <% end %>
  </head>

  <body class="<%= page_classes %>">
    <nav>
      <% if content_for?(:admin_navigation) %> 
        <%= yield_content :admin_navigation %>
      <% else %>
        <%= yield_content :navigation %>
      <% end %>
    </nav>

    <%= yield %>

    <%= partial "footer" %>
  </body>
</html>

content_for?

Der Schlüssel ist die Verwendung von Yield_Content, mit dem Ihre gesammelten Inhalte von der einzelnen Seite in das Layout eingefügt werden - sofern gefunden. Sie müssen sie auch nicht nur mit layouts verwenden. Wenn Sie dies etwas komplizierter gestalten möchten, verwenden Sie content_for? um nach bestimmten Inhaltsblöcken zu suchen, bevor Sie sie einfügen. Dies ist praktisch, wenn Sie kleine Anpassungen für Abschnitte vornehmen möchten, die sich nur geringfügig unterscheiden. Es ist großartig, dass Sie diesen Inhalt wie eine Konfiguration auf den entsprechenden Seiten selbst speichern und nur bei Bedarf "aktivieren" können. Sie sollten mit diesen Dingen wahrscheinlich nicht zu schlau werden.

link_to

Ein Wort zu demlink_to-helper, den ich oben verwendet habe. Dies ist wahrscheinlich die, auf die Sie am häufigsten stoßen werden. Sie geben der Methode im Wesentlichen einen Namen und eine URL oder einen Pfad, auf den dieser Link verweisen soll. Der Kürze halber habe ich den letzten Teil durch einen Platzhalter ersetzt.

Im Folgenden finden Sie eine Übersicht darüber, welche Helper sofort einsatzbereit sind. Ich denke, die Namen sind größtenteils selbsterklärend und ich sollte nicht darüber nachdenken, womit jeder dieser Namen Ihnen helfen kann. Machen Sie ein mentales Lesezeichen für das, was da draußen ist, und überprüfen Sie die Dokumentation, wenn Sie Probleme haben.

Tag Helpers

tag
link_to
input_tag
favicon_tag
stylesheet_link_tag
javascript_include_tag

Output Helpers

content_for
content_for?
capture_html
yield_content
concat_content

Form Helpers

form_tag
label_tag
select_tag
submit_tag
field_set_tag
text_field_tag
check_box_tag
password_field_tag

Format Helpers

truncate
pluralize
word_wrap
escape_html
simple_format
js_escape_html
time_ago_in_words
distance_of_time_in_words

Lorem Helper

lorem.date
lorem.word
lorem.name
lorem.email
lorem.image
lorem.words
lorem.sentence
lorem.last_name
lorem.paragraph
lorem.first_name
lorem.paragraphs

Abschließende Gedanken

Ich glaube, dies ist eine gute Basis, um mit einer Spielzeug-App herumzuspielen. Sie sollten ein gutes Gespür dafür bekommen haben, was Middleman bietet und wie Sie im Framework navigieren. Im nächsten Teil dieser Reihe werden wir die Dinge weiterentwickeln und etwas tiefer in das Framework eintauchen. Das Middleman-Team hat wirklich großartige Arbeit geleistet, indem es die API entworfen und die Dinge einfach gehalten hat.

Hoffentlich können Sie jetzt sehen, warum dieses Framework an Popularität gewonnen hat und warum es eine gute Wahl für alle Arten von statischen Projekten ist.