Erste Schritte mit Modulen

In diesem Tutorial lernen Sie anhand des CMS Hub-Boilerplate-Designs, wie Sie ein Modul erstellen und wie Sie es in Vorlagen und Seiten als Teil eines Designs verwenden können. Am Ende des Tutorials haben Sie ein Testimonial-Modul erstellt, das ein Bild-, ein Text- und ein Rich-Text-Feld enthält. 

Sie können sich auch schon eine Vorschau der fertigen Projektdateien anschauen. Da sich der Code des CMS-Boilerplate-Designs im Laufe der Zeit ändern kann, sind nur die wichtigsten Dateien enthalten, die Entwickler während des Tutorials erstellen oder bearbeiten müssen. Diese Dateien umfassen:

1. Testimonial.module: der Ordner mit den Dateien, aus denen das benutzerdefinierte Modul besteht, das Sie im Rahmen des Tutorials erstellen.
2. homepage.html: die Vorlage, die Sie bearbeiten, um unser benutzerdefiniertes Modul einzubinden.
3. images: der Ordner mit den Profilbildern, die Sie im Testimonial-Modul verwenden. 

Bevor Sie mit diesem Tutorial loslegen:

• Richten Sie eine CMS Hub-Entwickler-Sandbox ein. Sie können stattdessen Ihren bestehenden Account verwenden, aber in der Sandbox können Sie entwickeln, ohne dass sich dies auf die Elemente in Ihrem Haupt-Account auswirkt.
• Installieren Sie Node.js, das die Tools zur lokalen Entwicklung von HubSpot aktiviert. Unterstützt wird Version 10 oder höher.

In diesem Tutorial entwickeln Sie das Modul lokal. Um mit HubSpot über die Befehlszeilenschnittstelle zu interagieren, müssen Sie das CLI von HubSpot installieren und es für den Zugriff auf Ihren Account konfigurieren.

• Führen Sie im Terminal npm install -g @hubspot/cli aus, um das CLI global zu installieren. Um das CLI stattdessen nur in Ihrem aktuellen Verzeichnis zu installieren, führen Sie npm install @hubspot/cli aus.
• Führen Sie in dem Verzeichnis, in dem Sie dann Ihre Designdateien speichern, hs init aus.
• Drücken Sie die Eingabetaste, um die Seite mit dem persönlichen Zugriffsschlüssel in Ihrem Browser zu öffnen.
• Wählen Sie den Account aus, in dem Sie bereitstellen möchten, und klicken Sie dann auf „Mit diesem Account fortfahren“. Sie werden dann zur Seite mit dem persönlichen Zugriffsschlüssel des Accounts weitergeleitet.
• Klicken Sie neben „Persönlicher Zugriffsschlüssel“ auf „Anzeigen“, um Ihren Schlüssel zu sehen. Klicken Sie dann auf „Kopieren“, um ihn in Ihre Zwischenablage zu kopieren.
• Fügen Sie den kopierten Schlüssel im Terminal ein und drücken Sie dann die Eingabetaste.
• Geben Sie einen eindeutigen Namen für den Account ein. Dieser Name wird nur von Ihnen gesehen und verwendet, wenn Sie Befehle ausführen. Drücken Sie dann die Eingabetaste, um die Tools zur lokalen Entwicklung mit Ihrem Account zu verknüpfen:

Sie sehen dann eine Erfolgsmeldung, die bestätigt, dass die hubspot.config.yml-Datei erstellt wurde.

• Führen Sie im Terminal hs create website-theme my-theme aus. Daraufhin wird ein Designordner in Ihrem Arbeitsverzeichnis erstellt, der die Boilerplate-Elemente enthält.
• Laden Sie die Dateien auf Ihren Account hoch, indem Sie hs upload <src> <destination> ausführen. 
  • <src> ist der Pfad zur lokalen Datei, relativ zu Ihrem aktuellen Arbeitsverzeichnis.
  • <destination> ist der Zielpfad in Ihrem HubSpot-Account. Das Ziel kann ein neuer Ordner sein.
  • Zum Beispiel lädt hs upload my-theme my-new-theme den Ordner my-theme von Ihrem Rechner in den Ordner my-new-theme in HubSpot hoch.

