テンプレートでモジュールを使用する
モジュールは、テンプレートに直接追加したり、ドラッグ&ドロップエリアおよびフレキシブルカラムを使用して、ページに個別に追加したりできます。モジュールがテンプレートに追加されると、そのモジュールは既定でその場所に表示されます。ドラッグ&ドロップエリアやフレキシブルカラムにあるモジュールは、移動や削除が可能で、その他のモジュールもその周辺に追加できます。これがモジュールインスタンスです。
モジュールが定義されたら、必要に応じてcontent.widgets ディクショナリー経由でテンプレートレベルのフィールド値を取得できます。
HubLモジュールタグは{% %}
で区切られており、module
、一意の名前、モジュールのデザイン マネージャー パスを指定する必要があります。モジュールには、その他の設定のパラメーターを含めることもできます。
- モジュール名:テンプレートのコンテキスト内で重複しないIDをモジュールに指定します。
- モジュールのタイプの後に、名前を引用符で囲んで指定する必要があります。また、モジュール名では、スペースまたはダッシュの代わりに下線記号(アンダースコア)を使用する必要があります。
- この名前は、ページ/Eメールエディター内で設定されたコンテンツと、該当するHubLモジュールタグのマッチングに使用されます。例えば、テンプレートの2か所のエリアに同名のHubLモジュールタグを記述した場合、ユーザーがエディターで編集するモジュールは1つだけですが、そのモジュールに対する変更は両方のエリアに適用されます。
- モジュールのタイプの後に、名前を引用符で囲んで指定する必要があります。また、モジュール名では、スペースまたはダッシュの代わりに下線記号(アンダースコア)を使用する必要があります。
- パス:タグに応じて、デザインマネージャーでのモジュールの位置を定義します。
/
は、現在のドライブのルートを意味します。./
は、現在のディレクトリーを意味します。../
は、現在のディレクトリーの親を意味します。
@hubspot/
で始まり、その後にモジュールのタイプが続きます。
- パラメーター:モジュールのインスタンスの追加設定で、その動作とレンダリング方法を指定します。モジュールフィールドのテンプレートレベルの既定値が含まれます。
- パラメーターはカンマ区切りのキーと値のペアです。
- パラメーターには、文字列、ブール型、整数、列挙、JSONリストオブジェクトなどのさまざまな型があります。文字列パラメーターでは値を一重引用符または二重引用符で囲む必要がありますが、ブール型パラメーターでは
True
またはFalse
の値を引用符で囲む必要はありません。すべてのモジュールで利用可能なパラメーターについての詳細をご確認ください。 - モジュールのフィールド設定と比較して、エディター内でフィールド値が検証されることはないことに注意してください。例えば、モジュールに最小値が
1
に設定された数値フィールドがあり、このパラメーターに0
を渡す場合でも、値が無効だという警告は表示されません。
dnd_area
などのドラッグ&ドロップタグには、width
などの既定のパラメーターのセットがあります。デザインマネージャーでは、このような予約済みパラメーターのいずれかを使用するフィールドを新規に作成できませんが、ドラッグ&ドロップタグが導入される前に作成されたモジュールは予約済みパラメーターを既に使用している場合があります。
これを修正するのに、fields
パラメーターを使用できます。グループにフィールドデータを渡すのと同様に、フィールド名をfields
オブジェクトのキーとして渡すことができます。値には、フィールドタイプに必要な形式との一貫性が必要です。
以下は、他のネストされたフィールドグループを含むカスタムスタイルstyle
フィールドグループを持つカスタムドラッグ&ドロップモジュールの例です。テンプレートレベルの構成と、この同じグループ化がデザインマネージャーにどのように表示されるかを比較します。

