I am developing a blog and it is almost done. I want page numbers on each page, I already have arrows for next page and previous page.
It is a custom coded blog developed in Hubspot hence the use of HUBL, a templating language and HTML.
Can anyone tell me what line of code I need to add in order to get page numbers on there too?
I have separated it into to documents: BlogList.html and Blogpost.html and will show you what I have so far.
Any advice will be welcomed.
Thank you.
BlogList.html:
<!DOCTYPE html>
<html lang="en">
<head>
{% set page_domain = "https://hello.com" %}
{% set images_domain = "https://login.hello.com" %}
{% import '/2019 Theme/MacroMeta.html' %}
{{ scm_meta(page_meta.html_title) }}
</head>
<body>
{% import '/2019 Theme/MacroHeader.html' %}
{{ scm_header() }}
{{ standard_header_includes }}
<div class="content_container">
<div class="banner internal_banner" style="background-image: url('{{images_domain}}/blog-images/banner_blog.jpg')">
<div class="content text-center">
<img src="{{images_domain}}/blog-images/banner_icon_blog.png"
srcset="{{images_domain}}/blog-images/[email protected] 2x" alt="" class="mb-4">
<h1 class="mb-3"><strong>Blog</strong></h1>
</div>
</div>
<div class="section section_grey">
<div class="content">
<div class="row blog_posts_list_ctn">
{% for content in contents %}
<div class="col-12 col-sm-6 col-md-4 py-3">
<div class="blog_post_list">
<div class="blog_list_img_holder">
{% if content.post_list_summary_featured_image %}
<a href="{{content.absolute_url}}"><img src="{{ content.post_list_summary_featured_image }}" alt=""
class="img-fluid"></a>
{% endif %}
</div>
<div class="blog_list_text text-center">
<div class="blog_list_date text-uppercase">
{{ content.updated|datetimeformat('%A, %B %e, %Y') }}
</div>
<div class="blog-list-title">
<h3><a href="{{content.absolute_url}}"><strong>{{ content.name }}</strong></a></h3>
</div>
<div class="blog-list-text">
{{ content.post_list_content|safe }}
</div>
<div class="blog-list-btn">
<a href="{{content.absolute_url}}" class="btn btn-lg btn_arrow blue">Read more</a>
</div>
<!--
{% if content.topic_list %}
<div class="acticle_tags">
{% for topic in content.topic_list %}
<a href="{{ group.absolute_url }}/topic/{{ topic.slug }}" tabindex="0">#{{ topic.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</div>
{% endif %}
-->
</div>
</div>
</div>
{% endfor %}
</div>
<div class="blog_paginate d-flex">
{% if last_page_num %}
<a href="{{ blog_page_link(last_page_num) }}" class="paginate_prev"><i class="fa fa-long-arrow-left"
aria-hidden="true"></i> Prev</a>
{% endif %}
{% if next_page_num %}
<a href="{{ blog_page_link(next_page_num) }}" class="paginate_next">Next <i class="fa fa-long-arrow-right"
aria-hidden="true"></i></a>
{% endif %}
</div>
</div>
</div>
</div>
{% import '/2019 Theme/MacroFooter.html' %}
{{ scm_footer() }}
{{ standard_footer_includes }}
</body>
</html>
BlogPost.html:
<!DOCTYPE html>
<html lang="en">
<head>
{% set page_domain = "https://hello.com" %}
{% set images_domain = "https://login.hello.com" %}
{% import '/2019 Theme/MacroMeta.html' %}
{{ scm_meta(page_meta.html_title + ' | Hello Blog') }}
{% import '/2019 Theme/MacroBlogCanonicalUrl.html' %}
</head>
<body>
{% import '/2019 Theme/MacroHeader.html' %}
{{ scm_header() }}
{{ standard_header_includes }}
<div class="section">
<div class="content">
<div class="back-to-blog-link">
<a class="back-link" href="https://blog.scanmarket.com">Back to the Hello Blog</a>
</div>
<div class="article_title_ctn">
<h2 class="text-center"><strong>{{ content.name }}</strong></h2>
</div>
<div class="row blog_post_details py-5 my-3 my-lg-5">
<div class="col-12 col-md-6">
<div class="section_grey p-4 p-lg-5 blog-post-intro">
<h3><strong>{{ content.post_list_content|safe }}</strong></h3>
</div>
</div>
<div class="col-12 col-md-5 offset-md-1 mt-5 mt-md-0">
<div class="article_details">
<table class="table_details border-0 align-middle w-100">
<tbody>
<tr>
<td><strong>Author</strong></td>
<td>
<div class="article_authors">
<a class="author-link"
href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a>
</div>
</td>
</tr>
<tr>
<td><strong>Date</strong></td>
<td>
<p class="small_text text_grey mb-0 text-uppercase">
<strong>{{ content.updated|datetimeformat('%A, %B %e, %Y') }}</strong></p>
</td>
</tr>
<tr class="separator">
<td colspan="2"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="content_small article_content content py-0">
{{ content.post_body }}
</div>
</div>
</div>
{% import '/2019 Theme/MacroFooter.html' %}
{{ scm_footer() }}
{{ standard_footer_includes }}
</body>
</html>
Himanshu's answer is good.
Just adding for anyone who stumbles on this, the HubSpot Theme boilerplate has a pagination module included. This includes the HTML, HubL, and CSS.
https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-pagination.module