• Sie können gespeicherte Änderungen jederzeit manuell zu HubSpot hochladen, indem Sie hs upload ausführen. Sie können aber auch hs watch <src> <destination> ausführen, um automatisch lokale Änderungen beim Speichern hochzuladen. Um die Anzeige zu beenden, können Sie Strg-C drücken.

• Melden Sie sich bei Ihrem HubSpot-Account an und gehen Sie dann zum Design-Manager, indem Sie zu „Marketing“ > „Dateien und Vorlagen“ > „Design-Tools“ navigieren.
• Öffnen Sie in der linken Seitenleiste des Design-Managers den soeben hochgeladenen Designordner. 
• Öffnen Sie im Designordner den Ordner für Module.
• Klicken Sie oben links auf „Datei“ > „Neue Datei“, um ein neues Modul in diesem Ordner zu erstellen.
• Klicken Sie im Dialogfeld auf das Dropdown-Menü, wählen Sie „Modul“ aus und klicken Sie dann auf „Weiter“.
  
• Aktivieren Sie das Kontrollkästchen „Seiten“, um das Modul für Website-Seiten und Landing-Pages verfügbar zu machen.
• Geben Sie einen Dateinamen für das Modul ein und klicken Sie dann auf „Erstellen“.

Fügen Sie als Nächstes dem Modul drei Felder hinzu:

• Ein Textfeld zum Speichern des Namens des Kunden, der das Testimonial abgibt.
• Ein Bildfeld, in dem das Profilbild des Kunden gespeichert wird.
• Ein Rich-Text-Feld, in dem das Testimonial des Kunden gespeichert wird.

So fügen Sie diese Felder hinzu:

• Klicken Sie in der rechten Seitenleiste auf das Dropdown-Menü „Feld hinzufügen“ und wählen Sie dann „Text“ aus.
  
• Geben Sie neben dem Bleistift-Symbol oben rechts im Textfeld Kundenname ein. Der Name der HubL-Variable ändert sich dann in customer_name.
• Legen Sie den Standardtext auf Sally fest.

• Klicken Sie in der rechten Seitenleiste auf das Breadcrumb-Symbol, um zum Hauptmenü des Moduls zurückzukehren.
• Fügen Sie auf die gleiche Weise ein weiteres Feld hinzu, wobei Sie diesmal den Feldtyp „Bild“ auswählen.
• Geben Sie dem Bildfeld das Label „Profilbild“ und legen Sie dann den Namen der HubL-Variablen auf profile_pic fest.
• Wählen Sie unter „Standardbild“ das Profilbild aus, das für Sally im Ordner Bilder der fertigen Projektdateien bereitgestellt wurde.
• Legen Sie den ALT-Text auf Kundenprofilbild fest.

• Fügen Sie auf die gleiche Weise ein weiteres Feld hinzu, wobei Sie dieses Mal den Feldtyp „Rich-Text“ auswählen.
• Versehen Sie das Rich-Text-Feld mit dem Label Testimonial.
• Klicken Sie auf das Feld „Standard-Rich-Text“ und geben Sie „Ich habe mit diesem Unternehmen nur gute Erfahrungen gemacht“ ein.

Bislang haben Sie Daten in mehrere Modulfelder eingegeben. Obwohl diese Felder Daten enthalten, zeigt das Modul selbst die Daten noch nicht an, da Sie die Felder nicht zum HTML-Code des Moduls hinzugefügt haben. Dies spiegelt sich darin wider, dass das Feld module.html zu diesem Zeitpunkt leer ist. 

Um HubL zum Modul hinzuzufügen, kopieren Sie den folgenden Code und fügen ihn in die module.html-Datei ein:

Im obigen Code wird die Punktnotation für den Zugriff auf verschiedene Felddaten verwendet:

• Die module-Variable steht für das Modul selbst, während das customer_name-Feld den Variablennamen darstellt, den Sie im vorherigen Schritt dem Textfeld zugewiesen haben. Zusammengenommen sucht module.customer_name nach dem Text des Kundennamens innerhalb des Moduls.
• Der Wert module.profile_pic.src greift auf das profile_pic-Feld des Moduls zu und sucht nach dem Wert src, der die URL des Bildes ist. Aber auch wenn die HubL-Variable die Bild-URL enthält, müssen Sie sie innerhalb eines Bild-HTML-Tags platzieren, um sie auf der Seite darzustellen.

