ブログテンプレート
-
Marketing Hub
- Professional or Enterprise
-
Content Hub
- Starter, Professional, or Enterprise
HubSpotのブログは、ブログ リスト ページと個別のブログ記事で構成されます。ブログ リスト ページ テンプレートは個別のブログ記事をリスト化するために使用されるほか、執筆者およびタグのリストページをレンダリングするためにも使用されます。リストページ用とブログ記事用にそれぞれ個別のテンプレートを作成することも、両方を含めて全てのページをレンダリングする共通のテンプレートを作成することも可能です。
この記事では、ブログテンプレートのマークアップ、テンプレートを構成する要素、そしてカスタマイズのオプションについて説明します。
リストページと記事の両方をレンダリングする共通のテンプレートを作成するには、テンプレートファイルの先頭にtemplateType: blog
アノテーションを追加します。共通のテンプレートを両方のレンダリングに使用する場合は、if文を使用して、ユーザーがリストページと個別の記事のどちらを表示しているかを評価します。デザインマネージャーのドラッグ&ドロップレイアウトを使用している場合、ブログ コンテンツ モジュール ボタンのUIにこのif
文が組み込まれます。
If_listing_view
ステートメントを使用すると、記事とリストのコードを別々に書くことができます。
ブログ記事とリストページに別々のテンプレートを用意することも可能です。個別のテンプレートを使用することにより、開発者はコードがすっきりして読みやすく、コンテンツ作成者はテンプレートを選びやすくなります。共通のテンプレートでは先頭にtemplateType: blog
アノテーションを挿入しますが、各ページ用に個別のテンプレートを作成する場合はそれに代わり、テンプレートの先頭にそれぞれ以下のアノテーションを追加します。
- ブログ記事テンプレート:
templateType: blog_post
- ブログ リスト ページ テンプレート:
templateType: blog_listing
記事テンプレートとリスト ページ テンプレートを別々に作成する場合、is_listing_view
チェックは必要ありませんが、代わりにアカウントのブログ設定で個別のテンプレートを手動で選択する必要があります。
また、共通のブログテンプレートをリストページ用もしくは記事用のテンプレートに移行することも可能です。
テンプレートにtemplateType: blog_listing
アノテーションを挿入すると、[ブログ設定]でリストページ用のテンプレートとして選択できるようになります。コンテンツ作成者はこのテンプレートタイプを使用して、ページエディター内でリストページを編集することも可能です。さらに、テンプレートにドラッグ&ドロップエリアも含めることで、他のCMSページと同様にページエディターにおけるモジュールの追加や削除が可能になります。ドラッグ&ドロップエリアの追加例に関して、詳しくはCMSボイラープレートのブログテンプレート(英語)をご覧ください。
記事のリストは、ブログ記事を反復処理するforループによって生成されます。contents
は、そのブログに含まれる全ての記事を含む事前定義されたコンテンツシーケンスです。
ブログ リスト ページ テンプレートの全てのテキスト文字列は、フィールドで制御することをお勧めします。これにより、多言語ブログの作成が容易になり、コンテンツ作成者の操作性が向上します。
コンテンツ作成者がモジュールをブログ リスト ページ内コンテンツの周囲(側面や上下など)に配置することを許可できます。これを有効にするには、ブログリストのforループを使用したブログ リスト モジュールを作成することをお勧めします。
HubSpotは、サマリーの表示やキービジュアルを使用するためのブログ設定を提供していますが、これらの機能をモジュールに組み込むこともできます。モジュールへの組み込みにより、コンテンツ作成者はブログの設定ページへ切り替えることなく、ページエディター内で必要な機能を使用できるようになります。
HubSpotブログにはブログ記事とブログ リスト ページに加えて、ブログ執筆者用のページ、ブログ記事のタグ用のページ、シンプル リスト ページもあります。こうした追加ページは、ブログ リスト ページと同じテンプレートを使用してコンテンツが表示されます。
追加ページのレイアウトを個別に構成するには、if
文を使用して、各タイプのページのコンテンツを条件付きでレンダリングします。
標準的なHubSpotブログ リスト ページのマークアップには、if blog_author
ステートメントが含まれます。このステートメントは、執筆者が公開した全ての記事を一覧にした執筆者の個別ページを表示する際に[true]と評価されます。ボイラープレートテンプレートには、執筆者の名前、プロフィール、およびソーシャル メディア アカウントが含まれています。
ブログ記事の一覧を表示するためにレンダリングされるブログ リスト ページには、標準のリストページとシンプル リスト ページの2種類があります。
- 標準のリストページでは、記事リストのブログ設定で指定された記事の数だけレンダリングが反復し、それに応じてページ番号も付与されます。
- シンプル リスト ページは全ての記事の一覧で、ページ番号には対応していません。シンプル リスト ページは、ブログ設定の記事数制限の影響を受けることなく、通常は直近200件のブログ記事へのリンクが格納されます。シンプル リスト ページのアドレスは、ブログURLのパスの末尾に
/all
を追加したものです。
if not simple_list_page
を使用して、シンプル リスト ページと標準のリストページのどちらをレンダリングするかを指定できます。このステートメントを簡略化したものを以下でご参照ください。
ブログ リスト ページではページ番号が自動生成されます。リスト ページ テンプレートには、訪問者がブログ記事内でページを簡単に切り替えられるようにするロジックを含めることが可能です。デモ用ボイラープレートのブログでは、下記のようなマークアップを使って数値によるシンプルなページ送りを実現しています。
以下で、ブログ記事とブログ リスト ページ テンプレートのボイラープレートマークアップをご覧ください。各セクションに記載されているように、GitHubのCMSボイラープレートでこのマークアップを表示することもできます。
1つのブログ内の全ての記事は、共通のブログテンプレートによって生成されます。Content
は、リクエストされたブログ記事に関する情報を含む既定のデータオブジェクトです。デモ用ボイラープレート記事は、次のマークアップ(英語)を使ってレンダリングされます。
また、ブログ記事の執筆者情報もcontent
データの中に含まれます。
デモ用ボイラープレート ブログ リスト ページのコンテンツのforループは、次のマークアップ(英語)によってレンダリングされます。
貴重なご意見をありがとうございました。