【HubSpot】blog_popular_postsでランキング記事を作成する

こんにちは。イノーバWEB部の三砂です。

今回は以下の画像のようなランキング記事を作成していきたいと思います。

といってもそれほど複雑なものではなく、既に用意されたHubL関数を利用することで実装できます。

完成図

今回は以下のように、サイドバーに人気記事を5件表示してみたいと思います。

コード

コード自体は以下で実装しています。

<div class="sidebar-post">
　<h2 class="sidebar-heading">ランキング</h2>
　<ul class="sidebar-post-list">
　　{% set popular_posts = blog_popular_posts("ブログのID(12桁の数字)", 5, [], "popular_past_month") %}
　　{% for post in popular_posts %}
　　<li class="sidebar-post-item">
　　　<a href="{{ post.absolute_url }}">
　　　　<div class="sidebar-post-thumbnail">
　　　　　<img src="{{ post.featured_image }}" alt="{{ post.name }}">
　　　　</div>

　　　　<div class="sidebar-post-textarea">
　　　　　<h3 class="sidebar-post-title">{{ post.name }}</h3>
　　　　　<p class="sidebar-post-date">{{ content.publish_date | format_date('yyyy.MM.dd') }}</p>
　　　　</div>
　　　</a>
　　</li>
　　{% endfor %}
　</ul>
</div>

blog_popular_postsについて

blog_popular_postsには5つのパラメーターを取ることが出来ます。

以下の公式ドキュメントを読むと分かりやすいです。
https://developers.hubspot.jp/docs/cms/hubl/functions

1. どのブログを指定するか
2. 記事を何件表示するか
3. タグで絞り込みをするか(特定のタグに紐づいた記事に絞り込むか)
4. タイムフレーム(全期間、年、半年、月)
5. ANDならで③で指定したタグが全て付与されている記事、ORなら③で指定したタグの中で1つでもあればそれを出力といった考え方になります。

①に関しては出したいブログの指定をする場合にIDを指定する必要があります。

例えば導入事例というブログを記事を出力したい場合は、以下のオレンジの枠からIDを確認することが出来ます。

ブログのタイプによってIDが異なるはずなので出力したいもののIDを確認していただければと思います。

②に関しては何件出すかなので5件出したければ「5」と書きます。

③は配列形式になっていますが、絞り込みをするタグを指定します。今回は特に指定していません。ランキング記事ならむしろ指定しないケースの方が多いかもしれません。

④はランキング記事の期間絞り込みです。今回はpopular_past_monthということで、月単位での指定としています。

⑤はANDかORを記述しますが③ありきなので、今回は入れていません。

その他の部分について

for文でループ処理して記事をli形式で出力しているような形です。一応他の箇所を見ていきたいと思います。

今回一つ一つの記事のデータは「post」という変数名にしています。