Erstellen von responsiven E-Mails mit Vue.js und MJML

Erstellen von responsiven E-Mails mit Vue.js und MJML

MJML ist ein modernes E-Mail-Tool, mit dem Entwickler beeindruckende E-Mails erstellen können, die ansprechend und reaktionsschnell sind und auf allen Geräten und E-Mail-Clients funktionieren. Diese Auszeichnungssprache wurde entwickelt, um das Verfassen von Response-E-Mails zu vereinfachen.

Seine semantische Syntax macht es einfach zu verwenden. Es verfügt außerdem über funktionsreiche Standardkomponenten, die die Entwicklungszeit verkürzen. In diesem Tutorial verwenden wir MJML, um ansprechende responsive E-Mails zu erstellen und sie auf mehreren E-Mail-Clients zu testen.

MJML starten

Sie können MJML mit npm installieren, um es mit Node.js oder der CLI zu verwenden:

$ npm install -g mjml

Strukturieren unserer E-Mails

Erstellen Sie zunächst eine Datei mit dem Namen „email.mjml“, Sie können aber auch jeden anderen Namen wählen. Sobald die Dateien erstellt sind, wird unsere Antwort-E-Mail in die folgenden Abschnitte unterteilt:

  • Firmenkopfzeile
  • Bildkopfzeile
  • E-Mail-Einführung
  • Spaltenabschnitt
  • Symbol
  • Soziale Symbole

Spalten

Diese Abschnitte bilden den Rahmen für unsere responsiven E-Mails. Wie oben gezeigt wird unsere E-Mail in unserer Datei „email.mjml“ in sechs Abschnitte unterteilt:

<mjml>
 <mj-Text>
  <!-- Firmenkopfzeile -->
  <mj-Abschnitt Hintergrundfarbe = "="#f0f0f0"></mj-Abschnitt>
  <!-- Bildüberschrift -->
  <mj-Abschnitt Hintergrundfarbe = "="#f0f0f0"></mj-Abschnitt>
  <!-- E-Mail-Einführung-->
  <mj-section Hintergrundfarbe = "="#fafafa"></mj-section>
  <!-- Spaltenabschnitt-->
  <mj-Abschnitt Hintergrundfarbe = "weiß"></mj-Abschnitt>
  <!-- Symbol -->
  <mj-Abschnitt Hintergrundfarbe = "#fbfbfb"></mj-Abschnitt>
  <!-- Soziale Symbole -->
  <mj-Abschnitt Hintergrundfarbe = "="#f0f0f0"></mj-Abschnitt>
 </mj-body>
</mjml>

Wie Sie oben sehen können, verwenden wir zwei MJML-Komponenten: mj-body und mj-section. mj-body definiert den Startpunkt unserer E-Mail, während mj-section einen Abschnitt definiert, der andere Komponenten enthält.

Für jeden definierten Abschnitt wird auch eine Hintergrundfarbeigenschaft mit dem entsprechenden Hexadezimalwert definiert.

Firmenkopfzeile

Dieser Abschnitt unserer E-Mail enthält nur unseren Firmen-/Markennamen in einer zentralen Bannerposition:

<!-- Firmenkopfzeile -->
<mj-section Hintergrundfarbe = "="#f0f0f0">
 <mj-Spalte>
  <mj-text Schriftstil="fett"
    Schriftgröße = "20px"
    ausrichten="zentrieren"
    Farbgebung #626262">
  Bootstour durch den Central Park
  </mj-text>
 </mj-Spalte>
</mj-Abschnitt>

Die mj-column-Komponente wird zum Definieren einer Spalte verwendet. Die mj-text-Komponente wird für unseren Textinhalt verwendet und übernimmt Stileigenschaften wie Schriftstil, Schriftgröße, Farbe usw.

Bildkopfzeile

In diesem Abschnitt haben wir ein Hintergrundbild und einen Textabschnitt, der unseren Firmenslogan darstellen soll. Wir werden auch eine Call-to-Action-Schaltfläche haben, die zu einer Seite mit ausführlicheren Informationen führt.

Um einen Bildtitel hinzuzufügen, müssen Sie die Hintergrundfarbe dieses Abschnitts durch die Hintergrund-URL ersetzen. Ähnlich wie bei der ersten Überschrift müssen Sie den Text sowohl vertikal als auch horizontal zentrieren und dabei den Abstand unverändert lassen.

