Überblick über CMS Hub

Dieser Abschnitt soll Ihnen helfen, die wichtigsten Aspekte von CMS Hub, dem Content Management System von HubSpot, zu verstehen und großartige Websites auf dessen Grundlage zu entwickeln. Für ein optimales Erlebnis wird ein professionelles Verständnis der Grundlagen der Webentwicklung, einschließlich HTML, JavaScript und CSS, erwartet.

Wenn Sie neu bei CMS Hub sind, empfehlen wir Ihnen, mit dem Schnellstart-Tutorial zu beginnen und bei Bedarf darauf zurückzugreifen.

CMS Hub wurde entwickelt, um Unternehmen dabei zu helfen, ihre Web-Präsenz zu erweitern. Dabei soll vor allem Marketern das Erstellen und Verwalten von Inhalten ermöglicht und erleichtert werden. Die Inhalte, Lead-Erfassung und Analytics der Website sind in das CRM von HubSpot integriert, sodass Marketer auf einfache Weise personalisierte Erlebnisse für Besucher erstellen und diese Erlebnisse in das übrige Unternehmen integrieren können.

Die primäre Aufgabe von CMS Hub-Entwicklern besteht darin, Inhalte zu ermöglichen, anstatt sie als Content-Autoren zu erstellen. Dementsprechend wurde CMS Hub so konzipiert, dass es dank seines Systems von Designs und Modulen sowie der Drag-&-Drop-Bereiche die Bedürfnisse von Entwicklern mit den Anforderungen von Content-Autoren in Einklang bringt.

Eine gut konzipierte CMS Hub-Website sollte in enger Zusammenarbeit mit Ihren Content-Autoren entwickelt werden, um deren Bedürfnisse zu verstehen, und erfordert dann weniger laufenden Support und Wartung durch einen Entwickler. Wenn Sie auf Grundlage von CMS Hub programmieren, sollten Sie immer wieder prüfen, wie die Seitenerstellung für die Content-Autoren aussieht und funktioniert. Dadurch wird sichergestellt, dass sie so weit wie möglich unabhängig mit der Website arbeiten können.

HubSpot übernimmt das Hosting und die Wartung des CMS-Systems, d. h., sie müssen sich nicht um Plug-in-Verwaltung, Updates, Hosting, Skalierung oder Sicherheit kümmern. Der Nachteil dabei ist, dass das System die Möglichkeiten ein wenig mehr einschränkt als bei selbst gehosteten CMS-Systemen. So können Sie beispielsweise keine Systemgrundlagen manuell oder über Plugins ändern oder erweitern, das Low-Level-Rendering manipulieren oder direkt auf Datenbankinhalte zugreifen und diese ändern.

Von Entwicklern erstellte Inhalte (z. B. Designs, Vorlagen, Module, JavaScript und CSS) werden in einem Dateisystem für Entwickler erstellt, während Seiteninhalte (Seiten, Blog-Beiträge) in einem leistungsstarken blockbasierten WYSIWYG-Editor (What You See Is What You Get) gestaltet und erstellt werden und Mediendateien (von Content-Autoren erstellte Bilder, PDFs usw.) in einem auf einer Web-App basierenden Datei-Manager gespeichert werden.

Wenn eine Seite gerendert wird, leitet HubSpot die Anfrage an einen von vielen Servern auf der Grundlage der Domain weiter, rendert die Seite auf unseren Servern und lspeichert sie, wenn möglich, in einem Content Delivery Network (CDN) zwischen.

CMS Hub ermöglicht die Erstellung mehrerer Arten von Inhalten. Die Benutzeroberfläche für Content-Autoren unterscheidet sich je nach Inhaltstyp geringfügig. Dies hat Auswirkungen, die Sie als Entwickler kennen müssen. 

Website-Seiten und Landingpages werden unabhängig voneinander erstellt, aber alle Seiten basieren auf Vorlagen. Für Content-Autoren ist der Prozess des Erstellens einer Landingpage oder einer Website-Seite nahezu identisch. Der Unterschied besteht darin, dass Website-Seiten dazu dienen, Informationen zu präsentieren, die Teil Ihrer Website sind und organisch gefunden werden sollen, während eine Landingpage in der Regel mit einem bestimmten Marketingangebot oder einer Kampagne verknüpft ist (z. B. mit einer Marketing-E-Mail, die an eine bestimmte Liste von Kontakten gesendet wird). 

In der Benutzeroberfläche für Marketer sind die Analytics und die Organisation dieser Seitentypen ebenfalls separat organisiert, da Landingpages oft spezifische Konversionsziele haben.

