カスタムモジュールを設定する方法についてご確認ください。
meta.json
ファイル内でモジュールオプションをローカルで設定します。これには次のプロパティーを含めることができます。
Parameter | Type | Description | Default |
---|---|---|---|
icon | 文字列 | モジュールのアイコンとして使用する画像のURL。 | |
label | 文字列 | コンテンツエディターに表示されるモジュールのラベル | |
module_id | 数値 | パスから独立した、モジュールの固有ID。 | |
is_available_for_new_content | ブール値 | HubSpotのモジュールエディターの右上隅にあるトグルの値。モジュールがコンテンツで使用可能かどうかを指定します。 | true |
global | ブール値 | モジュールがグローバルかどうかを示します。 | false |
host_template_types | 配列 | モジュールを使用できるコンテンツタイプのarray 。["PAGE", "BLOG_POST", "BLOG_LISTING", "EMAIL"] のうち1つまたは複数です。 | |
css_assets | 配列 | モジュールが依存するCSSファイルを含むarray 。相対パスを使用できます。例:"css_assets": [{ "path": "../path/to/file.css" }] | [] |
css_render_options | オブジェクト | async をtrue またはfalse にして、モジュールCSSによる非同期レンダリングを行うかどうかを設定します。 | {"async": false} |
js_assets | 配列 | モジュールが依存するJavaScriptファイル含むarray 。相対パスを使用できます。例:"js_assets": [{ "path": "../path/to/file.js" }] | [] |
js_render_options | オブジェクト | レンダリングされたページに追加するモジュールのJavaScriptタグを変更します。次のオプションがあります。
| {"position":"footer"} |
inline_help_text | 文字列 | モジュール上部の青い情報ボックスに表示されるヘルプテキスト(300文字まで)。モジュールの使用に必要な情報を指定します。フィールド固有のヘルプテキスト情報を伝達したい場合は、ヘルプ テキスト フィールドのドキュメントを参照してください。 | null |
master_language | 文字列 | 翻訳が有効になっている場合、モジュールのフィールドの最初の作成時に使用された言語の言語コード。例:en | |
placeholder | オブジェクト | モジュールのプレースホルダーコンテンツを設定します。次のプロパティーが含まれます。
| |
categories | 配列 | 最大3つのモジュールカテゴリーを含む配列。例として、以下のような場合が挙げられます。 "categories":["FORMS_AND_BUTTONS"] | |
content_tags | 配列 | タグ名と"USER" のsource を含むモジュール タグ オブジェクトの配列。例として、以下のような場合が挙げられます。 "content_tags": [{ "name" : "BUTTONS", "source" : "USER"``}] |
.svg
ファイルを使用する必要があります。アイコンを最適化するには、シンプルな単色のアイコンにしてください。複数の色を使用するアイコンは自動的に変換されます。レンチとペイントブラシのアイコンが、既定のモジュールアイコンとして表示されます。
デザインマネージャーを使用してアイコンを追加するには、次の手順に従います。
ローカルで開発する際にアイコンを追加するには、モジュールのmeta.json
ファイルを開き、icon
パラメーターの値を追加または編集して、ファイルマネージャーからのSVGを指定します。
global
をtrue
に設定すると、モジュールをグローバルにすることができます。
デザインマネージャーを使用して、ドラッグ&ドロップテンプレートのモジュールをグローバルに変換することもできます。
hostTemplateTypes
プロパティーにより、モジュールを使用できるコンテンツのタイプを制御できます。利用可能なテンプレートタイプについて詳細をご確認ください。モジュールでは、ページに直接追加できないように、is_available_for_new_content
をfalse
に設定して非表示にすることもできます。これは、ナビゲーションメニュー用および検索用に作成されたモジュールなどで役立ちます。
デザインマネージャーでこの更新を行うには、右側のサイドバーにある[テンプレートタイプ]オプションをクリックします。
module.css
およびmodule.js
を使用することに加えて、モジュール間で共有される依存関係はcss_assets
およびjs_assets
で付加することができます。パスにはmeta.json
ファイルに対する絶対パスまたは相対パスを使用することが可能です。
hs fetch --overwrite
を実行してローカル開発用モジュールを更新すると、相対パスが絶対パスによって上書きされます。meta.json
ファイルにカテゴリーとタグを追加できます。
categories
配列には、次のカテゴリーを3つまで含めることができます(大文字と小文字は区別されません)。
カテゴリー | 説明 |
---|---|
blog | ブログ固有のモジュール(最近の投稿リストなど)。 |
body_content | コンテンツをグラフィカルに表示するようにフォーマットされたモジュール(画像ギャラリーなど)。 |
commerce | コマース固有のモジュール(価格カードなど)。 |
design | コンテンツの構造とレイアウトに影響を与えるモジュール(アコーディオンなど)。 |
functionality | ページ上の動的な応答または動作を含むモジュール(メニューなど)。 |
forms_and_buttons | サイト訪問者がデータを入力して送信できるモジュール。 |
media | 画像、アイコン、動画、バナーなどの要素を含むモジュール。 |
social | ソーシャルメディア固有のモジュール(ソーシャルシェアなど)。 |
text | テキストのみを含むモジュール。 |
content_tags
配列には、次のモジュール タグ オブジェクトのいずれかを含めることができます(大文字と小文字は区別されます)。
コンテンツタイプ:
ACCORDION
ANIMATION
BLOG_POST
BUTTONS
CODE
CTA
FEED
FORM
ICON
IMAGE
LISTS
LOGO
MENU
RICH_TEXT
SLIDER
TEXT
VIDEO
BANNER
BLOG
BRANDING
CALCULATOR
CONVERSION
EMAIL
GALLERY
HEADERS
INTERACTION
LAYOUT
MAP
MULTIMEDIA
NAVIGATION
PROGRESS_BAR
SEARCH
SETTINGS
SOCIAL
TRANSLATION