Der href der Schaltfläche legt die Position der Schaltfläche fest. Um den Hintergrund in der Spalte in voller Breite anzuzeigen, stellen Sie die Spaltenbreite auf 600 Pixel ein, width="600px" .

Dieser Abschnitt unserer E-Mail enthält nur eine zentrale Bannerplatzierung mit unserem Firmen-/Markennamen.

<!-- Bildüberschrift -->
<mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2Fwww.trbimg.com%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055"
      Hintergrundgröße = "Cover"
      Hintergrundwiederholung="keine Wiederholung">
 <mj-Spalte Breite="600px">
  <mj-text align="zentriert"
       Farbe = "fff"
       Schriftgröße = "40px"
       Weihnachtsrabatt
  <mj-button background-color="#F63A4D" href="#" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" >
   Siehe Aktionen
  </mj-button>
 </mj-Spalte>
</mj-Abschnitt>

Um einen Bildkopf zu verwenden, fügen wir der JMS-Abschnittskomponente eine Hintergrund-URL-Eigenschaft hinzu und formatieren das Bild dann mit den Eigenschaften „Hintergrundgröße“ und „Hintergrundwiederholung“.

Für unseren Slogan-Textblock verwenden wir die Align-Eigenschaft, um den Text sowohl horizontal als auch vertikal zu zentrieren. Sie können auch die Textfarbe, Schriftgröße, Schriftfamilie usw. nach Ihren Wünschen einstellen.

Der Call-to-Action-Button wird mithilfe der Komponente „mj-button“ implementiert. Mit der Eigenschaft „background-color“ können wir die Hintergrundfarbe der Schaltfläche festlegen und dann mithilfe von „href“ die Position des Links oder der Seite angeben.

E-Mail-Einführung

Der Einführungstext besteht aus einem Titel, einem Fließtext und einem Aufruf zum Handeln.

<!-- Einführungstext -->
<mj-section background-color="#fafafa">
 <mj-Spalte Breite="400px">
  <mj-text Schriftstil="fett"
       Schriftgröße = "20px"
       font-family="Helvetica Neue"
       Das ultimative Weihnachtserlebnis
  <mj-text color="#525252">
   Ich habe Angst, dass das Wasser nicht verdunstet und die Haut dadurch anschwillt. Der Saft ist so stark, dass er leicht aufgenommen werden kann. Der Saft ist so stark, dass er leicht aufgenommen werden kann.
  </mj-text>
  <mj-button background-color="#F45E43" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Mehr erfahren</mj-button>
 </mj-Spalte>
</mj-Abschnitt>

Spaltenabschnitt

In diesem E-Mail-Abschnitt haben wir zwei Spalten: Eine ist ein beschreibendes Bild und die zweite ist unser Textblock, der das Bild im ersten Abschnitt ergänzt.

<!-- Seitenbild -->
<mj-section Hintergrundfarbe="weiß">
 <!-- Linkes Bild -->
 <mj-Spalte>
  <mj-Bildbreite="200px"
       src="https://navis-consulting.com/wp-content/uploads/2019/09/Cruise1-1.png"/>
 </mj-Spalte>
 <!-- rechter Absatz -->
 <mj-Spalte>
  <mj-text Schriftstil="fett"
       Schriftgröße = "20px"
       font-family="Helvetica Neue"
       Farbgebung #626262">
   Unglaubliche Erlebnisse
  </mj-text>
  <mj-text color="#525252">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Da die Brunft so effizient ist, ist sie sehr effektiv. 
   Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus 
   Vortrag.
  </mj-text>
 </mj-Spalte>
</mj-Abschnitt>

Die erste Spalte links verwendet die MJ-Image-Komponente, um das zu verwendende Bild anzugeben. Das Bild kann eine lokale Datei oder, in unserem Fall, ein remote gehostetes Bild sein.

Die zweite Spalte rechts enthält zwei Textblöcke, einen für unseren Titel und den anderen für den Haupttext.

Symbol

Der Abschnitt mit den Symbolen wird in drei Spalten unterteilt. Sie können auch weiteren Inhalt hinzufügen, je nachdem, wie die E-Mail aussehen soll.

<!-- Symbole -->
<mj-section Hintergrundfarbe = "="#fbfbfb">
 <mj-Spalte>
  <mj-Bild Breite="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" />
 </mj-Spalte>
 <mj-Spalte>
  <mj-Bild Breite="100px" src="https://191n.mj.am/img/191n/3s/x01.png" />
 </mj-Spalte>
 <mj-Spalte>
  <mj-Bildbreite="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" />
 </mj-Spalte>