HubSpot-Blogs haben zwei Ansichten – eine für die Listing-Seite und eine für die Seite mit den einzelnen Beiträgen – und jeder Blog-Beitrag wird in jede dieser Ansichten eingefügt. Sie können für einen Blog festlegen, dass er die gleiche Vorlage für Blog-Beiträge und Listing-Seiten teilt, oder über separate Vorlagen für die Listing-Seite und für Blog-Beiträge verfügen. Blog-Beiträge müssen die gleiche Vorlage teilen. Erfahren Sie mehr über Blog-Vorlagen-Markup und wie Sie Blogs in HubSpot erstellen und verwalten.

E-Mails können in HubSpot auf unterschiedliche Art und Weise erstellt werden:

• Klassische E-Mail: Das klassische E-Mail-Tool basiert auf der CMS-Plattform, sodass Sie E-Mail-Vorlagen und -Module auf ähnliche Weise wie Website-Seiten und Landingpages erstellen können. Sie können auch kodierte E-Mail-Vorlagen erstellen, um die vollständige Kontrolle über das Markup zu haben.
• Drag-&-Drop-E-Mails: E-Mails, die mit dem Drag-&-Drop-Editor erstellt wurden, können keine benutzerdefinierten Vorlagen verwenden, Content-Autoren können jedoch das E-Mail-Layout und Inhalte über die Drag-&-Drop-Oberfläche von HubSpot erstellen.

Neben dem Erstellen von Seiteninhalten über die In-App-Editoren oder der Hartcodierung in Vorlagen können Sie auch strukturierte Datenquellen verwenden, um dynamische Seiteninhalte mit HubL zu füllen. Sie können die folgenden Datenquellen verwenden, um Seiten zu füllen:

• HubDB: Speichern Sie Daten in Zellen von HubDB-Tabellen.
• CRM-Datensätze: Speichern Sie Daten in CRM-Datensätzen, z. B. Kontakte, Unternehmen oder benutzerdefinierte Objekte.

Dynamische Seiten mit strukturierten Inhalten zu erstellen bedeutet, dass Sie Webseiten und Seiteninhalte erstellen, bearbeiten und entfernen können, indem Sie die Datenquellen direkt aktualisieren. Ähnlich wie bei einem HubSpot-Blog umfasst ein Satz dynamischer Seiten eine einzelne Listing-Seite, um die Instanzen Ihrer Datenquelle anzuzeigen, und dann eine separate Seite für jede einzelne Instanz. Mit HubL können Sie die Daten, die die Seiten anzeigen, vollständig konfigurieren.

Beispielsweise können Sie eine HubDB-Tabelle erstellen, in der eine Reihe mit Informationen für jedes Mitglied eines Vertriebsteams gespeichert ist. Mithilfe dieser HubDB-Tabelle kann HubSpot dann eine Listing-Seite generieren, um wichtige Details aus jeder Tabellenzeile anzuzeigen (z. B. einen Namen und ein Bild für die einzelnen Vertriebsmitarbeiter), zusammen mit einer separaten Seite pro Vertriebsmitarbeiter, um weitere Informationen anzuzeigen (z. B. Biografie und Telefonnummer). Sollte ein Vertriebsmitarbeiter später zu einem anderen Team befördert werden, können Sie seine Zeile aus der HubDB-Tabelle löschen. HubSpot löscht daraufhin automatisch seine Detailseite und entfernt sie von der Listing-Seite. 

Die Kernelemente – Vorlagen, Designs und Module sowie die JavaScript- und CSS-Dateien sowie die Bilder, die sie unterstützen – werden in einem Dateisystem für Entwickler erstellt. Sie können dieses Dateisystem entweder im linken Fenster des Design-Managers oder in Ordnern anzeigen, die mit den Tools für die lokale Entwicklung synchronisiert wurden. Innerhalb des Dateisystems können die Elemente mit absoluten oder relativen Pfaden aufeinander verweisen.

Hinter den Kulissen werden diese Dateien Einträgen in einer Datenbank zugeordnet. Aus diesem Grund erfolgt der Zugriff auf das Dateisystem für Entwickler über die HubSpot-CLI-Tools und nicht über einen direkten SSH- oder FTP-Zugang, und einige Dateisystemfunktionen, die Sie vielleicht erwarten, z. B.erechtigungen und Symlinks, werden im Dateisystem für Entwickler nicht angeboten.

Dies unterscheidet sich von der Vorgehensweise eines herkömmlichen CMS-Systems, bedeutet aber, dass fehlerhafte Verweise zwischen Dateien oder Syntaxfehler zum Zeitpunkt der Veröffentlichung und nicht erst zur Laufzeit erkannt werden, was Sie zusätzlich vor unbeabsichtigten Fehlern bei späterem Live-Traffic auf der Website schützt.

