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 Kundentestimonial-Modul erstellt, das ein Textfeld, ein Bildfeld und ein Rich-Text-Feld enthält.
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.
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:
- Testimonial.module: der Ordner mit den Dateien, aus denen das benutzerdefinierte Modul besteht, das Sie im Rahmen des Tutorials erstellen.
- homepage.html: die Vorlage, die Sie bearbeiten, um das benutzerdefinierte Modul einzuschließen.
- images: der Ordner mit den Profilbildern, die Sie im Modul verwenden.
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 den folgenden Befehl 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.
- Authentifizieren Sie im Verzeichnis, in dem Sie Ihre Designdateien speichern, Ihren HubSpot-Account, damit Sie über das CLI damit interagieren können.
- 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 den folgenden Befehl aus, um ein neues Theme mit dem Namen
my-theme
zu erstellen. Daraufhin wird ein Designordner mit dem Namenmy-theme
in Ihrem Arbeitsverzeichnis erstellt, der die Boilerplate-Elemente enthält.
- Laden Sie die Dateien in Ihren Account hoch.
Parameter | Description |
---|---|
<src>
| Der Pfad zu lokalen Dateien, relativ zu Ihrem aktuellen Arbeitsverzeichnis. |
<destination>
| Der Zielpfad in Ihrem HubSpot-Account. Dies kann ein neuer Ordner sein. |
hs upload my-theme my-new-theme
den Ordner my-theme
von Ihrem Rechner in den Ordner my-new-theme
in HubSpot hoch.Standardmäßig lädt HubSpot in den Standard-Account in Ihrer hubspot.config,yml
-Datei hoch. Sie können jedoch auch einen Account angeben, indem Sie ein --account=<accountNameOrId>
-Flag im Befehl einschließen. Zum Beispiel: hs upload --portal=mainProd
.
Weitere Informationen finden Sie in der CLI-Befehlsreferenz.
Mit der CMS-Boilerplate in Ihrer lokalen Umgebung erstellen Sie jetzt ein neues Modul für das Design.
- 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 dem Modul den Namen Testimonial 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.
Das Textfeld für den Kundennamen hinzufügen
- Klicken Sie in der rechten Seitenleiste des Modul-Editors auf das Dropdown-Menü „Feld hinzufügen“ und wählen Sie dann „Text“ aus.
- Klicken Sie in der rechten Seitenleiste oben rechts auf das Bleistift-Symbol, um das Feld zu benennen. Geben Sie für dieses Tutorial den Kundennamen 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.
Das Bildfeld für das Kundenprofilbild hinzufügen
- 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 Sallys Profilbild fest.
Das Rich-Text-Feld für Sallys Testimonial hinzufügen
- 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. Zu diesem Zeitpunkt enthält das Modul jedoch keinerlei HTML, um diese Daten zu rendern. Im Modul-Editor wird dies durch den leeren Zustand des Abschnitts module.html
widergespiegelt.
Fügen Sie als Nächstes HubL zu module.html
hinzu, um die Felddaten anzuzeigen.
Um Daten aus den zuvor erstellten Feldern anzuzeigen, fügen Sie folgenden HubL zum Bereich module.html
hinzu:
Die obigen HubL-Token verwenden Punktnotation, um Daten aus jedem Feld aufzurufen. Da wir Daten aus Modulfeldern abrufen möchten, beginnt jedes Token in diesem Fall mit module
, gefolgt vom HubL-Variablennamen des Feldes. Sie können Punktnotation verwenden, um auf bestimmte Eigenschaften eines Feldes zuzugreifen, die Sie in den profile_pic
-Token in Zeile 3 oben sehen können.
- Wenn der HubL zu Ihrem Modul hinzugefügt wurde, klicken Sie oben rechts auf „Vorschau“, um zu sehen, wie das Modul bisher aussieht.
- Klicken Sie dann oben rechts auf „Änderungen veröffentlichen“.
Nachdem Sie das Modul in HubSpot erstellt und veröffentlicht haben, verwenden Sie nun das CLI, um das Modul in Ihre lokale Umgebung zu holen, damit Sie seinen Content anzeigen und weitere Änderungen vornehmen können.
Um das Modul lokal anzuzeigen, müssen Sie es zunächst in Ihr lokales Design holen:
- 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 im Design-Manager 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.
Wenn Sie sich beispielsweise bereits im Arbeitsverzeichnis befinden, kann Ihr FETCH-Befehl wie folgt aussehen:
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:
Parameter | Description |
---|---|
fields.json
| Ein JSON-Objekt, das die Felder Ihres Moduls enthält. |
meta.json
| Ein JSON-Objekt, das Meta-Informationen zu Ihrem Modul enthält. |
module.css
| Die CSS-Datei, die Ihr Modul formatiert. |
module.html
| Den HTML- und HubL-Code für Ihr Modul. |
module.js
| Das JavaScript für Ihr Modul. |
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.
Die module.html
-Datei sollte den HubL- und HTML-Code enthalten, den Sie zuvor im HubL + HTML-Modul-Editor geschrieben haben.
Um diesen Code interessanter zu gestalten und bereit für CSS-Styling zu machen, kopieren Sie den folgenden Code und fügen ihn in die Datei ein:
Wenn Sie Ihren HTML wie oben beschrieben schreiben, verwenden Sie die BEM-Klassenstruktur in Übereinstimmung mit dem Styleguide des CMS Hub-Boilerplate-Designs.
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.
Übernehmen Sie Ihre lokalen Änderungen nach dem Speichern wieder 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>
.
- 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
undmodule.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.
Im nächsten Teil des Tutorials erfahren Sie, wie Sie das Modul in einer Vorlage verwenden.
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 das Modul zur Vorlage in Ihrer lokalen Umgebung hinzuzufügen.
- Öffnen Sie in Ihrem Code-Editor den
templates
-Ordner und dann diehome.html
-Datei. - Gehen Sie in der
home.html
-Datei zum letztendnd_section
, der etwa in Zeile 28 beginnt. Diesem Abschnitt fügen Sie Ihr neues Modul hinzu. - Kopieren Sie innerhalb dieses
dnd_section
und über den anderendnd_modules
das folgende HubL-Modul-Tag und fügen Sie es ein:
Dieses HubL-Tag referenziert Ihr neues Modul anhand seines relativen Dateipfades. Damit das Modul gleichmäßig zu den anderen beiden Modulen im dnd_section
passt, weist es auch einen width
- und offset
-Wert für das Modul zu:
- Das CMS von HubSpot verwendet ein 12-Spalten-Rastersystem. Um dieses Modul gleichmäßig mit den anderen beiden zu platzieren, müssen Sie daher jedes Modul im
dnd_section
aktualisieren, damit es eine Breite von4
hat. - Dann hat das erste
dnd_module
in der Gruppe (testimonial
) einen Versatz von0
, um es zuerst zu positionieren. - Das zweite
dnd_module
(linked_image
) hat einen Versatz von4
, um es als zweites zu positionieren. - Das dritte
dnd_module
(rich_text
) hat einen Versatz von8
, um es als drittes zu positionieren.
Nachdem Sie den offset
- und width
-Wert von jedem dnd_module
festgelegt haben, sieht Ihr Code wie folgt aus:
Beim Hinzufügen eines Moduls zu einem Drag-&-Drop-Bereich ist für das Modul-Tag kein eindeutiger Name erforderlich. Wenn Sie jedoch ein Modul zu einer HTML-Datei außerhalb von Drag-&-Drop-Bereichen hinzufügen, müssen Sie dem Modul einen eindeutigen Namen zuweisen. Sie würden auch eine etwas andere Syntax verwenden, zum Beispiel:
{% module "testimonial_one" path="../modules/Testimonial.module" %}
Erfahren Sie mehr über die Verwendung von Modulen in Vorlagen.
- Wenn Sie den watch-Befehl nicht ausgeführt haben lassen, um Ihre Arbeit automatisch nachzuverfolgen, führen Sie hs watch <src> <dest> aus. Stellen Sie sicher, dass dieser Befehl weiter ausgeführt wird, während Sie die nächsten Schritte abschließen.
- Öffnen Sie in Ihrem HubSpot-Account den Design-Manager („Marketing“ > „Dateien und Vorlagen“ > „Design-Tools“).
- Wählen Sie in der linken Seitenleiste des Design-Managers die home.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 die Vorlagenvorschau, 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
home.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 zuvor den einzelnen Feldern zugewiesen haben:
customer_name
: dieser Parameter übergibt den NamenMary
an das Feld für den Kundennamen. Dabei wird der OriginalwertSally
überschrieben.profile_pic
: dieser Parameter ist ein Objekt, das zwei Eigenschaften enthält.- Die
src
-Eigenschaft verwendet die HubL-Funktionget_asset_url
, um die URL für das neue Profilbild abzurufen. Beachten Sie, dass der Dateipfad des Bildes relativ zu Ihrem Arbeitsverzeichnis ist. Sie müssen dieses Bild zunächst demimages
-Ordner in Ihren lokalen Designdateien hinzufügen. Sie finden das Bild imimages
-Ordner der abgeschlossenen Projektdateien. - Die
alt
-Eigenschaft weist den ALT-Text des Bildes zu.
- Die
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, werden Ihre Änderungen, durch Speichern an HubSpot gesendet. 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. Sie können das Bild selbst aus den fertigen Projektdateien abrufen. Geben Sie dann Ollies Bild dasalt
-AttributOllie Profilbild
. - Um den Abstand beizubehalten, legen Sie
offset
auf4
undwidth
auf4
fest.
- Der Name des Kunden ist
- 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 dasalt
-AttributErin Profilbild
. - Um den Abstand beizubehalten, legen Sie
offset
auf8
undwidth
auf4
fest.
- Der Name der Kundin ist
- 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.
Bereiten Sie als letzten Schritt das Design für die Verwendung auf einer Live-Seite vor, indem Sie die theme.json
-Datei bearbeiten.
Wenn Sie den Standardnamen des Designs ändern möchten, können Sie dies tun, indem Sie die Felder name
und label
in der theme.json
-Datei konfigurieren.
Nachdem Sie diesen Code hinzugefügt haben, speichern Sie Ihre Änderungen, damit der watch
-Befehl Ihre Änderungen an HubSpot sendet.
Nachdem Sie nun ein benutzerdefiniertes Modul erstellt, es der home.html
-Vorlage hinzugefügt und optional den Designnamen angepasst haben, können Sie eine Live-Seite aus dem Design erstellen.
Wenn Sie einem ähnlichen Tutorial folgen möchten, das sich auf Designs konzentriert, sehen Sie sich das Tutorial „Erste Schritte mit Designs“ an. Andernfalls erfahren Sie in der Wissensdatenbank von HubSpot mehr über das Erstellen und Anpassen von Seiten.
Wenn Sie mehr über Module erfahren möchten, sehen Sie sich die folgenden Modulanleitungen an:
Vielen Dank, dass Sie Ihr Feedback mit uns geteilt haben.