グローバルコンテンツ

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

グローバル コンテンツ エディター

グローバルコンテンツを使用する場面

グローバルコンテンツは、ウェブサイト内で複数のページにわたって一貫した情報を表示する部分に使用するのが最適です。例としては、ウェブサイトのヘッダーとフッターがあります。グローバルコンテンツの例は、このページの最上部にもあります。開発者向けサイトのヘッダーでは、グローバルコンテンツを利用して、以下のような最上部のヘッダーを作成しています。

HubSpot開発者向けサイトのグローバルヘッダー

グローバルコンテンツは次のような領域にも使用できます。

  • ウェブサイトのセクション別のセカンダリーナビゲーション
  • 著作権のフッター(またはサブフッター)
  • ブログ記事のサイドバー(最近の投稿、執筆者リストなどの表示に使用)

グローバルコンテンツはウェブサイトの複数の場所で使用されるので、アクセシビリティーを考慮してグローバルパーシャルとグローバルモジュールをデザインし、作成することが特に重要になります。

グローバルパーシャルとグローバルモジュール

グローバルパーシャルとは、ウェブサイト全体で再利用可能なHTMLおよびHubLのコンテンツ要素です。典型的なパーシャルは、ウェブサイトのヘッダー、サイドバー、フッターです。 

グローバルモジュールとは、サイト上の複数のページで使用可能な1つまたは複数のコンテンツ要素で構成されたモジュールです。典型的なグローバルモジュールとしては、ブログの配信登録フォーム、セカンダリーナビゲーション要素、Call-To-Action(CTA)などがあります。

グローバルパーシャルとグローバルモジュールに含まれる全てのモジュールとフィールドは、グローバル コンテンツ エディター内で簡単に編集できます。

ローカル開発ツールを使用してグローバル コンテンツ パーシャル テンプレートを作成する

次に示すように、テンプレートタイプにglobal-partialを指定してcreateコマンドを使用することにより、新しいグローバル パーシャル テンプレートを作成できます。

hs create template <partial-file-name>

テンプレートのタイプの選択を求めるメッセージが表示されます。[グローバルパーシャル]を選択します。

このコマンドを実行すると、指定したディレクトリーにテンプレートが作成され、そのHTMLファイルには以下のテンプレートアノテーションが含まれます。

<!-- templateType: global_partial label: Page Header -->

グローバル コンテンツ パーシャルのサンプルを確認するには、GitHubにあるHubSpotのボイラープレートを参照してください。

グローバル コンテンツ パーシャルにドラッグ&ドロップエリアを追加する

グローバルパーシャル内でコンテンツのドラッグ&ドロップ機能を有効にするには、ページテンプレートで有効にする場合と同様に、dnd_areaタグを追加します。詳しくは、ドラッグ&ドロップエリアのドキュメントを参照してください。 

既存のテンプレートにグローバル コンテンツ パーシャルを追加する

既存のテンプレートのいずれかにグローバルパーシャルを追加するには、global_partial HubLタグを使用してパーシャルのパスを参照します。このタグを使用したHubSpotのボイラープレートの例を次に示します。

{% global_partial path="../partials/header.html" %}

グローバルパーシャルが出力の場合は、グローバルパーシャルを<div>で囲みます。これは、そのコンテンツがグローバルパーシャルであることを識別するためにページエディターで使用されます。

<div data-global-resource-path="cms-theme-boilerplate/templates/partials/header.html"> <!-- Your header.html code is output here --> </div>

テンプレートの<head>内ではglobal_partialを使用しないでください。これにより、HTMLが無効になり、悪影響につながる恐れがあります。

ヘッダー内でグローバルパーシャルを使用するほとんどの場合は代わりに、グローバルモジュールを{%require_head%}を利用することによってカスタムコードをheadに挿入し、モジュールフィールドを引き続き提供する方が適切です。

グローバルモジュールを作成する

グローバルモジュールは、CLIツールを使用して他のモジュールと同じように作成できます。モジュールをグローバルモジュールとして通知するか標準モジュールとして通知するかの主な違いは、モジュールのmeta.jsonファイルでのglobalフラグの設定です(以下のコードサンプルの5行目を参照)。

グローバルモジュール

// meta.json file { "css_assets": [], "external_js": [], "global": true, "help_text": "", "host_template_types": ["PAGE"], "js_assets": [], "other_assets": [], "smart_type": "NOT_SMART", "tags": [], "is_available_for_new_content": false }

グローバルではないモジュール

// meta.json file { "css_assets": [], "external_js": [], "global": false, "help_text": "", "host_template_types": ["PAGE"], "js_assets": [], "other_assets": [], "smart_type": "NOT_SMART", "tags": [], "is_available_for_new_content": false }

hs create module <name> <dest>コマンドを使用してモジュールを作成し、meta.jsonファイルでこのフラグをtrueに設定すると、システムによってモジュールがグローバルモジュールと認識されます。モジュールを使い始めるには、モジュールの概要ページに進んでください。グローバルモジュールは、デザインマネージャーを使用して作成することもできます。モジュールの作成(グローバルモジュールとカスタムモジュールの両方)については、モジュールの作成と編集に関するナレッジベース記事をご覧ください。


参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。