ブログテンプレート

Last updated:
APPLICABLE PRODUCTS
  • Marketing Hub
    • Professional or Enterprise
  • CMS Hub
    • Starter, Professional, or Enterprise

HubSpotのブログは、ブログ リスト ページと個別のブログ記事で構成されます。ブログ リスト ページ テンプレートは個別のブログ記事をリスト化するために使用されるほか、執筆者およびタグのリストページをレンダリングするためにも使用されます。リストページ用とブログ記事用にそれぞれ個別のテンプレートを作成することも、両方を含めて全てのページをレンダリングする共通のテンプレートを作成することも可能です。 

この記事では、ブログテンプレートのマークアップ、テンプレートを構成する要素、そしてカスタマイズのオプションについて説明します。

リストページと記事の共通テンプレートを作成する

リストページと記事の両方をレンダリングする共通のテンプレートを作成するには、テンプレートファイルの先頭にtemplateType: blogアノテーションを追加します。共通のテンプレートを両方のレンダリングに使用する場合は、if文を使用して、ユーザーがリストページと個別の記事のどちらを表示しているかを評価します。デザインマネージャーのドラッグ&ドロップレイアウトを使用している場合、ブログ コンテンツ モジュール ボタンのUIにこのif文が組み込まれます。

If_listing_viewステートメントを使用すると、記事とリストのコードを別々に書くことができます。

{% if is_listing_view %} Markup for blog listing template {% else %} Markup for blog post template {% endif %}

リストページ用と記事用に個別のテンプレートを作成する

ブログ記事リストページに別々のテンプレートを用意することも可能です。個別のテンプレートを使用することにより、開発者はコードがすっきりして読みやすく、コンテンツ作成者はテンプレートを選びやすくなります。共通のテンプレートでは先頭にtemplateType: blogアノテーションを挿入しますが、各ページ用に個別のテンプレートを作成する場合はそれに代わり、テンプレートの先頭にそれぞれ以下のアノテーションを追加します。

  • ブログ記事テンプレート: templateType: blog_post
  • ブログ リスト ページ テンプレート: templateType: blog_listing
template - annotation - blog - listing

記事テンプレートとリスト ページ テンプレートを別々に作成する場合、is_listing_viewチェックは必要ありませんが、代わりにアカウントのブログ設定で個別のテンプレートを手動で選択する必要があります。

また、共通のブログテンプレートをリストページ用もしくは記事用のテンプレートに移行することも可能です。

リスト ページ テンプレート

テンプレートにtemplateType: blog_listingアノテーションを挿入すると、[ブログ設定]でリストページ用のテンプレートとして選択できるようになります。コンテンツ作成者はこのテンプレートタイプを使用して、ページエディター内でリストページを編集することも可能です。さらに、テンプレートにドラッグ&ドロップエリアも含めることで、他のCMSページと同様にページエディターにおけるモジュールの追加や削除が可能になります。ドラッグ&ドロップエリアの追加例に関して、詳しくはCMSボイラープレートのブログテンプレート(英語)をご覧ください。

記事のリストは、ブログ記事を反復処理するforループによって生成されます。contentsは、そのブログに含まれる全ての記事を含む事前定義されたコンテンツシーケンスです。

{% for content in contents %} <div class="post-item"> Post item markup that renders with each iteration. </div> {% endfor %}

ブログ リスト ページ テンプレートの全てのテキスト文字列は、フィールドで制御することをお勧めします。これにより、多言語ブログの作成が容易になり、コンテンツ作成者の操作性が向上します。

ブログ リスト ページ モジュールを作成する

コンテンツ作成者がモジュールをブログ リスト ページ内コンテンツの周囲(側面や上下など)に配置することを許可できます。これを有効にするには、ブログリストのforループを使用したブログ リスト モジュールを作成することをお勧めします。

HubSpotは、サマリーの表示やキービジュアルを使用するためのブログ設定を提供していますが、これらの機能をモジュールに組み込むこともできます。モジュールへの組み込みにより、コンテンツ作成者はブログの設定ページへ切り替えることなく、ページエディター内で必要な機能を使用できるようになります。

ブログ執筆者、タグ、シンプル リスト ページ

HubSpotブログにはブログ記事とブログ リスト ページに加えて、ブログ執筆者用のページ、ブログ記事のタグ用のページ、シンプル リスト ページもあります。こうした追加ページは、ブログ リスト ページと同じテンプレートを使用してコンテンツが表示されます。

