Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Ricardo Henriques

Min Read

28. April 2021

Ruby on Rails — E-Mails mit Stil versenden

Mussten Sie jemals E-Mails von Ihrer Rails-Anwendung aus senden?

Wahrscheinlich lautet Ihre Antwort ja. Die meisten von uns haben sich schon irgendwann damit befasst der Schmerz, HTML-formatierte E-Mails mit Ruby on Rails zu versenden. Einiges CSS wird bereits erkannt, aber normalerweise schreiben wir die Views mit dem Inline-CSS (Autsch!) , was zu riesigen und fast unlesbaren Dateien führt.

One does not simply mess with CSS

Was sind die verfügbaren Optionen, um dieses Problem zu lösen? Nach einigen Recherchen habe ich ein paar Ruby-Edelsteine gefunden, die kürzlich veröffentlicht wurden und die dir bei der Erfüllung dieser Aufgabe helfen können: Roadie, Premailer-Schienen, actionmailer_inline_css und inline_styles_mailer.

Als Nächstes werde ich jeden einzelnen durchgehen und Ihnen eine zusammenfassende Erklärung geben, wie Sie diese Edelsteine einrichten und verwenden.

Roadie

Roadie fügt automatisch Ihr gesamtes CSS ein, wobei den Selektoren besondere Aufmerksamkeit geschenkt wird. Außerdem werden alle relativen Pfade in absolute Pfade umgeschrieben und alle Inline-Stile, die Sie möglicherweise haben, berücksichtigt. Zusätzlich fügt es das HTML-Skelett hinzu und kann Teilwerte verwenden.

Verwendungszweck — füge deinem Gemfile Folgendes hinzu:


Eine neue Instanz eines Roadie-Dokuments erstellen

Transformieren Sie vollständige Dokumente mit der Methode #transform.


Transformieren Sie Teildokumente mit #transform_partial


Es gibt mehrere Optionen, mit denen Sie Ihre Dokumenteninstanz konfigurieren können (weitere Informationen finden Sie unter ihre Homepage):

URL_Optionen - Schreibt vor, wie absolute URLs erstellt werden sollen;
keep_uninlinable_css - Auf false setzen, um CSS zu überspringen, das nicht eingebunden werden kann;
Medienabfragen zusammenführen - Auf „False“ setzen, um Medienabfragen nicht zu gruppieren. Einige Benutzer ziehen es möglicherweise vor, Regeln nicht innerhalb von Medienabfragen zu gruppieren, da dies dazu führen würde, dass die Regeln neu angeordnet werden;
Asset-Anbieter - Eine Liste von Asset-Anbietern, die aufgerufen werden, wenn auf CSS-Dateien verwiesen wird;
externe_Asset-Anbieter - Eine Liste von Asset-Anbietern, die aufgerufen werden, wenn auf absolute CSS-URLs verwiesen wird;
vor_der Transformation - Ein Callback-Lauf, bevor die Transformation beginnt;
nach_Transformation - Ein Callback-Lauf nach Abschluss der Transformation.

Meine Gedanken zu Roadie

Roadie ist äußerst vollständig und bietet mehrere nützliche Optionen, aber meiner Meinung nach könnte es etwas zu komplex sein, je nachdem, was Sie brauchen oder wollen. Wenn Sie Assets aus einem CDN verwenden oder den Cache verwenden müssen, ist dieses Gem die beste Option.

Premailer-Schienen

Genau wie Roadie, Premailer-Schienen macht hervorragende Arbeit bei der Konvertierung Ihres CSS in Inline-Styles. Sie benötigen Rails nicht, um es zu verwenden, da es gut zu Sinatra passt.
Premailer-rails wird automatisch von Actionmailer verwendet, sobald Sie es zu Ihrem Gemfile hinzufügen.

Verwendungszweck — füge deinem Gemfile Folgendes hinzu:

