HTML+HubLテンプレート
HTML+HubLテンプレートは、CMS Hubのどのテンプレートのタイプにも使用できます。このテンプレートはHubLテンプレート作成言語をサポートする.htmlファイルです。このようなHubL対応のコードテンプレートのプレビューには、デザインマネージャーのテンプレートプレビューまたはサンドボックスアカウントを使用するのが最適です。HTML+HubLテンプレートにはパーシャルを含めることができます。パーシャルはヘッダーやフッターなど、共通の要素に使用するコードを分ける際に使用できます。
HTML+HubLテンプレートを使用すると、開発者はビジュアル デザイン マネージャーのドラッグ&ドロップ方式のテンプレートを使用する場合よりも柔軟に制御できます。これにより、開発者はドラッグ&ドロップ機能を使用して、HTML+HubLテンプレートでなければ実現できない、快適な編集環境を制作担当者に提供できます。

HTML+HubLテンプレートはコード化されたファイルであるため、お好みのツールを使用してローカル環境でも編集できます。推奨されるのは、HubSpot独自のローカル開発ツールの使用です。HubSpotの開発ツールでは、デベロッパー ファイル システムとファイルマネージャーのファイルを安全に管理し、アップロード、取得、監視、作成することができます。
以前に他のテンプレート言語を使用した経験がある場合は、それと同様の方法で、HubSpotでもHTML+HubLテンプレートを構築できます。主な違いは、HubSpotでは、制作担当者にとって最適な編集環境を実現するために注力していること、そしてメンテナンスとパフォーマンス最適化の開発者の作業負担の大部分を軽減していることです。
例えば、特定のモジュールを対象に所定のページでCSSファイルを読み込む必要がある場合、<link rel="stylesheet" type="text/css" href="theme.css">
を使用する代わりに、モジュールのmeta.jsonファイル内にあるcss_assets
を使用してスタイルシートをインクルードします。これにより、HubSpotは、モジュールがページに存在する場合にのみCSSを条件付きで読み込むため、不必要に読み込まれるCSSの量を最小限に抑えることができます。
詳しくは、HubSpot開発ワークフローの最適化方法をご確認ください。
テンプレートの上部に含まれるテンプレートアノテーションは、重要なテンプレート設定を構成するためのもので、テンプレートのタイプや新しいコンテンツの作成に使用できるかどうかなどを設定できます。テンプレートアノテーションは、開発プロセス中にいつでも変更できます。利用可能なテンプレートアノテーションの詳細については、以下をご覧ください。
アノテーション | 型 | 説明 |
---|---|---|
templateType
| String | ファイルのテンプレートタイプを指定します。以下の値を使用できます。
|
isAvailableForNewContent
| String | コンテンツ作成プロセスでテンプレートを選択できるかどうかを指定します。 このアノテーションが |
enableDomainStylesheets
| String | テンプレートでドメインスタイルシートを読み込むかどうかを指定します。 |
Label
| String | テンプレート選択画面に表示される、テンプレートについての分かりやすい説明文。例えば、 |
screenshotPath
| String | 制作担当者がテンプレートを選択しているときに表示されるスクリーンショット。このスクリーンショットによってテンプレートが区別しやすくなります。 |
ファイルがテンプレートパーシャルでない限り、HubSpotのテンプレートを使用するには2つのタグが必要です。この2つのタグを次に示します。
{{ standard_header_includes }}
:必要なCSSを結合してミニフィケーションし、自動的に追加するために使用します。{{ standard_footer_includes }}
:HubSpotトラッキングスクリプトやモジュールなどの要素で使用するJavaScriptをページの下部に動的に追加するために使用します。
これらのタグは、テンプレート内に存在するか、またはテンプレートの子パーシャルとして公開して使用する必要があります。
テンプレートパーシャルは、他のコードファイルにインクルードできるHTML+HubLファイルです。パーシャルを使用して複数のテンプレートの間でマークアップを共有することで、モジュール方式の開発アプローチをとることができます。例えば、ヘッダーをパーシャルにすれば、コンポーネントとして簡単にインクルードでき、再度コード化する必要がなくなります。
標準パーシャルとは、個々のページで編集できるコンテンツを含む、再利用可能なテンプレートまたはコンポーネントのことです。常にコンテンツを共有するグローバルパーシャルとは異なり、標準パーシャルでは、制作担当者が個々のページで必要に応じてコンテンツを変更できます。例えば下記のコードでは、サイドバーモジュールが別のテンプレートファイルに取り込まれます。
標準パーシャルの場合、テンプレートファイルの先頭に次のアノテーションを組み込む必要があります。
templateType: page
isAvailableForNewContent: false
グローバルパーシャルとは、そのパーシャルの全てのインスタンスで共有されるコンテンツを含む一種のグローバルコンテンツであり、複数のテンプレートで使用できます。多くの場合、ヘッダーとフッターにはグローバルパーシャルが使用されます。その一例として、HubSpotのCMSボイラープレートのヘッダーと(英語)とフッター(英語)をご確認ください。これらのパーシャルは、base.html(英語)内でglobal_partial
タグを使用して呼び出されます。
グローバルパーシャルの場合、テンプレートファイルの先頭にアノテーションとしてtemplateType: global_partial
を組み込む必要があります。
複雑なテンプレートを作成するときは、親テンプレートを拡張する区画となるブロックを作成できます。
例えば、必須の変数であるstandard_header_includes
とstandard_footer_includes
を含む親テンプレートを作成できます。そのテンプレート内で、以下の構文を使用して一意のブロックを定義します。body
は一意の名前です。
これにより、子テンプレート内で親テンプレートを拡張して、body
ブロックにさらにコンテンツを挿入することができます。
この方法は、HubSpotのCMSボイラープレートに含まれるbase.html(英語)テンプレートで使用されています。このテンプレートが、templatesフォルダー(英語)内の他のテンプレートによって拡張されるようになっています。
デザインマネージャーのドラッグ&ドロップ テンプレート ビルダーを使用して作成されたグローバルグループを含めることもできます。以下に構文を示します。
貴重なご意見をありがとうございました。