# ボイラーテンプレートのblog-index.htmlでのページネーションの表示について

**URL:** <https://community.hubspot.com/t/blog-index-html/106282>\
**Category:** Tips, Tricks & Best Practices\
**Created:** [May 2, 2024, 6:24am UTC](https://community.hubspot.com/t/blog-index-html/106282 "2024-05-02T06:24:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![03967](https://avatars.discourse-cdn.com/v4/letter/0/a8b319/32.png) [@03967](https://community.hubspot.com/u/03967)\
**Post date:** [May 2, 2024, 6:24am UTC](https://community.hubspot.com/t/blog-index-html/106282/1 "2024-05-02T06:24:42Z")

</div>

ここ最近初めてHubSpotを使い始めました。HTML,CSS,JSはわかりますがPythonは未学習です。

ボイラーテンプレートにあるblog-index.htmlをブログリストに適用しました。

14件ブログを投稿したのですがページネーションが表示されません。

該当のページを編集する画面ではモジュールとしてページネーションは表示されています。

任意の件数ごとにページネーションを表示させたいのですが、どうすればいいでしょうか？

---

<div class="post-metadata">

**Author:** ![natsumimori](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/natsumimori/32/39807_2.png) [@natsumimori](https://community.hubspot.com/u/natsumimori)\
**Post date:** [May 2, 2024, 9:17am UTC](https://community.hubspot.com/t/blog-index-html/106282/2 "2024-05-02T09:17:31Z")

</div>

@03967 さん、コミュニティーへの投稿ありがとうございます。

コンテンツ作成周りに詳しい皆さま、メンションさせてください： @assi @KMurota [@yskz\_aoyama](https://community.hubspot.com/t5/user/viewprofilepage/user-id/544228)

こちらのご質問にアドバイスできる点があればぜひお願いいたします🙏

他にも詳しい方がいらっしゃったら、ぜひアドバイスや提案コメントを残していただけると助かります！

---

<div class="post-metadata">

**Author:** ![03967](https://avatars.discourse-cdn.com/v4/letter/0/a8b319/32.png) [@03967](https://community.hubspot.com/u/03967)\
**Post date:** [May 7, 2024, 2:10am UTC](https://community.hubspot.com/t/blog-index-html/106282/3 "2024-05-07T02:10:43Z")

</div>

@natsumimori コミュニティの詳しい方にメンションしてくださってありがとうございました！おかげさまで解決いたしました。

---

<div class="post-metadata">

**Author:** ![KMurota](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kmurota/32/61991_2.png) [@KMurota](https://community.hubspot.com/u/KMurota)\
**Post date:** [May 2, 2024, 11:11am UTC](https://community.hubspot.com/t/blog-index-html/106282/4 "2024-05-02T11:11:10Z")

</div>

@03967  
こちらが参考になるかと思います。

[https://community.hubspot.com/t5/CMS-Development/How-to-control-number-of-posts-in-blog-listing-page/td-p/781806](https://community.hubspot.com/t5/CMS-Development/How-to-control-number-of-posts-in-blog-listing-page/td-p/781806)

```lia-code-sample
{% set posts_per_page = 11 %}
{% set total_posts = blog_recent_posts_count() %}

{% if page_query_param %}
 {% set current_page = int(page_query_param) %}
{% else %}
 {% set current_page = 1 %}
{% endif %}

{% set posts_offset = posts_per_page - 1 %}
{% set max_page = ceil((total_posts - posts_per_page) / posts_offset) + 1 %}

{% set blog_posts = blog_recent_posts(limit=posts_per_page, offset=(current_page - 1) * posts_offset) %}

{% if current_page == 1 %}
 {% set blog_posts = blog_recent_posts(limit=posts_per_page) %}
{% else %}
 {% set blog_posts = blog_recent_posts(limit=posts_offset, offset=(current_page - 2) * posts_offset + posts_per_page) %}
{% endif %}

```

`blog_recent_posts()` にlimitの他offsetのオプションがありますので、そちらでコントロールします。

---

<div class="post-metadata">

**Author:** ![03967](https://avatars.discourse-cdn.com/v4/letter/0/a8b319/32.png) [@03967](https://community.hubspot.com/u/03967)\
**Post date:** [May 7, 2024, 2:09am UTC](https://community.hubspot.com/t/blog-index-html/106282/5 "2024-05-07T02:09:37Z")

</div>

@KMurota 返信ありがとうございます。HubSpotの設定から表示件数の設定をして解決しましたが、ページネーションを作成する際にこちらも参考にさせていただきます！

---

<div class="post-metadata">

**Author:** ![assi](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/assi/32/25699_2.png) [@assi](https://community.hubspot.com/u/assi)\
**Post date:** [May 4, 2024, 4:09am UTC](https://community.hubspot.com/t/blog-index-html/106282/6 "2024-05-04T04:09:24Z")

</div>

@03967 ボイラープレートを利用されているということであれば、恐らくページネーション部分はHubSpotが標準で用意しているページネーションモジュールを利用されていると思うので、いったん出力コードについては割愛します。

HubSpotが標準で用意しているページネーションの仕組みで重要なのが、ブログごとの一覧ページに表示する件数設定です。例えばこれが10となっていると、1ページに表示するブログ記事の件数を10件として、10件以上ある場合はページネーションが有効になります。

 ![assi_0-1714795550664.jpeg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/78d207aec58b0c96ba5948d615b6629f19e3d24e.jpeg)

もしここの設定を確認しても変わらずページネーションが表示されない場合、一度ページネーションを表示させたい箇所に[ドキュメント](https://developers.hubspot.com/docs/cms/building-blocks/templates/blog#listing-pagination)にも掲載のある下記コードを差し込んでみてください！

```lia-code-sample
{% 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 %}

```

※ちなみにですが、HubSpotのフロントエンド開発では基本的にPythonは利用しませんので未学習で問題ありません

---

<div class="post-metadata">

**Author:** ![03967](https://avatars.discourse-cdn.com/v4/letter/0/a8b319/32.png) [@03967](https://community.hubspot.com/u/03967)\
**Post date:** [May 7, 2024, 2:06am UTC](https://community.hubspot.com/t/blog-index-html/106282/7 "2024-05-07T02:06:03Z")

</div>

@assi 返信ありがとうございます。 教えていただいた方法で解決いたしました！丁寧に教えていただきありがとうございます。