Die CMS Hub Boilerplate

Last updated:

Die CMS Hub Boilerplate bietet Entwicklern Unterstützung, die in CMS Hub eine Website einrichten möchten. Dazu werden zum Beispiel bewährte Methoden für die Nutzung der CMS Hub-Plattform bei der Entwicklung von Websites vermittelt. Die Boilerplate ist ein Open-Source-GitHub-Projekt, in dem alle Interessierten Änderungsvorschläge einbringen und Ideen für ihre eigenen Projekte finden können. Wenn Sie neu in CMS Hub sind und mit einem neuen Projekt auf der Grundlage der Boilerplate beginnen möchten, folgen Sie der Schnellstartanleitung für die Entwicklung in CMS Hub.

Warum sollten Entwickler die CMS Hub Boilerplate verwenden?

Die CMS Hub Boilerplate wird von HubSpot entwickelt und aktiv gepflegt. Bei der Erstellung der Boilerplate haben wir bewährte Methoden berücksichtigt, die von der Art und Weise beeinflusst wurden, wie Entwickler das Erstellen von Websites optimal gestaltet haben und diese Erkenntnisse dann auf die Erstellung einer Website mit dem CMS Hub angewendet. Damit steht den Entwicklern eine saubere, leistungsfähige und modifizierbare Website zur Verfügung, die eine erhebliche Zeitersparnis beim Entwickeln ermöglicht. Die Boilerplate bietet auch umfassende CSS für Elemente von HubSpot wie Formulare, Menümodule, Basisklassen und mehr. Wenn Sie die Boilerplate einmal in Aktion sehen möchten, gehen Sie zu https://boilerplate.hubspotcms.com/

Erste Schritte bei der Verwendung der CMS Hub Boilerplate

Um mit der Verwendung der Boilerplate in Ihrer lokalen Entwicklungsumgebung zu beginnen, folgen Sie einfach unserer Schnellanleitung zur Entwicklung von Websites in CMS Hub.

CMS Hub Boilerplate-Struktur

Die Entwickler können mit der Boilerplate mit Tools für lokale Entwicklung oder direkt im Design-Manager arbeiten. Die Boilerplate verwendet relative Pfadreferenzen für alle Elemente, was eine einfache Anpassung an Ihr Projekt ermöglicht. Auf diese Weise kann die Boilerplate auch vollständig zwischen den Accounts in der HubSpot-Plattform übertragen werden. Nachfolgend sehen Sie einen Screenshot der Ordnerstruktur der Elemente der Boilerplate. In der Boilerplate werden die Elemente in mehrere Verzeichnisse aufgeteilt, sodass leicht ermittelt werden kann, wo sie sich befinden.

Ordnerstruktur der CMS Hub Boilerplate

Die zugrundeliegende Vorlagenstruktur der CMS Hub Boilerplate dreht sich um ein gemeinsames Basislayout, das sich im Ordner „Vorlagen“ > „Layouts“ befindet und dann beim Erstellen zusätzlicher Seitenvorlagen innerhalb des Systems mit dem {% extends %}-Tag erweitert wird und den {% block body %}-Block für seinen Hauptinhalt referenziert. Ein Beispiel dafür, wie das extend-Tag und die Blöcke verwendet werden, finden Sie in jeder der HTML-Dateien im Vorlagenverzeichnis.

Dies ist eine gängige Methode beim Entwickeln von CMS-Systemen, bei der Sie eine Basisvorlage (manchmal auch als Haupt- oder übergeordnete Vorlage bezeichnet) haben, die alle wichtigen strukturellen Teile des Inhalts Ihrer Website enthält. Dies sind häufig Elemente, die sich innerhalb des <head>-Elements auf Ihrer Website befinden, z. B. allgemeine Meta-Eigenschaften (Bsp.: Titel und Meta-Beschreibung), Favicon-Links, CSS-Links und Skripte von Drittanbietern.

<!doctype html> <html lang="{{ html_lang }}" {{ html_lang_dir }}> <head> <meta charset="utf-8"> <title>{{ page_meta.html_title }}</title> {% if site_settings.favicon_src %}<link rel="shortcut icon" href="{{ site_settings.favicon_src }}" />{% endif %} <meta name="description" content="{{ page_meta.meta_description }}"> {{ require_css(get_asset_url("../../css/layout.css")) }} {{ require_css(get_asset_url("../../css/main.css")) }} {{ require_css("https://fonts.googleapis.com/css?family=Merriweather:400,700|Lato:400,700&display=swap") }} {{ require_js(get_asset_url("../../js/main.js")) }} {{ standard_header_includes }} </head> <body> <div class="body-wrapper {{ builtin_body_classes }}"> {% block header %} {% global_partial path="../partials/header.html" %} {% endblock header %} {% block body %} <!-- Nothing to see here --> {% endblock body %} {% global_partial path="../partials/footer.html" %} </div> {{ standard_footer_includes }} </body> </html>

Innerhalb dieses Basislayouts gibt es auch Aufrufe an unsere globalen Header- und Footer-Teilvorlagen. Dies ermöglicht es uns, den Code für diese Teilvorlagen aus Gründen der Modularität in separaten Dateien aufzubewahren. Da es sich um globale Teilvorlagen handelt, können sie von Ihren Content-Autoren problemlos mit unserem Editor für globalen Content bearbeitet werden.

 

Weitere Informationen zu den in der Boilerplate enthaltenen Elementen finden Sie im Wiki der Boilerplate auf GitHub.

jQuery

Die HubSpot Theme Boilerplate benötigt kein jQuery, um zu funktionieren. Bei älteren HubSpot-Accounts wird jQuery standardmäßig geladen. Bei neueren HubSpot-Accounts ist jQuery standardmäßig deaktiviert.

In der Vergangenheit war für HubSpot-Skripte jQuery erforderlich, um ordnungsgemäß zu funktionieren, sodass die domainübergreifende Einstellung dazu diente, die Kompatibilität sicherzustellen. HubSpot-Skripte verwenden kein jQuery mehr. Denn JQuery ist nicht erforderlich, und es gibt bessere Möglichkeiten für Entwickler, Bibliotheken einzubinden, die auch mit der Versionskontrolle funktionieren. Es wird empfohlen, die jQuery-Einstellungen für neue Websites zu deaktivieren. 

Beachten Sie bitte, dass durch das Deaktivieren von jQuery auf einer Domain, die über eine bestehende Website verfügt, Landing-Pages oder bestehende Webseiten, die Sie haben, beschädigt werden können, wenn sie von jQuery abhängen.

Wenn Sie jQuery auf Ihrer neuen Website nutzen möchten, ist es empfehlenswert, die neueste Version von jQuery zu verwenden. Es gibt zwei einfache Möglichkeiten, dies zu tun:

  • Laden Sie die neueste Version von jQuery in Ihr Entwickler-Dateisystem hoch und verwenden Sie require_js, um es zum gewünschten Zeitpunkt zu laden.
  • Verwenden Sie ein CDN, dem Sie vertrauen, und verwenden Sie require_js, um jQuery zum gewünschten Zeitpunkt zu laden.

Weiterführende Ressourcen


War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.