</mj-Abschnitt>

Jede Spalte verfügt über ihre eigene MJ-Image-Komponente, die zum Rendern des Symbolbilds verwendet wird.

Soziale Symbole

Dieser Abschnitt enthält Symbole, die auf unsere Social-Media-Konten verweisen.

<mj-Abschnitt Hintergrund-color="#e7e7e7">
 <mj-Spalte>
  <mj-sozial>
   <mj-social-element name="instagram" />
  </mj-social>
 </mj-Spalte>
</mj-Abschnitt>

MJML verfügt über die Komponente „mj-social“, mit der sich problemlos Social-Media-Symbole anzeigen lassen. In unseren E-Mails haben wir das Twitter-MJ-Social-Element verwendet.

Alles zusammenfügen

An diesem Punkt haben wir alle Teile implementiert und die vollständige Datei „email.mjml“ sollte folgendermaßen aussehen:

<mjml>
 <mj-Text>
  <!-- Firmenkopfzeile -->
  <mj-section Hintergrundfarbe = "="#f0f0f0">
   <mj-Spalte>
    <mj-text Schriftstil="fett"
         Schriftgröße = "20px"
         ausrichten="zentrieren"
         Farbgebung #626262">
     Kreuzfahrten im Central Park
    </mj-text>
   </mj-Spalte>
  </mj-Abschnitt>
  <!-- Bildüberschrift -->
  <mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2Fwww.trbimg.com%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055"
        Hintergrundgröße = "Cover"
        Hintergrundwiederholung="keine Wiederholung">
   <mj-Spalte Breite="600px">
    <mj-text align="zentriert"
         Farbe = "fff"
         Schriftgröße = "40px"
         Weihnachtsrabatt
    <mj-button background-color="#F63A4D" href="#" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" >
     Siehe Aktionen
    </mj-button>
   </mj-Spalte>
  </mj-Abschnitt>
  <!-- E-Mail-Einführung -->
  <mj-section background-color="#fafafa">
   <mj-Spalte Breite="400px">
    <mj-text Schriftstil="fett"
         Schriftgröße = "20px"
         font-family="Helvetica Neue"
         Das ultimative Weihnachtserlebnis
    <mj-text color="#525252">
     Ich habe Angst, dass das Wasser nicht verdunstet und die Haut dadurch anschwillt. Der Saft ist so stark, dass er leicht aufgenommen werden kann. Der Saft ist so stark, dass er leicht aufgenommen werden kann.
    </mj-text>
    <mj-button background-color="#F45E43" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Mehr erfahren</mj-button>
   </mj-Spalte>
  </mj-Abschnitt>
  <!-- Spaltenabschnitt -->
  <mj-section Hintergrundfarbe="weiß">
   <!-- Linkes Bild -->
   <mj-Spalte>
    <mj-Bildbreite="200px"
         src="https://navis-consulting.com/wp-content/uploads/2019/09/Cruise1-1.png"/>
   </mj-Spalte>
   <!-- rechter Absatz -->
   <mj-Spalte>
    <mj-text Schriftstil="fett"
         Schriftgröße = "20px"
         font-family="Helvetica Neue"
         Farbgebung #626262">
     Unglaubliche Erlebnisse
    </mj-text>
    <mj-text color="#525252">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Da die Brunft so effizient ist, ist sie sehr effektiv. 
     Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus 
     Vortrag.
    </mj-text>
   </mj-Spalte>
  </mj-Abschnitt>
  <!-- Symbole -->
  <mj-section Hintergrundfarbe = "="#fbfbfb">
   <mj-Spalte>
    <mj-Bild Breite="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" />
   </mj-Spalte>
   <mj-Spalte>
    <mj-Bild Breite="100px" src="https://191n.mj.am/img/191n/3s/x01.png" />
   </mj-Spalte>
   <mj-Spalte>
    <mj-Bildbreite="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" />
   </mj-Spalte>
  </mj-Abschnitt>
  <!-- Soziale Symbole -->
  <mj-Abschnitt Hintergrund-color="#e7e7e7">
   <mj-Spalte>
    <mj-sozial>
     <mj-social-element name="instagram" />
    </mj-social>
   </mj-Spalte>
  </mj-Abschnitt>
 </mj-body>
</mjml>

Ausführen unserer Anwendung