リストページのテンプレートはブログ執筆者、タグ、簡単なリストページでも共有されるため、テンプレートに公開された更新内容もこれらのページに適用されます。

追加ページのレイアウトを個別に構成するには、if文を使用して、各タイプのページのコンテンツを条件付きでレンダリングします。

blog_authors

標準的なHubSpotブログ リスト ページのマークアップには、if blog_authorステートメントが含まれます。このステートメントは、執筆者が公開した全ての記事を一覧にした執筆者の個別ページを表示する際に[true]と評価されます。ボイラープレートテンプレートには、執筆者の名前、プロフィール、およびソーシャル メディア アカウントが含まれています。

{% if blog_author %} <div class="blog-header"> <div class="blog-header__inner"> {% if blog_author.avatar %} <div class="blog-header__author-avatar" style="background-image: url('{{ blog_author.avatar }}');"></div> {% endif %} <h1 class="blog-header__title">{{ blog_author.display_name }}</h1> <h4 class="blog-header__subtitle">{{ blog_author.bio }}</h4> {% if blog_author.has_social_profiles %} <div class="blog-header__author-social-links"> {% if blog_author.website %} <a href="{{ blog_author.website }}" target="_blank"> {% icon name="link" style="SOLID" width="10" %} </a> {% endif %} {% if blog_author.facebook %} <a href="{{ blog_author.facebook }}" target="_blank"> {% icon name="facebook-f" style="SOLID" width="10" %} </a> {% endif %} {% if blog_author.linkedin %} <a href="{{ blog_author.linkedin }}" target="_blank"> {% icon name="linkedin-in" style="SOLID" width="10" %} </a> {% endif %} {% if blog_author.twitter %} <a href="{{ blog_author.twitter }}" target="_blank"> {% icon name="twitter" style="SOLID" width="10" %} </a> {% endif %} </div> {% endif %} </div> </div> {% else %}

If tag

if tag ステートメントを使用すると、ブログのトピックページにのみコードをレンダリングできます。訪問者がウェブサイト上でブログトピックをクリックすると、その値が表示されます。以下の例は、ページタイトル変数を使用してタグ リスト ページ上部にタグ名を自動出力するスニペットです。

{% if tag %} <h3>Posts about {{ page_meta.html_title|split(" | ")|last }}</h3> {% endif %}

If not simple_list_page

ブログ記事の一覧を表示するためにレンダリングされるブログ リスト ページには、標準のリストページとシンプル リスト ページの2種類があります。

  • 標準のリストページでは、記事リストのブログ設定で指定された記事の数だけレンダリングが反復し、それに応じてページ番号も付与されます。
  • シンプル リスト ページは全ての記事の一覧で、ページ番号には対応していません。シンプル リスト ページは、ブログ設定の記事数制限の影響を受けることなく、通常は直近200件のブログ記事へのリンクが格納されます。シンプル リスト ページのアドレスは、ブログURLのパスの末尾に/allを追加したものです。

if not simple_list_pageを使用して、シンプル リスト ページと標準のリストページのどちらをレンダリングするかを指定できます。このステートメントを簡略化したものを以下でご参照ください。

このif文ではロジックが反転している点にご注意ください。つまり、elseでシンプル リスト ビューを定義しています。必要に応じて、代わりにunless文を使用することもできます。
{% if not simple_list_page %} Iterated post markup for regular listing {% else %} <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2> {% endif %}

リストのページ送り

ブログ リスト ページではページ番号が自動生成されます。リスト ページ テンプレートには、訪問者がブログ記事内でページを簡単に切り替えられるようにするロジックを含めることが可能です。デモ用ボイラープレートのブログでは、下記のようなマークアップを使って数値によるシンプルなページ送りを実現しています。