Das CMS erkennt die Vorlagen im Dateisystem und präsentiert sie den Autoren, wenn sie neue Seiten erstellen, sodass die Struktur des Dateisystems Ihnen überlassen bleibt. Es ist nicht erforderlich, dass Module in einem /modules/-Ordner oder JavaScript in einem /js/-Ordner gespeichert werden. Es wird jedoch empfohlen, Ihre Inhaltselemente in ähnlicher Weise zu organisieren, wie wir es im Boilerplate-Beispielcode für das CMS getan haben. 

Designs, Vorlagen, Module und Felder sind die Objekte, mit denen Sie als Entwickler in CMS Hub am häufigsten arbeiten werden. Durch den effektiven Einsatz dieser verschiedenen Objekte können Sie Content-Autoren die Freiheit geben, selbstständig an Websites zu arbeiten und diese zu überarbeiten, ohne die von Ihnen festgelegten Stil- und Layoutvorgaben zu verletzen.

Designs und Module enthalten Felder, die Einstellungen für bestimmte Datentypen sind, z. B. Zahlen, Zeichenfolgen, Rich-Text und Bilder. Sie können steuern, wie diese beim Rendern dieser Objekte verwendet werden und wie sie organisiert und im WYSIWYG-Editor angezeigt werden sollen. Content-Autoren können im WYSIWYG-Editor Werte für Felder festlegen, die zum Zeitpunkt des Renderns auf das Design oder Modul angewendet werden.

Designs sind die Top-Level-Objekte, die das Erscheinungsbild einer Website definieren und eine benutzerfreundliche Umgebung zum Bearbeiten von Inhalten schaffen. Zu diesen Elementen können Vorlagen, Module, CSS-Dateien, JavaScript-Dateien, Bilder und vieles mehr gehören.

Mithilfe von Designs können Sie eine Reihe von Felder erstellen, mit denen Content-Autoren eine globale stilistische Kontrolle über eine Website erhalten, ohne CSS bearbeiten zu müssen. Sie können in CSS festlegen, wo diese Steuerelemente angewendet werden, Steuerelemente so anordnen, dass sie von anderen erben, und verwalten, wie sie im Design-Editor für Marketer dargestellt und organisiert werden. Content-Autoren verwenden den Design-Editor, um Designfelder zu ändern, eine Vorschau dieser Änderungen anhand der vorhandenen Vorlagen innerhalb eines Designs anzuzeigen und ihre Änderungen zu veröffentlichen.

Diese Designfelder können entweder global für eine Website festgelegt oder auf Seitenebene überschrieben werden.

Vorlagen definieren das Basis-Markup und den Stil einer Reihe von Seiten, die eine Vorlage verwenden. Sie können HubL, HTML und Links zu JavaScript- und CSS-Dateien enthalten und können auf die Verwendung mit bestimmten Inhaltstypen beschränkt werden. Sie haben volle Flexibilität bei der Gestaltung und dem Stil, den Sie in eine Vorlage einfügen können, aber Sie sollten sich an einige bewährte Methoden halten und einige wichtige Funktionen des CMS nutzen, um sicherzustellen, dass die Marketer die Seiten einfach bearbeiten können. Einige Best Practices umfassen:

• Erstellen von Vorlagen als Teil eines Designs und Verwendung von CSS auf Designebene, einschließlich Designfeldern, um den Großteil des Stylings innerhalb einer Vorlage zu übernehmen. Dies erleichtert es Content-Autoren, globale und lokale Stiländerungen auf konsistente Weise vorzunehmen, ohne dass sie sich mit dem Bearbeiten von CSS befassen müssen.
• Verwenden von Modulen für die meisten Komponenten auf Ihrer Seite, wodurch sie neu angeordnet und auf der gesamten Website wiederverwendet werden können. Im Folgenden finden Sie weitere Informationen zu Modulen.
• Verwenden von Drag-&-Drop-Bereichen, wo immer dies möglich ist, für zentrale Seiteninhalte, insbesondere auf internen Seiten. Mit Drag-&-Drop-Bereichen können Sie ein Standardlayout für die Module festlegen, aus denen eine Seite besteht, aber Marketern die Flexibilität geben, Layout und Stil unabhängig zu bearbeiten.
• Verwenden von globalen Teilvorlagen für gemeinsame Inhalte wie Header und Footer, die auf der gesamten Website einheitlich aussehen sollen.

Vorlagen können entweder mit HTML + HubL oder mit einer Drag-&-Drop-Oberfläche im Design-Manager erstellt werden. Es wird jedoch empfohlen, kodierte Vorlagen zu verwenden, da sie mehr Kontrolle und Funktionalität bieten als Drag-&-Drop-Vorlagen, z. B. die Unterstützung von Drag-&-Drop-Bereichen.

