グローバルコンテンツ
グローバルコンテンツとは、ウェブサイト全体で共有されるコンテンツです。一般的な例として、ウェブサイトのヘッダー、フッター、サイドバー、ロゴなどのコンポーネントがあります。開発者は、グローバルパーシャルを使用するか、モジュールをグローバル化することにより、どのコンポーネントをグローバルとして扱うかを決めます。グローバルコンポーネントを編集する際は、コンテンツエディターの編集操作が異なります。グローバルコンテンツの編集と、複数のページ上での公開前の変更プレビューが簡単にできます。グローバルコンテンツの編集方法については、複数のテンプレートにわたるグローバルコンテンツの使い方に関するナレッジベース記事を参照してください。

グローバルコンテンツはウェブサイトの複数の場所で使用されるので、アクセシビリティーを考慮してグローバルパーシャルとグローバルモジュールをデザインし、作成することが特に重要になります。
グローバルパーシャルとは、ウェブサイト全体で再利用可能なHTMLおよびHubLのコンテンツ要素です。典型的なパーシャルは、ウェブサイトのヘッダー、サイドバー、フッターです。
グローバルモジュールとは、サイト上の複数のページで使用可能な1つまたは複数のコンテンツ要素で構成されたモジュールです。典型的なグローバルモジュールとしては、ブログの配信登録フォーム、セカンダリーナビゲーション要素、Call-To-Action(CTA)などがあります。
グローバルパーシャルとグローバルモジュールに含まれる全てのモジュールとフィールドは、グローバル コンテンツ エディター内で簡単に編集できます。
次に示すように、テンプレートタイプにglobal-partialを指定してcreateコマンドを使用することにより、新しいグローバル パーシャル テンプレートを作成できます。
テンプレートのタイプの選択を求めるメッセージが表示されます。[グローバルパーシャル]を選択します。
このコマンドを実行すると、指定したディレクトリーにテンプレートが作成され、そのHTMLファイルには以下のテンプレートアノテーションが含まれます。
グローバル コンテンツ パーシャルのサンプルを確認するには、GitHubにあるHubSpotのボイラープレートを参照してください。
グローバルパーシャル内でコンテンツのドラッグ&ドロップ機能を有効にするには、ページテンプレートで有効にする場合と同様に、dnd_area
タグを追加します。詳しくは、ドラッグ&ドロップエリアのドキュメントを参照してください。
既存のテンプレートのいずれかにグローバルパーシャルを追加するには、global_partial HubLタグを使用してパーシャルのパスを参照します。このタグを使用したHubSpotのボイラープレートの例を次に示します。
グローバルパーシャルが出力の場合は、グローバルパーシャルを<div>
で囲みます。これは、そのコンテンツがグローバルパーシャルであることを識別するためにページエディターで使用されます。
テンプレートの<head>
内ではglobal_partial
を使用しないでください。これにより、HTMLが無効になり、悪影響につながる恐れがあります。
ヘッダー内でグローバルパーシャルを使用するほとんどの場合は代わりに、グローバルモジュールを{%require_head%}
を利用することによってカスタムコードをheadに挿入し、モジュールフィールドを引き続き提供する方が適切です。
hs create module <name> <dest>コマンドを使用してモジュールを作成し、meta.jsonファイルでこのフラグをtrueに設定すると、システムによってモジュールがグローバルモジュールと認識されます。モジュールを使い始めるには、モジュールの概要ページに進んでください。グローバルモジュールは、デザインマネージャーを使用して作成することもできます。モジュールの作成(グローバルモジュールとカスタムモジュールの両方)については、モジュールの作成と編集に関するナレッジベース記事をご覧ください。
貴重なご意見をありがとうございました。