{% if contents.total_page_count > 1 %} <div class="blog-pagination"> {% set page_list = [-2, -1, 0, 1, 2] %} {% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %} {% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %} {% elif current_page_num == 2 %}{% set offset = 1 %} {% elif current_page_num == 1 %}{% set offset = 2 %} {% else %}{% set offset = 0 %}{% endif %} <a class="blog-pagination__link blog-pagination__prev-link {{ "blog-pagination__prev-link--disabled" if !last_page_num }}" href="{{ blog_page_link(last_page_num) }}"> {% icon name="chevron-left" style="SOLID", width="13", no_wrapper=True %} Prev </a> {% for page in page_list %} {% set this_page = current_page_num + page + offset %} {% if this_page > 0 and this_page <= contents.total_page_count %} <a class="blog-pagination__link blog-pagination__number-link {{ "blog-pagination__link--active" if this_page == current_page_num }}" href="{{ blog_page_link(this_page) }}">{{ this_page }}</a> {% endif %} {% endfor %} <a class="blog-pagination__link blog-pagination__next-link {{ "blog-pagination__next-link--disabled" if !next_page_num }}" href="{{ blog_page_link(current_page_num + 1) }}"> Next {% icon name="chevron-right" style="SOLID", width="13", no_wrapper=True %} </a> </div> {% endif %}

ボイラープレートマークアップ

以下で、ブログ記事とブログ リスト ページ テンプレートのボイラープレートマークアップをご覧ください。各セクションに記載されているように、GitHubのCMSボイラープレートでこのマークアップを表示することもできます。

記事テンプレートマークアップ

1つのブログ内の全ての記事は、共通のブログテンプレートによって生成されます。Contentは、リクエストされたブログ記事に関する情報を含む既定のデータオブジェクトです。デモ用ボイラープレート記事は、次のマークアップ(英語)を使ってレンダリングされます。

<div class="content-wrapper"> <div class="blog-post"> <h1>{{ content.name }}</h1> <div class="blog-post__meta"> <a href="{{ blog_author_url(group.id, content.blog_post_author.slug) }}"> {{ content.blog_post_author.display_name }} </a> <div class="blog-post__timestamp"> {{ content.publish_date_localized }} </div> </div> <div class="blog-post__body"> {{ content.post_body }} </div> {% if content.tag_list %} <div class="blog-post__tags"> {% icon name="tag" style="SOLID" %} {% for tag in content.tag_list %} <a class="blog-post__tag-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>{% if not loop.last %},{% endif %} {% endfor %} </div> {% endif %} </div> <div class="blog-comments"> {% module "blog_comments" path="@hubspot/blog_comments", label="Blog Comments" %} </div> </div>

また、ブログ記事の執筆者情報もcontentデータの中に含まれます。

<img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}"> <h3>Written by <a class="author-link" href="{{ blog_author_url(group.id, content.blog_post_author.slug) }}">{{ content.blog_post_author.display_name }}</a></h3> <p>{{ content.blog_post_author.bio }}</p> {% if content.blog_post_author.has_social_profiles %} <div class="hs-author-social-section"> <div class="hs-author-social-links"> {% if content.blog_post_author.facebook %} <a href="{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook</a> {% endif %} {% if content.blog_post_author.linkedin %} <a href="{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a> {% endif %} {% if content.blog_post_author.twitter %} <a href="{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter</a> {% endif %} {% if content.blog_post_author.google_plus %} <a href="{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a> {% endif %} </div> </div> {% endif %}

リスト ページ テンプレートのマークアップ

デモ用ボイラープレート ブログ リスト ページのコンテンツのforループは、次のマークアップ(英語)によってレンダリングされます。

{% for content in contents %} {# On the blog homepage the first post will be featured above older posts #} {% if (loop.first && current_page_num == 1 && !topic) %} <div class="blog-index__post blog-index__post--large"> <a class="blog-index__post-image blog-index__post-image--large" {% if content.featured_image %} style="background-image: url('{{ content.featured_image }}')"; {% endif %} href="{{ content.absolute_url }}"></a> <div class="blog-index__post-content blog-index__post-content--large"> <h2><a href="{{ content.absolute_url }}">{{ content.name }}</a></h2> {{ content.post_list_content }} </div> </div> {% else %} <div class="blog-index__post blog-index__post--small"> <a class="blog-index__post-image blog-index__post-image--small" {% if content.featured_image %} style="background-image: url('{{ content.featured_image }}')"; {% endif %} href="{{ content.absolute_url }}"></a> <div class="blog-index__post-content blog-index__post-content--small"> <h2><a href="{{ content.absolute_url }}">{{ content.name }}</a></h2> {{ content.post_list_content|truncatehtml(100) }} </div> </div> {% endif %} {% endfor %}

関連コンテンツ


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