Module sind wiederverwendbare Komponenten, die Sie in Vorlagen und auf Seiten in CMS Hub platzieren können. Sie enthalten Steuerelemente für Marketer und enthalten HubL/HTML-Markup, CSS und JavaScript, mit denen sich zusammen wiederverwendbare und editierbare Komponenten einer Website erstellen lassen.

Die Steuerelemente für ein Modul werden in Feldern definiert. Bei der Entwicklung eines guten Moduls muss daher sowohl das Erscheinungsbild auf einer Seite als auch die Bearbeitungsmöglichkeiten für Content-Editoren berücksichtigt werden.

CMS Hub enthält gängige Standardmodule wie Header, Rich-Text, Bilder, Schaltflächen und CTAs, die Sie als grundlegende Komponenten verwenden. Sie werden wahrscheinlich auch Elemente entwickeln wollen, die interessantere Layouts haben können, die in Ihr Design und Ihre Vorlagen passen. Einige gängige Beispiele für Module, die Sie erstellen möchten, sind Accordions, Schieberegler und Registerkarten.

Sie können sich ein Modul als ein Objekt und Module auf Seiten als Instanzen dieses Objekts vorstellen. Das bedeutet, dass Updates am HubL, CSS oder JavaScript eines Moduls auf alle Instanzen dieses Moduls innerhalb von Seiten oder Vorlagen in einem bestimmten Portal angewendet werden. Module sind außerdem portalübergreifend übertragbar, unabhängig davon, ob Sie das in Design-Manager integrierte Kopiertool verwenden, sie im Marketplace verkaufen oder den Code direkt mit Tools für die lokale Entwicklung austauschen. Das bedeutet, dass Sie eine Designlösung einmal implementieren und auf allen Seiten und Portalen verwenden können. Wenn Sie sie dann aktualisieren müssen, können diese Änderungen auf allen Seiten übernommen werden, ohne dass Sie mehrere Seiten oder Vorlagen bearbeiten müssen.

Module können auch in Designs eingebunden werden. So können Sie mithilfe von Designfeldern das Erscheinungsbild von Modulen beeinflussen und sicherstellen, dass sie im Seiten-Editor prominent angezeigt werden, damit Content-Autoren einfachen Zugriff auf Module haben, die gut zu den von Ihnen erstellten Designs passen.

Erfahren Sie mehr in der Modulübersicht.

Felder sind die Steuerelemente, mit denen Content-Autoren die Parameter anpassen können, die an Ihre Designs und Module übergeben werden. Die Felder sind typisiert, einschließlich einfacher Typen wie boolesch, Text, URL, Auswahl und Datei, aber auch komplexere Felder wie Schriftart mit Styling sowie HubSpot-spezifische Felder wie Links zu anderen Inhalten oder Formularen im HubSpot-System.

Felder können auch innerhalb von Repeatern platziert werden, die ein Array an das Modul übergeben – ein Beispiel hierfür könnte ein Bildkarussell sein, bei dem Sie eine Reihe von Bildern mit zugehörigem ALT-Text übergeben möchten. Anstatt eine Reihe von Bild- und Textfeldern zu erstellen, können Sie jeweils ein Feld erstellen und in eine Wiederholungsgruppe einfügen.

Felder eines Moduls werden entweder im Design-Manager oder mit dieser Syntax in einer fields.json-Datei angegeben.  Die Felder für ein Thema müssen in der fields.json-Datei im Stammverzeichnis des Designs angegeben werden.

CMS Hub von HubSpot verwendet die HubSpot Markup Language oder HubL („Hubble“ ausgesprochen). HubL ist die HubSpot-Erweiterung von Jinjava, einer auf Jinja basierenden Template-Engine. HubL verwendet eine ganze Reihe von Markups, die nur in HubSpot vorkommen, und unterstützt nicht alle Funktionen von Jinja. Es wird vollständig serverseitig ausgeführt, wenn eine Seite gerendert wird.

HubL verfügt über die Funktionen, die man von einer einfachen Vorlagensprache erwartet, wie Variablen, for-Schleifen und if-Anweisungen, unterstützt aber auch komplexere Rendering-Makros, Datenabrufe und das Zuordnen mit Tags, Funktionen und Filtern. 

Wenn Sie an die Grenzen dessen stoßen, was mit HubL möglich ist, bietet HubSpot APIs für die Erstellung individuellerer Lösungen. CMS Hub Enterprise-Accounts können serverlose Funktionen nutzen, die eine anspruchsvollere serverseitige Programmierung ermöglichen. 

Wenn Sie weiter auf der Grundlage von CMS Hub entwickeln, können Sie in der HubL-Sprachreferenz weitere Einzelheiten zu bestimmten Sprachfunktionen nachlesen.