Nachdem wir nun mit der Erstellung unserer E-Mail fertig sind, können wir mit der Kompilierung fortfahren, um zu sehen, wie sie aussieht. Dazu geben wir folgendes ins Terminal ein:

mjml -r E-Mail.mjml -o .
  • -r: Erlaubt MJML, unsere MJML-Dateien zu lesen und zu kompilieren
  • -o .: weist MJML an, die kompilierte MJML-Ausgabe im selben Verzeichnis zu speichern

Sobald MJML mit der Kompilierung fertig ist, sollten Sie nun eine Datei „email.html“ im selben Verzeichnis sehen. Öffnen Sie es mit Ihrem bevorzugten E-Mail-Client oder Browser. Es sollte ungefähr wie das Bild unten aussehen:

Zusammenfassen

Wie wir gerade gesehen haben, hilft uns MJML dabei, qualitativ hochwertige, schöne HTML-E-Mails zu erstellen, die auf mehreren Browsern und Clients reagieren.

Dies ist das Ende dieses Artikels über die Verwendung von Vue.js und MJML zum Erstellen responsiver E-Mails. Weitere Informationen zur Verwendung von Vue.js und MJML zum Erstellen responsiver E-Mails finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Vue fügt Array- und Objektwerte hinzu und ändert sie reaktionsschnell
  • Vue.js muss jeden Tag lernen, das Prinzip der internen Reaktionsfähigkeit zu erkunden
  • Eine kurze Diskussion zum Reaktionsfähigkeitsprinzip von Vue
  • Sprechen Sie über das Missverständnis der Vue Responsive Data Update
  • Verwenden Sie die Methode Vue.set(), um eine reaktionsschnelle Änderung der Array-Datenschritte zu implementieren
  • Detailliertes Beispiel der ereignisgesteuerten Fortschrittsbalkenkomponente von Vue
  • So implementieren Sie ein reaktionsfähiges System in Vue
  • Eine kurze Diskussion über das Prinzip der Vue-Datenreaktionsfähigkeit

<<:  So ändern Sie die Kodierung in MySQL Version 5.7 unter Windows auf UTF-8

>>:  Erstellen eines Dateisystems für ARM-Entwicklungsboards unter Linux

Artikel empfehlen

Detaillierte Erklärung der Ansichten in MySQL

Sicht: Ansichten in MySQL haben viele Ähnlichkeit...

Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht

In der Vergangenheit wurde Float häufig für das L...

So schreiben Sie speichereffiziente Anwendungen mit Node.js

Inhaltsverzeichnis Vorwort Problem: Kopieren groß...

Führen Sie die Schritte aus, um schnell ein Vue3.0-Projekt zu erstellen

Inhaltsverzeichnis 1. Wir müssen sicherstellen, d...

Verwenden von Openlayer in Vue, um einen Ladeanimationseffekt zu realisieren

Hinweis: Sie können keine bereichsbezogenen Anima...

Detailliertes Tutorial zur Installation von qt5.12.8 und Umgebungskonfiguration auf Ubuntu18.04

Umfeld System: Ubuntu 18.04 Software: qt5.12.8 1....

Natives JS zum Erstellen eines verschiebbaren Anmeldefelds

Dieser Artikel zeigt ein verschiebbares Anmeldefe...

Ein Artikel bringt Ihnen die Vererbung von JS-Funktionen bei

Inhaltsverzeichnis 1. Einleitung: 2. Vererbung de...

Wie wird eine SQL-Anweisung in MySQL ausgeführt?

Inhaltsverzeichnis 1. Analyse der MySQL-Architekt...

Die chinesischen verstümmelten Zeichen in HTML-Dateien und die Anzeigeprobleme in Browsern

Meine Seite hatte heute auch verstümmelte Zeichen...

Detaillierte Erläuterung des Beispielcodes für das elastische CSS3 Flex-Layout

1. Grundlegende Konzepte //Jeder Container kann a...

Detaillierte Erklärung des Unterschieds zwischen der v-model-Direktive und dem .sync-Modifikator in Vue

Inhaltsverzeichnis V-Modell .sync Der Unterschied...

JS+CSS zur Realisierung einer dynamischen Uhr

In diesem Artikelbeispiel wird der spezifische Co...

SVG+CSS3 zum Erzielen eines dynamischen Welleneffekts

Eine Vektorwelle <svg viewBox="0 0 560 20...

Zehn wichtige Fragen zum Erlernen der Grundlagen von Javascript

Inhaltsverzeichnis 1. Was ist Javascript? 2. Was ...