Wenn der HubL zu Ihrem Modul hinzugefügt wurde, können Sie oben rechts auf „Vorschau“ klicken, um zu sehen, wie das Modul bisher aussieht.

Klicken Sie schließlich oben rechts im Design-Manager auf „Änderungen veröffentlichen“.

Nachdem Sie Ihr Modul nun erstellt haben, können Sie es in Ihre lokale Umgebung holen und in Ihren Designordner kopieren. Es ist wichtig zu erwähnen, dass Sie Module auch lokal von Grund auf neu erstellen können, aber für die Zwecke dieses Tutorials ist es hilfreich, den HubSpot-Prozess zusammen mit dem lokalen Prozess zu sehen. 

So holen Sie Ihr Modul in Ihre lokale Umgebung:

• Führen Sie im Terminal den folgenden Befehl aus: hs fetch <hs_src> <destination>
  • <hs_src> steht für den Dateipfad des Moduls in HubSpot. Um den Dateipfad abzurufen, klicken Sie mit der rechten Maustaste auf das Modul in der linken Seitenleiste des Design-Managers und wählen Sie dann „Pfad kopieren“ aus. 
    
  • <destination> steht für den Pfad zu dem lokalen Verzeichnis, in dem sich Ihr Design befindet. Wird dies nicht angegeben, verwendet der Befehl das aktuelle Arbeitsverzeichnis.

Für die Zwecke dieses Tutorials sollten Sie das Modul in den „src/modules“-Ordner im „my-theme“-Verzeichnis holen, das Sie in Schritt 1 erstellt haben. Erfahren Sie mehr über den fetch-Befehl.

Gehen Sie in Ihrem bevorzugten Code-Editor zu dem Modulordner, den Sie gerade von Ihrem HubSpot-Account geholt haben. In Ihrem Modulordner finden Sie fünf verschiedene Dateien:

Ausführlichere Informationen finden Sie in unserer Dokumentation zur Dateistruktur des Moduls, insbesondere zu den Dateien fields.json und meta.json. In diesem Tutorial konzentrieren wir uns auf die Dateien fields.json, module.css und module.html und wie sie vom Modul-Editor im Design-Manager generiert, heruntergeladen und hochgeladen werden.

Öffnen Sie die fields.json-Datei des Moduls. Abgesehen von einigen der id-Nummern, dem src-Attribut des Bildfeldes und möglicherweise der Reihenfolge der Felder sollte die Datei ein JSON-Objekt ähnlich dem folgenden enthalten:

Die Werte für die folgenden Felder entsprechen den Werten, die Sie in Schritt 3 hinzugefügt haben:

• name: der Name der Feldes.
• label: das Label des Feldes.
• default: der Standardwert des Feldes.  

So veranschaulichen Sie die Beziehung zwischen diesen Feldern und ihren Daten:

• Ändern Sie in Ihrer lokalen Umgebung den Standardwert des Rich-Text-Feldes Testimonial in den folgenden Wert: „Ich würde es zu 100 % meinen Kollegen und Freunden empfehlen.“
• Speichern Sie Ihre Datei. Wir werden in Schritt 10 darauf zurückkommen.

Die module.html-Datei sollte den HubL- und HTML-Code enthalten, den Sie in Schritt 4 im HubL + HTML-Modul-Editor geschrieben haben.

Um diesen Code interessanter zu gestalten, kopieren Sie den folgenden Code und fügen ihn in die Datei ein:

Die module.css-Datei sollte zu diesem Zeitpunkt leer sein. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein, um Stile hinzuzufügen:

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei.

Nachdem Sie Ihre Änderungen an dem Modul lokal vorgenommen haben, übertragen Sie sie zurück in Ihren HubSpot-Account.