Premailer kann mit den folgenden Optionen konfiguriert werden. Sie können dies auf dem Initialisierer tun (config/initializers/premailer_rails.rb):


Premailer-Standardkonfigurationen


Um zu verhindern, dass Premailer einen Textteil aus HTML generiert, setzen Sie generate_text_part einfach auf false.

Bei Bedarf können Sie Premailer für eine bestimmte E-Mail deaktivieren, indem Sie skip_premailer auf true setzen, einfach so:


Meine Gedanken zu Premailer-Rails

Premailer ist sehr einfach zu bedienen und zu konfigurieren, wenn Sie nur gestylte E-Mails ohne spezielle Konfigurationen versenden möchten, ist dieses Gem eine sehr gute Option.

Actionmailer Inline-CSS

Dieses Gem ähnelt Premailer-Rails (es basiert auch auf Premailer). Sie müssen es nur zu Ihrem Gemfile hinzufügen und schon kann es losgehen.

Verwendungszweck — füge deinem Gemfile Folgendes hinzu:

Mit diesem Gem können Sie auch eine benutzerdefinierte CSS-Datei hinzufügen, die vom Premailer eingebunden wird. Sie können dies erreichen, indem Sie Ihrer E-Mail-Vorlage Folgendes hinzufügen:

Meine Gedanken zu Actionmailer Inline CSS

Actionmailer Inline CSS ist bis jetzt die einfachere Lösung. Sie müssen es nur zu Gemfile hinzufügen und schon können Sie gestylte E-Mails senden. Wenn Sie keine speziellen Konfigurationen benötigen, ist dieses Juwel ein Muss für Sie.

Inline Styles Mailer

Genau wie Premailer-rails und Actionmailer Inline CSS verwendet dieses Gem Premailer und funktioniert sofort.

Verwendungszweck — füge deinem Gemfile Folgendes hinzu:


Und dann füge einfach zu den gewünschten Mailern die Include-Zeile hinzu für Inline-Style-Mailer:


Wenn Sie eine CSS-Datei app/assets/stylesheets/foo_mailer* haben (wobei das Sternchen .css, .css.scss oder .css.sass sein kann), wird sie mithilfe des inline_styles-Gems automatisch auf die E-Mail angewendet.

Wenn Sie möchten, können Sie eine andere CSS-Datei verwenden


Sie können sogar mehr als eine CSS-Datei verwenden


Meine Gedanken zu Inline Styles Mailer

Inline Styles Mailer ist auch eine nette Lösung, sie ist Premailer-Rails und Actionmailer Inline CSS sehr ähnlich. Einfach zu konfigurieren und kann mit mehreren CSS-Dateien umgehen. Meiner Meinung nach ist es auch eine gute Wahl, je nachdem, was Sie benötigen.

Einpacken

Je nachdem, was Ihre Bedürfnisse sind, können Sie zwischen 3 Gems wählen, die auf Premailer (Premailer-Rails, Actionmailer Inline CSS und Inline Styles Mailer) oder Roadie basieren.

Roadie hat erweiterte Konfigurationsoptionen (falls Sie spezielle Konfigurationen benötigen, um CDN oder Cache zu verwenden), die nützlich sein können, aber wenn Ihre Anforderungen nicht so hoch sind, können Sie zwischen den anderen drei Gems wählen, die alle auf Premailer basieren und eine sehr ähnliche Verwendung haben.

Für weitere Informationen zu den hier vorgestellten Optionen vergiss nicht, den Link zu jedem Gem zu überprüfen.

Ready for a UX Audit? Book a free call

Fanden Sie diesen Artikel hilfreich? Diese könnten dir auch gefallen!

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Ricardo Henriques
Ricardo Henriques

Entwickler @Imaginary Cloud, das sich der Entwicklung außergewöhnlicher Softwarelösungen verschrieben hat, sich der Innovation und der Nutzung modernster Technologien verschrieben hat.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon