related_blog_posts HubLタグを使用して関連するブログ記事のリストを作成する

related_blog_posts HubLタグを使用すると、さまざまなパラメーターに基づいて関連するブログ記事の動的なリストを作成できます。執筆者、記事パス、および公開日による絞り込み機能を使用して、複数のブログにまたがる記事のリストを生成できます。開発者は、マクロを使用してモジュールのHTML出力を指定することもできます。このHubLタグはブログ記事とページの両方で使用できます。このチュートリアルでは、related_blog_posts HubLタグのパラメーターと使用方法について説明します。

related_blog_posts HubLタグは、記事／ページ側で編集可能なモジュールを生成せず、HubLで完全に設定されることに注意してください。

パラメーター

記事のリストは、以下のパラメーターに一致する記事（このHubLタグが表示された記事に関連する記事）と設定されたパラメーター値を比較して得られた関連性スコアから生成されます。必須のパラメーターはありませんが、パラメーターを指定することで、返される記事を細かく制御できます。カンマ区切りパラメーターの場合は、設定する値が多いほど返されるリストの範囲が広がります。post_formatterパラメーターを使用すると、モジュールのHTML出力を生成するマクロを指定できます。パラメーターの完全なリストと既定のHTML出力の例については、related_blog_postsの仕様を参照してください。

関連するブログ記事の関数のパラメーター
ParameterTypeDescription Default
limit
number

リストするブログ記事の最大数。

 3
blog_ids
'default' or blog id

リストする記事を含むブログのID。

 none
tags
String

記事に関連性があるかどうかを判定するために使用するタグ（カンマ区切り）。ブログ記事にこれらのタグのいずれかまたは類似のタグがある場合、記事の関連性が高くなり、リストでのランキングが向上します。

 none
blog_authors
String

リストする記事の執筆者の名前（カンマ区切り）

 none
blog_post_ids
String

リストする関連ブログ記事の検索に使用するブログ記事ID（カンマ区切り）。このパラメーターは、ウィジェットをページに表示する場合にのみ使用してください。ブログ記事の場合は既定で、ウィジェットが表示される記事になります。

 none
post_formatter
String

返されるブログ記事を表示するためのカスタムマクロの名前。このマクロには、フォーマットする記事オブジェクト、ブログ記事の反復数、および結果に含まれるブログ記事の合計数という3つのパラメーターが渡されます。指定されていないか、「default」に設定された場合は、組み込みのフォーマッターを使用して各記事がフォーマットされます。

注：post_formatterパラメーターの代わりに下のcallbackパラメーターを使用することをお勧めします。タグのHTMLのレンダリングが速くなり、ページの読み込み時間が短縮されるためです。

 none
callback
String

返されるブログ記事をレンダリングするためのJavaScript関数の名前。関数に、形式を設定するブログ記事オブジェクトの配列が渡されます。callbackパラメーターとpost_formatterパラメーターのどちらも指定されていない場合、タグは既定の形式のHTMLを生成します。

 none
path_prefixes
String

リストする記事のURLパスまたはサブディレクトリー（カンマ区切り）。ブログ記事のパスに類似するプレフィックスがある場合は、記事の関連性が高くなり、リストでのランキングが向上します。

 none
start_date
date/time

ある日時より後に公開された記事に絞り込むことができます。

 none
end_date
Date/Time

ある日時より前に公開された記事に絞り込むことができます。

 False
blog_post_override
String

他のパラメーター値やフィルターに関係なく、返されたリストに常に表示されるブログ記事のID（カンマ区切り）。

 none

ページの読み込みを高速化するために、post_formatterパラメーターではなくcallbackパラメーターを使用することを強くお勧めします。

1つの記事にrelated_blog_posts HubLタグを使用する場合は、blog_post_idsパラメーターを指定しないでください。ブログ記事の場合は既定で、ウィジェットが表示される記事になります。

related_blog_posts HubLタグの使用例

このタグを使用してウェブサイトを強化する方法の例を以下に示します。

複数のブログから特定の執筆者による記事を表示する

この例では、2つの異なるブログから、指定された3人のblog_authors（ブログ執筆者）によって書かれた記事のリストを生成します。 

{% related_blog_posts blog_ids="3241539189,3261083894", limit=6, blog_authors="John Smith,Joe Smith,Frank Smith" %}

「sales enablement」タグを含む記事を、公開日の期間を限定して表示する

この例では、特定のブログ記事に関連し、「sales enablement」タグを含む10件の記事のリストを、公開日の期間を限定して作成します。この例では、blog_post_idsパラメーターをページで使用するために指定します。

{% related_blog_posts blog_post_ids="3267910554", limit=10, tags="sales enablement", start_date="2018-02-05", end_date="2018-06-10" %}

JSコールバックを使用する記事を表示してHTML出力を制御する

この例では、callbackパラメーターを使用して記事リストのHTML出力を制御することにより、5件の記事のリストを生成します。（マクロを使用したpost_formatterパラメーターを使用しない方法。）

{% related_blog_posts limit=5, callback="blog_post_formatter" %} <script> var blog_post_formatter = function(blogposts) { var formatted = "<div>"; for (var i = 0; i < blogposts.length; i++) { var blogpost = blogposts[i]; formatted += '<div class="related-blog-item">'; formatted += `<span>Related Post ${i + 1}/${blogposts.length}</span><br>`; formatted += `<a class="related-blog-title" href="${blogpost.url}"><span>${blogpost.name}</span></a>`; formatted += `<div class="hs-related-blog-byline">by <span class="related-blog-author">${blogpost.blogAuthor.fullName}</span><span class="related-blog-posted-at"> posted on </span><span class="related-blog-date">${new Date(blogpost.publishDate).toLocaleDateString()}</span></div>`; formatted += `<p class="related-blog-post-summary">${blogpost.postSummary}<a href="${blogpost.url}">Read more</a></p>`; formatted += '<div class="related-blog-tags">'; if (blogpost.tagList.length > 0) { formatted += `Tags: ${blogpost.tagList.map(tag => tag.label).join(", ")}`; } formatted += '</div>'; if (blogpost.featuredImage) { formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`; } formatted += '</div>'; } formatted += '</div>'; return formatted; } </script>
参考になりましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。