• Gehen Sie zu Ihrem Terminal und stellen Sie sicher, dass Sie sich im richtigen Verzeichnis befinden.
• Führen Sie den watch-Befehl aus, um Änderungen beim Speichern an HubSpot zu übertragen: hs watch <src> <destination>. 
  • <src> ist der Pfad zur lokalen Datei, relativ zu Ihrem aktuellen Arbeitsverzeichnis.
  • <destination> ist der Zielpfad in Ihrem HubSpot-Account. Das Ziel kann ein neuer Ordner sein.
  • Zum Beispiel lädt hs upload my-theme my-new-theme den Ordner my-theme von Ihrem Rechner in den Ordner my-new-theme in HubSpot hoch.

• Gehen Sie in Ihrem HubSpot-Account zu „Marketing“ > „Dateien und Vorlagen“ > „Design-Tools“.
• Gehen Sie in der linken Seitenleiste zu dem von Ihnen erstellten Design, öffnen Sie dann den Modulordner und wählen Sie das Testimonial-Modul aus.
• Wenn das Modul geöffnet ist, sollten Sie Ihre Änderungen in den Bereichen module.html und module.css sehen.
• Klicken Sie oben rechts auf „Vorschau“. Daraufhin öffnet sich eine neue Registerkarte, auf der die Modulvorschau angezeigt wird. 

Fassen wir den bisherigen Verlauf des Tutorials zusammen. Sie haben:

• Ein Modul in HubSpot erstellt.
• Dieses Modul in Ihre lokale Umgebung geholt.
• Mithilfe Ihrer Tools zur lokalen Entwicklung Änderungen am HubL + HTML und CSS vorgenommen.
• Ihre Änderungen mithilfe des CLI-watch-Befehls in Ihren HubSpot-Account hochgeladen (Schritt 10).

Dies ist jedoch nur eine von vielen Methoden, die zur Erstellung eines Moduls zur Verfügung stehen. Sie könnten beispielsweise auch Folgendes tun:

1. Erstellen Sie ein Modul im Design-Manager.
2. Holen Sie sich dieses Modul von unserem HubSpot-Account.
3. Bevor Sie irgendwelche Änderungen vornehmen, führen Sie den watch-Befehl aus. Wenn der watch-Befehl ausgeführt wird, können Sie Ihr Modul lokal bearbeiten. Sie sehen dann, dass die Änderungen sofort in Ihrem HubSpot-Account angezeigt werden.

Experimentieren Sie bei der Entwicklung mit HubSpot mit Ihrem Workflow, um herauszufinden, was für Sie am besten funktioniert.

Im nächsten Teil des Tutorials erfahren Sie, wie Sie das Modul in einer Vorlage verwenden.

Teil 2: Verwendung des Moduls in einer Vorlage

Gehen Sie in Ihrem Code-Editor zum my-theme-Verzeichnis, das Sie in Schritt 1 beim ersten Herunterladen des CMS Hub-Boilerplate-Designs erstellt haben.

In diesem Teil des Tutorials arbeiten Sie hauptsächlich mit den Ordnern modules und templates. 

Gemäß ihrer einfachsten Definition sind Module bearbeitbare Bereiche von HubSpot-Vorlagen und -Seiten. In HubSpot können Sie über den Design-Manager Module in Vorlagen einfügen, aber hier verwenden wir dann HubL, um Module zu einer Vorlage in unserer lokalen Umgebung hinzuzufügen.   

• Öffnen Sie in Ihrem Code-Editor den templates-Ordner und dann die home.html-Datei. 
• Gehen Sie in der home.html-Datei zum letzten dnd_section, der etwa in Zeile 28 beginnen sollte. Diesem Abschnitt fügen Sie Ihr neues Modul hinzu.
  
• Kopieren Sie innerhalb dieses dnd_section über den anderen dnd_modules das folgende HubL-Modul-Tag und fügen Sie es ein:

Dieses Tag referenziert Ihr neues Modul anhand seines relativen Dateipfades. Im nächsten Schritt fügen Sie dem Tag weitere optionale Parameter hinzu.

• Wenn Sie den watch-Befehl nicht ausgeführt haben lassen, um Ihre Arbeit automatisch nachzuverfolgen, führen Sie hs watch <src> <dest> erneut in Ihrem Terminal aus, um Ihre Änderungen hochzuladen. Achten Sie darauf, dass dieser Befehl weiter ausgeführt wird, während Sie die nächsten Schritte abschließen. 
• Gehen Sie in Ihrem HubSpot-Account zum Design-Manager („Marketing“ > „Dateien und Vorlagen“ > „Design-Tools“).
• Wählen Sie in der linken Seitenleiste des Design-Managers die homepage.html-Datei aus.
• Klicken Sie oben rechts auf „Vorschau“ und wählen Sie dann „Live-Vorschau mit Anzeigeoptionen“ aus, um die Vorschau der Vorlage in einem neuen Fenster zu öffnen.