配列をフィールドのパラメーターに渡すことにより、繰り返しフィールドにテンプレートレベルの既定値を設定できます。配列の項目はフィールドタイプに基づいて想定される形式にする必要があります。以下に例を示します。
- 単純なテキストフィールドでは文字列のみが求められます
- 画像の繰り返しフィールドでは画像フィールドのオブジェクトが求められます。これは、他の全てのフィールドタイプにも該当します。
スライドショーモジュールやよくある質問モジュールなどに使用される、フィールドの繰り返しグループが含まれるモジュールでは、グループにテンプレートレベルの既定値を設定できます。そのためには、フィールドグループのパラメーターにオブジェクトの配列を渡します。オブジェクトのキーと値のペアは、フィールド名とその値になります。
スタイル
パラメーターを使用してスタイルフィールドの既定値を明示的に設定できます。
これは他のグループの場合と同様に機能します。パラメーターはグループの名前です。このパラメーターに、設定する全てのフィールドと共にオブジェクトを渡します。
ほとんどのモジュールには既定のコンテンツを制御するパラメーターがありますがその際、モジュールの既定のコンテンツへの大きなコードブロックの追加が必要になることがあります。例えば、リッチテキストまたはHTMLモジュールの既定のコンテンツとして大きなHTMLブロックを含めることがあります。valueパラメーターにこのコードを記述する代わりに、HubLブロック構文を使用できます。
module_block
構文が導入される前には、widget_block
が使用されていました。同様のパターンですが、開始タグはwidget_block
とwidget_attribute
でした。終了タグはend_widget_attribute
とend_widget_block
でした。
widget_block
構文は非推奨になりましたが、古いコードを更新する必要はありません。
module_block
またはwidget_block
(非推奨)の直後に続くパラメーターはtype_of_module
パラメーターです。
当社のほぼ全てのドキュメントではmodule
を使用しています。HubSpotのV2モジュールは、開発者が作成できるものと同様の通常のモジュールです。したがって、別のtype_of_module
を使用する必要はありません。
widget_block
は非推奨になったため、module_block
を使用する必要があります。別の開発担当者からウェブサイトを引き継ぐ場合には、widget_block
とtype_of_module
を使用した古いコードが含まれている場合があります。
type_of_module
では、rich_text
やraw_html
などのHubSpotのV1モジュール名がサポートされます。追加のパラメーターはHubLの先頭行に追加できます。2行目で、ブロックのコンテンツが適用されるパラメーターを定義します。例えば、rich_text
モジュールではこれはhtmlパラメーターです。raw_html
モジュールでは、これはvalueパラメーターです(この2つの例については以下を参照してください)。
標準構文とブロック構文の他に、事前定義のコンテンツ変数の既定コンテンツとして大きなブロックを指定することがあります。この最も一般的な例として、content.email_body変数があります。この変数では、コンテンツエディターで変更可能な、標準のEメール本文が出力されます。これは標準HubLモジュールではないので、既定コンテンツのブロック指定にはcontent_attributeタグを使用します。Eメール本文変数に既定のコンテンツ コード ブロックを格納する例を以下に示します。
一部の特殊なパラメーターは使えるモジュールが限られますが、すべてのモジュールでサポートされるパラメーターを以下に示します。
Parameter | Type | Description | Default |
---|---|---|---|
label
| 文字列型 | コンテンツエディターで表示されるモジュールの名前。このパラメーターは、ユーザーに追加の指示を与える場合にも使用できます。 | |
overrideable
| ブール型(Boolean) | モジュールをコンテンツエディターで編集できるかどうかを制御します。これはデザインマネージャーの「コンテンツエディターでの編集を禁止する」設定に相当します。 |
True
|
no_wrapper
| ブール型(Boolean) |
ページ上では、モジュールは特殊なクラスの |
False
|
extra_classes
| 文字列型 | モジュールラッパーにクラスを追加します。複数のクラスを追加するには、クラスをスペースで区切って指定します。例として、以下のような場合が挙げられます。
| |
export_to_template_context
| ブール型(Boolean) |
|
False
|
unique_in_loop
| ブール型(Boolean) | モジュールがループ内で定義されている場合、モジュール名をloop.indexと共に付加します。 |
False
|
全てのモジュールタイプとそのパラメーターのリストを確認するには、ここをクリックしてください。
以下では、使用できるフィールドベースのモジュールパラメーターについて説明します。
フィールド | タイプ | 例 | キー |
---|---|---|---|
ブログ | 整数(ブログID) | 1234567890 |
|
ブール値 | true/false | false |
|
選択 | 文字列型 | "option_1" |
|
色 | オブジェクト |
|
|
CTA | 文字列(CTA ID) |
|
|
日付 | タイムスタンプ |
|
|
日時 | タイムスタンプ |
|
|
Eメールアドレス | 配列(メールアドレス文字列) |
|
|
ファイル | 文字列(ファイルのURL) |
|
|
フォローアップEメール | 整数(フォローアップEメールID) |
|
|
フォント | オブジェクト |
|
|
フォーム | オブジェクト |
|
|
HubDBテーブル | 整数(HubDBテーブルのID) | 123456789 |
|
アイコン | オブジェクト |
|
|
画像 | オブジェクト |
|
|
リンク | オブジェクト |
|
|
ロゴ | オブジェクト |
|
|
ミーティング | 文字列(ミーティングリンク) | "https://app.hubspot.com/meetings/developers-r-kewl" |
|
メニュー | 整数(メニューID) | 123456789 |
|
数値 | 整数 | 1 |
|
ページ | 整数(ページID) | 1234567890 |
|
リッチテキスト | 文字列(htmlを含めることが可能) | "<h1>Hello, world!</h1>" |
|
Salesforceキャンペーン | 文字列(SalesforceキャンペーンID) | "7016A0000005S0tQAE" |
|
シンプルメニュー | メニュー項目オブジェクトの配列 |
|
|
タグ | 整数(タグIDまたはスラッグ。IDを推奨) | 1234567890 |
|
テキスト | 文字列型 | "it's like any other string" |
|
URL | オブジェクト |
|
|
貴重なご意見をありがとうございました。