> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# export_to_template_context

> Export_to_template_contextは、モジュールを実際に表示せずに、モジュールのパラメーターをテンプレート環境で使用できるようにするパラメーターです。このパラメーターは、全てのHubLモジュールタグに使用できます。これらのパラメーターを取得し、変数に保存し、テンプレートのロジックに含めるには、widget_dataタグを使用します。

`export_to_template_context`は、HubLタグを実際に表示することなく、HubLタグのパラメーターをテンプレート環境で使用するためのパラメーターです。このパラメーターは、全ての[HubLタグ](/cms/reference/hubl/tags/standard-tags)に使用できます。これらのパラメーターを取得し、[変数](/cms/reference/hubl/variables-macros-syntax)に保存し、テンプレートのロジックに含めるには、`widget_data` dict（ディクショナリー）を使用します。

表示されていないHubLタグのパラメーターをテンプレートのコンテキストで使用できれば、コンテンツエディターでのテンプレートの表示方法をユーザーが決めることが可能になります。例えば、ユーザーがフィールドに値を入力したときに、特定のコードブロックのみを表示する必要があるとします。これは、このパラメーターを使用することで実現できます。

まず、HubLタグに`export_to_template_context=True`を追加する必要があります。次に、`widget_data.module.parameter_you_want_to_retreive`を使用します。

```hubl theme={null}
{% module "job_title" path="@hubspot/text", label="Enter a Job Title", value="Chief Morale Officer", export_to_template_context=True %}
{# Makes the parameters available to be stored and used in template logic #}

{{ widget_data.job_title.body.value }}
{# Prints the value of the HubL tag but can also be used in template logic #}
```

以下では、この考え方の適用例をいくつか紹介します。

## カスタムモジュール内での利用

`export_to_template_context=True`は、カスタムモジュールにとっては実質的な機能はないため、カスタムモジュールではサポートされません。テンプレート内のモジュールには[すでにアクセスできる](#retrieving-parameters-from-modules-already-rendered-on-the-template)ので、モジュール内の値を取得するために`export_to_template_context`を使用する必要がありません。モジュールの出力を非表示にする必要がある場合は、何も出力しないようにモジュールを作成できます。つまり、モジュールで何かを表示するかどうかを有効または無効にするブール値フィールドを含めます。

## ユーザーが選択できる背景画像

この例では、画像HubLタグを作成し、それを表示することなくテンプレートのコンテキストにエクスポートします。`widget_data`タグで`src`パラメーターを取得し、styleタグの背景画像のソースとして表示します。

```hubl theme={null}
{% module "background_image" path="@hubspot/image" label='Select a background image',
src='http://cdn2.hubspot.net/hub/428357/file-2117441560-jpg/img/dev-bg-compressed.jpg',
export_to_template_context=True %}

<!--Sample markup -->
<div class="bg-image-section" style="background:url('{{ widget_data.background_image.src }}'); background-size:cover; min-height: 500px;">
    <h1>Supercharge your app with HubSpot</h1>
    <h3>Build powerful integrations for a global community of users</h3>
</div>
```

これはコードテンプレートでも実現できますが、通常はカスタムモジュールを作成して、ページエディターのユーザーに最適な編集環境を提供することをお勧めします。このようなHubLタグは個別のフィールドとして表示されますが、関連するフィールドが複数存在する場合もあります。カスタムモジュールを使用すると、ページエディターではモジュールの全てのフィールドがグループ化された状態で表示されます。

## 定義済みのマークアップを表示するための選択フィールド

以下の例では、`export_to_template_context`パラメーターと[選択モジュール](/cms/reference/hubl/tags/standard-tags#choice)を組み合わせて、求人ページのバナーメッセージを変更しています。ユーザーがUIを使用して部門を選択すると、ユーザーが実際にコンテンツを編集しなくても見出しが変更されます。

```hubl theme={null}
{% module "department" path="@hubspot/choice", label="Choose department", value="Marketing", choices="Marketing, Sales, Dev, Services" export_to_template_context=True %}

{% if widget_data.department.value == "Marketing" %}

<h3>Want to join our amazing Marketing team?!</h3>
<h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4>

{% elif widget_data.department.value == "Sales" %}

<h3>Are you a Sales superstar?</h3>
<h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4>

{% elif widget_data.department.value == "Dev" %}

<h3>Do you love to ship code?</h3>
<h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4>

{% else %}

<h3>Want to work with our awesome customers?</h3>
<h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4>

{% endif %}
```

これと同じ機能を、カスタムモジュール内の選択フィールドを使用して再現できます。カスタムモジュールのUIでは、値とラベルの両方を含む選択オプションを非常に簡単に作成できます。

## テンプレートにすでに表示されているモジュールからパラメーターを取得する

ページにすでに表示されているモジュールまたはタグからパラメーターを取得する場合は、`widgets`という名前のdict内でそのモジュールにアクセスできます。`export_to_template_context`パラメーターは必須ではありません。構文は次のとおりです。

```hubl theme={null}
// HubL
{{ content.widgets.name_of_module.body.parameter }}

{{ content.widgets.my_text.body.value }}
```

<Warning>
  **注：**`content.widgets`はグローバルモジュールにアクセスしないので、上記のメソッドはグローバルモジュールのフィールドからの値の取得をサポートしません。
</Warning>

フィールドによってデータの保存形式が異なるため、表示するデータへのアクセス方法を確認するには、多くの場合、[開発者情報](/cms/start-building/introduction/developer-environment/troubleshooting/troubleshooting#developer-info)を使用すると便利です。

## HubLモジュール情報をブログリストに出力する

ブログテンプレートは、一般的にはブログに使用されますが、他の種類のリストを作成するために流用することもできます。前述の手法を使用してこの目的を達成できます。

例えば、会社が受信した報道記事のリストレイアウトを作成するとして、記事にリンクせずに、リストを別のページにリンクする場合があります。

[academy.hubspot.com/projects](https://academy.hubspot.com/projects)でこの考え方の実例を確認できます。プロジェクト リスト ページはブログ リスト テンプレートですが、個々の記事は通常のHubSpotページにリンクしています。制作担当者はエディターでリンク先を指定します。

個々のブログ記事のコードの先頭で、テキストフィールドを定義します。記事にこのテキストを表示しない場合は、`export_to_template_context`を使用します。

```hubl theme={null}
{% module "custom_blog_link" path="@hubspot/text", label="Link to external press item", export_to_template_context=True %}
```

このテキストフィールドはブログ記事ごとに編集できます。次に、リスト内のリンクを定義する必要があります。しかし、widget\_dataは記事のコンテキストにのみ存在するため、別の構文を使用してウィジェットデータを取得し、リンクに設定する必要があります。この場合は、`content.widgets.custom_blog_link.body.value`を使用します。ブログリストでは`widget_data`を使用できませんが、そのフィールドの値は個々のコンテンツのウィジェットのコンテキスト内に保存されます。

各記事を含むこのカスタムリンクを表示する基本的なブログリストのループを以下に示します。この方法を使用する場合は、ブログ記事ごとに自動的に作成されたサブディレクトリーをrobots.txtファイルに追加して、空の記事がGoogle などのクローラーによってクロールされないようにする必要があります。

```hubl theme={null}
{% for content in contents %}
<a href="https://developers.hubspot.jp/docs{{ content.widgets.custom_blog_link.body.value }}">
    Click here to see this press feature!
</a>
{% endfor %}
```