• Öffnen Sie in der neuen Registerkarte Ihre Vorschau, die Ihr neu hinzugefügtes Testimonial-Modul enthalten sollte.

So können Sie die Startseitenvorlage interessanter gestalten:

• Gehen Sie zurück zu Ihrem Code-Editor und öffnen Sie die homepage.html-Datei.
• Fügen Sie dem Tag des Testimonial-Moduls die folgenden Parameter hinzu:

Die obigen Parameter setzen die Standardwerte außer Kraft, die Sie den drei Feldern ursprünglich zugewiesen haben. Jeder Parameter verwendet den HubL-Variablennamen, den Sie den einzelnen Feldern in Schritt 3 zugewiesen haben:

• customer_name: dieser Parameter übergibt den Namen Mary an das Feld für den Kundennamen.
• profile_pic: dieser Parameter ist ein Objekt, das zwei Eigenschaften enthält. Die src-Eigenschaft verwendet die HubL-Funktion get_asset_url, um die URL für das Profilbild von Mary abzurufen. Beachten Sie, dass der Dateipfad des Bildes relativ zu Ihrem Arbeitsverzeichnis ist. Die alt-Eigenschaft weist den ALT-Text des Bildes zu.
• testimonial: dieser Parameter übergibt neuen Text in das Feld für das Testimonial.

Alternativ können Sie für das Rich-Text-Feld auch die HubL-Block-Syntax verwenden, um einen großen HTML- oder Textblock zu schreiben:

Erfahren Sie mehr über die Block-Syntax von Modulen.

Wenn Sie den watch-Befehl in Ihrem Terminal ausgeführt haben lassen, speichern Sie Ihre Änderungen, um sie an HubSpot zu senden. Sie können dann zum Design-Manager zurückkehren, um eine Vorschau der Vorlage anzuzeigen.

in diesem Schritt fügen Sie der Vorlage zwei weitere Testimonial-Module hinzu, indem Sie die gleichen Schritte wie zuvor ausführen:

• Gehen Sie zu Ihrem Code-Editor und öffnen Sie die home.html-Datei.
• Fügen Sie unter dem zuvor hinzugefügten Testimonial-Modul eine weitere Instanz des Moduls hinzu, indem Sie den Code des Moduls kopieren und einfügen. Geben Sie im neuen Testimonial-Modul die folgenden Details an, indem Sie die gleichen Schritte wie oben ausführen:
  • Der Name des Kunden ist Ollie.
  • Ollies Testimonial lautet wie folgt: „Ich kann kaum glauben, dass ich jemals ohne dieses Produkt Geschäfte gemacht habe!“
  • Für das Bild von Ollie fügen Sie den relativen Dateipfad für die Datei im images-Ordner hinzu. Geben Sie dann Ollies Bild das alt-Attribut „Ollie Profilbild“
• Fügen Sie unter dem zweiten Testimonial-Modul ein drittes mit den folgenden Angaben hinzu:
  • Der Name der Kundin ist Erin.
  • Erins Testimonial lautet: „Mein Umsatz hat sich fast verdreifacht, seit ich dieses Produkt nutze! Zögern Sie nicht, beginnen Sie jetzt!“
  • Für das Bild von Erin fügen Sie den relativen Dateipfad für die Datei im images-Ordner hinzu. Dann geben Sie Erins Bild das alt-Attribut „Erin Profilbild“.
• Speichern Sie Ihre Änderungen.

Wenn Sie den watch-Befehl in Ihrem Terminal ausgeführt haben lassen, können Sie zum Design-Manager zurückkehren, um eine Vorschau Ihrer Änderungen an der Vorlage anzuzeigen. Die Vorschau der Vorlage sollte nun alle drei Testimonial-Module enthalten.

