HTML+HubLテンプレート

上のスクリーンショットは、cms-theme-boilerplateに含まれているbase.htmlファイルの例です。このボイラープレートは、HubSpotのCMSソフトウェアで効果的なウェブサイトを構築する際の開発を始めやすさを考慮して設計されています。ボイラープレートには、HubSpotが提唱するベストプラクティスが反映されています。HubSpotがボイラープレートを作成した目的として、開発者からのフィードバックと類似したプロジェクトからの教訓を得る考えもあります。ぜひこのボイラープレートからインスピレーションを得て、ウェブサイトプロジェクトを迅速に進めてみてください。

HTML+HubLテンプレートはコード化されたファイルなので、開発者の手元にある既存のツールを使用してローカル環境でも編集できます。ローカル開発に最適な方法は、HubSpotのローカル開発ツールを使用することです。これらのツールを使用すれば、デベロッパー ファイル システムとファイルマネージャーのファイルを安全にアップロード、取得、監視、作成できます。

他のテンプレート作成言語に慣れている開発者は、HTMLを中心にHubLを付加したこれらのテンプレートと、使用経験のある他のテンプレート作成言語との類似点をすぐに発見できるはずです。したがって、他のプラットフォームから簡単に移行できます。主な違いは、HubSpotでは、制作担当者にとって最適な使いやすい環境の提供に注力していること、そしてメンテナンス作業とパフォーマンス最適化の作業の負担の大部分を開発者から取り除いていることです。 

例：CSSファイルを読み込む場合に、HubSpotではスタイルシートに<link rel="stylesheet" type="text/css" href="theme.css">を使用するのではなく、テンプレートレベルでrequiresを使用して、モジュール固有のCSSをモジュールおよびmeta.json内に維持することを推奨しています。

この手法の利点は、条件に応じてCSSを読み込む処理を、開発者（と開発ツール）ではなくHubSpotに任せられることです。CMS Hubは、制作担当者がモジュールにインスタンスを追加したかどうかを把握して、必要なCSSを条件に応じて読み込むことができます。読み込むCSSを必要なものだけに限定すると、読み込み時間を短縮できます。CMS Hubはさらにパフォーマンスを向上させるために、このCSSのミニフィケーションを行って必要に応じてファイルを集約し、CDNを介して自動的に配信します。開発者がこのことに対応する必要はありません。

HubSpotでの開発を容易にするために、コミュニティーとHubSpotが作成したツールを使用できます。HubLはJingaをベースにした言語であり、大部分のところは同じ構文に従っているため、通常はjinjava対応のローカルエディターで、HTML+HubLの構文強調表示機能を拡張する言語プラグインを使用できます。

ローカル環境への対応策として、テンプレートアノテーションによってHubSpotの重要なテンプレート設定が示されています。アノテーションはコードの一部であることから、後でtemplateTypeに変更できます。

テンプレート設定によって、テンプレートを制作担当者に表示するかどうか、表示する場合はどのように表示するか、ドメイン全体のスタイルシートを使用するかどうかが決まります。

ファイルがテンプレートパーシャルでない限り、HubSpotのテンプレートを使用するには2つのタグが必要です。この2つのタグを次に示します。

• {{ standard_header_includes }}：必要なCSSを結合してミニフィケーションし、自動的に追加するために使用します。 
• {{ standard_footer_includes }}：HubSpotトラッキングスクリプトやモジュールなどの要素で使用するJavaScriptをページの下部に動的に追加するために使用します。

これらのタグは、テンプレート内に存在するか、またはテンプレートの子パーシャルとして公開して使用する必要があります。

テンプレートパーシャルは、他のコードファイルにインクルードできるHTML+HubLフィールドです。テンプレートパーシャルを使用することで、開発者は複雑なドキュメントをモジュール方式で作成したり、複数のテンプレートの間でマークアップを共有したりできます。テンプレートパーシャルの一般的な使用例としては、ヘッダー、フッター、サイドバーなどがあります。これらの要素は通常、サイト全体で共通であるため、パーシャルを使用するとコンテンツの管理が容易になります。通常必要なテンプレート変数を必要としないHTMLファイルを作成するには、ファイルの先頭にアノテーションisAvailableForNewContent: falseを含める必要があります。

個別のページで編集できるコンテンツが含まれる複数のテンプレートで使用できるテンプレートパーシャルのタイプ。templateType: page、isAvailableForNewContent: falseを設定して使用します。

また、includeタグを使用して、複数のCSSファイルを1つのCSSファイルにコンパイルできます。親ファイルを公開すると、インクルードされるファイルが親と子の両方のCSSを持つ1つのファイルにコンパイルされて、このファイルがミニフィケーションされます。cms-theme-boilerplateのCSSでは、ファイルの下部でこの手法を使用して、複数のCSSファイルを1つのファイルに結合しています。

グローバルに編集できるコンテンツが含まれる複数のテンプレートで使用できるテンプレートパーシャルのタイプ。グローバルパーシャルは、アノテーションtemplateType: global_partialを指定して利用します。通常はヘッダーとフッターとして使用されます。cms-theme-boilerplateでは、ヘッダーとフッターにこの手法が使用されています。これらのパーシャルは、base.html内でglobal_partialタグを使用して呼び出されます。グローバルパーシャルは、グローバルコンテンツの1つです。

複雑なテンプレートを作成するときは、親テンプレートを拡張する区画となるブロックを作成できます。この手法は全てのユーザー向けではありませんが、複雑なテンプレートをコーディングする際に、整理された状態を維持する上で役立ちます。

例えば、standard_header_includes変数とstandard_footer_includes変数を含む親テンプレートを作成できます。そのテンプレート内で、以下の構文を使用して一意のブロックを定義します。bodyは重複しない名前にします。

cms-theme-boilerplateのbase.htmlでは、この手法を使用して、templatesフォルダー内のテンプレートで拡張しています。

デザインマネージャーでドラッグ＆ドロップ テンプレートを使用して作成したグローバルグループを含めることもできます。以下に構文を示します。