Im nächsten Teil des Tutorials erstellen Sie eine HubSpot-Seite mit dieser Vorlage.

Teil 3: Verwendung der benutzerdefinierten Vorlage in einer HubSpot-Seite

Bevor Sie eine Seite mit der soeben geänderten Startseitenvorlage erstellen können, müssen Sie eine letzte Änderung in Ihrer lokalen Umgebung vornehmen, indem Sie die theme.json-Datei modifizieren. In dieser Datei weisen Sie dieses Verzeichnis als ein Design aus, auf das verschiedene HubSpot-Produkte zugreifen können.  

Öffnen Sie in Ihrem Code-Editor die theme.json-Datei und fügen Sie das folgende JSON-Objekt in die Datei ein (ohne den Kommentar //theme.json):

Nachdem Sie diesen Code hinzugefügt haben, speichern Sie Ihre Änderungen, damit der watch-Befehl Ihre Änderungen an HubSpot sendet.

So erstellen Sie eine Seite:

• Gehen Sie in HubSpot zu „Marketing“ > „Website“ > „Website-Seiten“.
• Klicken Sie oben rechts auf „Erstellen“ und wählen Sie dann „Website-Seite“ aus. Weisen Sie Ihrer Seite einen Namen zu und klicken Sie auf „Seite erstellen“.
• Wählen Sie im Bildschirm „Vorlage auswählen“ Ihr benutzerdefiniertes Design über das Dropdown-Menü für die Desigauswahl aus. 
  
  • Wenn Sie derzeit nicht das richtige Design sehen, wählen Sie im Dropdown-Menü für die Designauswahl die Option „Design ändern“ aus.

• Klicken Sie in Ihrem Design auf die Vorlage Startseite. Klicken Sie oben rechts auf „Vorlage auswählen“.

Im Seiten-Editor sollten Sie alle Änderungen sehen, die Sie im Laufe dieses Tutorials vorgenommen haben.

So passen Sie die Seite an:

• In der linken Seitenleiste können Sie auf der Registerkarte „Hinzufügen“ zwischen Standard- und benutzerdefinierten Modulen wählen. Um der Seite ein Modul hinzuzufügen, klicken Sie auf das Modul und ziehen Sie es in den Seitentext im mittleren Fensterbereich des Editors.
• Verwenden Sie in der linken Seitenleiste die Registerkarte „Inhalt“, um die aktuellen Module der Seite zu überprüfen.
• Verwenden Sie in der linken Seitenleiste die Registerkarte „Design“, um die für die Seite verfügbaren Designstile zu überprüfen. 
• Im mittleren Bereich, in dem der Inhalt Ihrer Seite angezeigt wird, können Sie auf „Module“ klicken, um deren Inhalt zu bearbeiten.
• Sie können Ihre Änderungen jederzeit in der Vorschau ansehen, indem Sie oben rechts auf „Vorschau“ klicken. Erfahren Sie mehr über das Erstellen und Bearbeiten von Seiten.

Der letzte Schritt vor der Veröffentlichung besteht darin, die Einstellungen der Seite zu bearbeiten:

• Klicken Sie oben im Editor auf die Registerkarte „Einstellungen“, um die Einstellungen der Seite aufzurufen.
• Klicken Sie auf das Feld „Seitentitel“, um der Seite einen Titel hinzuzufügen. Dieser Titel wird in der Browser-Registerkarte angezeigt, wenn ein Besucher die Seite aufruft.
• Klicken Sie unter „Seiten-URL“ auf das Feld „Content-Slug“, um die URL der Seite festzulegen. Sie können auch auf das Dropdown-Menü „Domains“ klicken, um eine beliebige Ihrer verknüpften Domains auszuwählen.

• Um Ihre Seite zu veröffentlichen, klicken Sie oben rechts auf „Veröffentlichen“. Nach der Veröffentlichung wird die Seite unter der angegebenen URL live geschaltet.

• Erste Schritte mit Designs
• Erste Schritte mit serverlosen Funktionen
• Erstellen eines effizienten Entwickler-Workflows
• Barrierefreiheit
• Verwenden von JavaScript-Frameworks in CMS Hub
• Verwenden von Webkomponenten in benutzerdefinierten Modulen
• Erstellen einer Code-Block-Webkomponente